# 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

## <mark style="color:red;">**Installation Method**</mark>

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

```bash
npx @akinon/projectzero@latest --plugins
```

### <mark style="color:red;">**Props**</mark>

#### **ClickCollectProps**

<table><thead><tr><th width="166.2578125">Prop</th><th width="181.46484375">Type</th><th width="95.7421875">Required</th><th>Description</th></tr></thead><tbody><tr><td>addressTypeParam</td><td>string</td><td>Yes</td><td>Address Type Request Param</td></tr><tr><td>translations</td><td>ClickCollectTranslationsProps</td><td>Yes</td><td>Object containing localized strings.</td></tr><tr><td>renderer</td><td>ClickCollectRendererProps</td><td>No</td><td>Optional UI overrides for component sections.</td></tr></tbody></table>

#### **ClickCollectTranslationsProps**

<table><thead><tr><th width="193.58984375">Parameter</th><th width="110.9140625">Type</th><th>Description</th></tr></thead><tbody><tr><td>deliveryFromTheStore</td><td>string</td><td>Text for the inactive state label.</td></tr><tr><td>deliveryStore</td><td>string</td><td>Label text for selecting a store during the active state.</td></tr></tbody></table>

#### **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:

```javascript
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**

```javascript
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:

```javascript
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:

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