Click&Collect

pz-click-collect is a component that enables customers to choose retail store pickup instead of standard shipping. It integrates directly into the checkout flow and supports flexible UI customization.

Features:

• Toggle between delivery to address and retail store pickup

• City and store selection

• Fully customizable UI through renderer props

Installation Method

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

npx @akinon/projectzero@latest --plugins

Props

ClickCollectProps

Prop	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

Parameter	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.

ClickCollectRendererProps

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 PluginModule, { Component } from '@akinon/next/components/plugin-module';

<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 = {
   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>
   ),
   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>
 )};

<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>
     )
   }}
 }}
/>