@akinon/pz-click-collect

Installation method

You can use the following command to install the extension with the latest plugins:

npx @akinon/projectzero@latest --plugins

Click & Collect Component

The ClickCollect component enables customers to choose retail store pickup instead of standard shipping. It integrates deeply with the checkout flow and allows complete UI customization.

Features

• Toggle between delivery to address and retail store pickup
• City and store selection
• Fully customizable UI through renderer props

Props

ClickCollectProps

| Properties | Type | Required | Description | | --- | --- | --- | --- | | addressTypeParam | string | Yes | Address Type Request Param | | translations | ClickCollectTranslationsProps | Yes | Object containing localized strings. | | renderer | ClickCollectRendererProps | No | Optional UI overrides for component sections. |

ClickCollectTranslationsProps

| Properties | Type | Description | | --- | --- | --- | | deliveryFromTheStore | string | Text for the inactive state label. | | deliveryStore | string | Label text for selecting a store during the active state. |

Customization

The Click & Collect component is fully customizable through the renderer prop. You can override any part of the UI while keeping the core functionality.

Renderer Props

The renderer prop accepts an object with the following properties:

interface ClickCollectRendererProps {
  renderContainer?: (props: {
    children: React.ReactNode,
    isActive: boolean,
    handleActive: () => void,
    handleDeactivate: () => void
  }) => React.ReactNode;

  renderInactiveState?: (props: {
    translations: ClickCollectTranslationsProps
  }) => React.ReactNode;

  renderActiveState?: (props: {
    translations: ClickCollectTranslationsProps,
    cities: any[],
    stores: any[],
    selectedCity: any,
    handleCityChange: (e: ChangeEvent<HTMLSelectElement>) => void,
    handleStoreChange: (e: ChangeEvent<HTMLSelectElement>) => void,
    handleDeactivate: () => void
  }) => React.ReactNode;

  renderCloseButton?: (props: {
    handleDeactivate: () => void
  }) => React.ReactNode;

  renderLoader?: () => React.ReactNode;
}

Usage Examples

Default Usage

import { ClickCollect } from '@akinon/pz-click-collect';

<PluginModule
  component={Component.ClickCollect}
  props={{
    addressTypeParam: addressType.requestParam,
    translations: {
      deliveryFromTheStore: 'DELIVERY FROM THE STORE',
      deliveryStore: 'Delivery Store'
    }
  }}
/>;

Custom UI Usage

Here's an example of how to customize the component with branded styling:

const customRenderer = {
  // Override the container
  renderContainer: ({ children, isActive, handleActive }) => (
    <div
      role={!isActive ? 'button' : 'div'}
      onClick={() => {
        !isActive && handleActive();
      }}
      className={`
          relative w-full min-h-[8rem] rounded-lg 
          ${
            isActive
              ? 'border-2 border-brand-primary bg-brand-primary/5'
              : 'border border-gray-300 hover:border-brand-primary'
          }
          p-6 transition-all duration-300
        `}
    >
      {children}
    </div>
  ),

  // Override the inactive state display
  renderInactiveState: ({ translations }) => (
    <div className="text-sm flex flex-col justify-center items-center h-full gap-y-3 text-brand-primary">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="36"
        height="36"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      >
        <path d="M3 9h18v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9Z" />
        <path d="M3 9V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v4" />
        <path d="M9 13v5" />
        <path d="M15 13v5" />
      </svg>
      <span className="font-medium tracking-wide">
        {translations.deliveryFromTheStore}
      </span>
    </div>
  )

  // Custom styling for other parts...
};

<PluginModule
  component={Component.ClickCollect}
  props={{
    addressTypeParam: 'shippingAddressPk',
    translations: {
      deliveryFromTheStore: 'Pick Up In-Store',
      deliveryStore: 'Choose a Store'
    },
    renderer: customRenderer
  }}
/>;

Partial Customization

You can override only specific parts of the UI while keeping the default styling for the rest:

<PluginModule
  component={Component.ClickCollect}
  props={{
    addressTypeParam: "shippingAddressPk",
    translations: {
      deliveryFromTheStore: 'Pick Up In-Store',
      deliveryStore: 'Choose a Store'
    },
    renderer={{
      // Override only the active state
      renderActiveState: ({
        translations,
        cities,
        stores,
        handleCityChange,
        handleStoreChange
      }) => (
        <div className="custom-active-state">
          {/* Your custom UI for the active state */}
        </div>
      )
    }}
  }}
/>