# @akinon/pz-click-collect

## Installation method

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

```bash

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:

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

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

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