@akinon/pz-click-collect 1.99.0 → 1.100.0-rc.72

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @akinon/pz-click-collect
 
+## 1.100.0-rc.72
+
+## 1.100.0-rc.71
+
+### Minor Changes
+
+- d8be48fb: ZERO-3422: Update fetch method to use dynamic request method in wallet complete redirection middleware
+- 16aff543: ZERO-3431: Add test script for redirect utility in package.json
+- 64699d3ff: ZERO-2761: Fix invalid import for plugin module
+- e974d8e8: ZERO-3406: Fix rc build
+- 7eb51ca9: ZERO-3424 :Update package versions
+- 7727ae55: ZERO-3073: Refactor basket page to use server-side data fetching and simplify component structure
+- 8b1d24eb: ZERO-3422: Update fetch method to use dynamic request method in wallet complete redirection middleware
+- 33377cfd: ZERO-3267: Refactor import statement for ROUTES in error-page component
+- b16a3700: ZERO-3403: Enhance README.md with detailed Click & Collect component documentation and usage examples
+
 ## 1.99.0
 
 ### Minor Changes

package/README.md

@@ -10,93 +10,105 @@ npx @akinon/projectzero@latest --plugins
 
 ```
 
-### Props
-
-| Properties       | Type     | Description                |
-| ---------------- | -------- | -------------------------- |
-| addressTypeParam | `string` | Address Type Request Param |
-
 # Click & Collect Component
 
-The Click & Collect component allows customers to select retail stores for pickup instead of delivery to a shipping address.
+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
+### Features
 
 - Toggle between delivery to address and retail store pickup
 - City and store selection
 - Fully customizable UI through renderer props
 
-## Basic Usage
+## Props
 
-```jsx
-import { ClickCollect } from '@akinon/pz-click-collect';
+### ClickCollectProps
 
-// Basic usage with default styling
-<ClickCollect
-  addressTypeParam="shippingAddressPk"
-  translations={{
-    deliveryFromTheStore: 'DELIVERY FROM THE STORE',
-    deliveryStore: 'Delivery Store'
-  }}
-/>;
-```
+| 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
+### 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
+#### Renderer Props
 
 The `renderer` prop accepts an object with the following properties:
 
-```typescript
+```javascript
 interface ClickCollectRendererProps {
   renderContainer?: (props: {
-    children: React.ReactNode;
-    isActive: boolean;
-    handleActive: () => void;
-    handleDeactivate: () => void;
+    children: React.ReactNode,
+    isActive: boolean,
+    handleActive: () => void,
+    handleDeactivate: () => void
   }) => React.ReactNode;
 
   renderInactiveState?: (props: {
-    translations: ClickCollectTranslationsProps;
+    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;
+    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;
+    handleDeactivate: () => void
   }) => React.ReactNode;
 
   renderLoader?: () => React.ReactNode;
 }
 ```
 
-### Example with Custom Styling
+### Usage Examples
 
-Here's an example of how to customize the component with branded styling:
+#### Default Usage
 
-```jsx
+```javascript
 import { ClickCollect } from '@akinon/pz-click-collect';
 
-const CustomClickCollect = () => {
-  const customRenderer = {
-    // Override the container
-    renderContainer: ({ children, isActive, handleActive }) => (
-      <div
-        role={!isActive ? 'button' : 'div'}
-        onClick={() => {
-          !isActive && handleActive();
-        }}
-        className={`
+<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
@@ -105,94 +117,79 @@ const CustomClickCollect = () => {
           }
           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"
       >
-        {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...
-  };
-
-  return (
-    <ClickCollect
-      addressTypeParam="shippingAddressPk"
-      translations={{
-        deliveryFromTheStore: 'In-Store Pickup',
-        deliveryStore: 'Select Your Store'
-      }}
-      renderer={customRenderer}
-    />
-  );
+        <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...
 };
-```
 
-### Partial Customization
-
-You can override only specific parts of the UI while keeping the default styling for the rest:
-
-```jsx
-<ClickCollect
-  addressTypeParam="shippingAddressPk"
-  translations={{
-    deliveryFromTheStore: 'DELIVERY FROM THE STORE',
-    deliveryStore: 'Delivery 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>
-    )
+<PluginModule
+  component={Component.ClickCollect}
+  props={{
+    addressTypeParam: 'shippingAddressPk',
+    translations: {
+      deliveryFromTheStore: 'Pick Up In-Store',
+      deliveryStore: 'Choose a Store'
+    },
+    renderer: customRenderer
   }}
-/>
+/>;
 ```
 
-## Translation Support
+#### Partial Customization
 
-The component accepts a `translations` prop for localization:
+You can override only specific parts of the UI while keeping the default styling for the rest:
 
-```jsx
-<ClickCollect
-  addressTypeParam="shippingAddressPk"
-  translations={{
-    deliveryFromTheStore: 'Mağazadan Teslim Al', // Turkish translation
-    deliveryStore: 'Teslim Alınacak Mağaza' // Turkish translation
+```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>
+      )
+    }}
   }}
 />
 ```
-
-```
-
-```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/pz-click-collect",
-  "version": "1.99.0",
+  "version": "1.100.0-rc.72",
   "main": "./src/index.tsx",
   "module": "./src/index.tsx",
   "license": "MIT",