@akinon/pz-click-collect 1.95.0-rc.54 → 1.95.0

package/CHANGELOG.md

@@ -1,18 +1,6 @@
 # @akinon/pz-click-collect
 
-## 1.95.0-rc.54
-
-### 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.95.0
 
 ## 1.94.0
 

package/README.md

@@ -10,105 +10,93 @@ npx @akinon/projectzero@latest --plugins
 
 ```
 
+### Props
+
+| Properties       | Type     | Description                |
+| ---------------- | -------- | -------------------------- |
+| addressTypeParam | `string` | Address Type Request Param |
+
 # 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.
+The Click & Collect component allows customers to select retail stores for pickup instead of delivery to a shipping address.
 
-### Features
+## 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. |
+## Basic Usage
 
-### ClickCollectTranslationsProps
+```jsx
+import { ClickCollect } from '@akinon/pz-click-collect';
 
-| Properties | Type | Description |
-| --- | --- | --- |
-| deliveryFromTheStore | `string` | Text for the inactive state label. |
-| deliveryStore | `string` | Label text for selecting a store during the active state. |
+// Basic usage with default styling
+<ClickCollect
+  addressTypeParam="shippingAddressPk"
+  translations={{
+    deliveryFromTheStore: 'DELIVERY FROM THE STORE',
+    deliveryStore: 'Delivery Store'
+  }}
+/>;
+```
 
-### 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:
 
-```javascript
+```typescript
 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;
 }
 ```
 
-### Usage Examples
+### Example with Custom Styling
 
-#### Default Usage
+Here's an example of how to customize the component with branded styling:
 
-```javascript
+```jsx
 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={`
+const CustomClickCollect = () => {
+  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
@@ -117,79 +105,94 @@ const customRenderer = {
           }
           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...
+        {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}
+    />
+  );
 };
+```
 
-<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:
+
+```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>
+    )
+  }}
+/>
 ```
 
-#### Partial Customization
+## Translation Support
 
-You can override only specific parts of the UI while keeping the default styling for the rest:
+The component accepts a `translations` prop for localization:
 
-```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>
-      )
-    }}
+```jsx
+<ClickCollect
+  addressTypeParam="shippingAddressPk"
+  translations={{
+    deliveryFromTheStore: 'Mağazadan Teslim Al', // Turkish translation
+    deliveryStore: 'Teslim Alınacak Mağaza' // Turkish translation
   }}
 />
 ```
+
+```
+
+```

package/package.json

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