@akinon/pz-click-collect 1.0.0

package/.gitattributes

@@ -0,0 +1,15 @@
+*.js    text eol=lf
+*.jsx   text eol=lf
+*.ts    text eol=lf
+*.tsx   text eol=lf
+*.json  text eol=lf
+*.md    text eol=lf
+
+.eslintignore text eol=lf
+.eslintrc text eol=lf
+.gitignore text eol=lf
+.prettierrc text eol=lf
+.yarnrc text eol=lf
+
+* text=auto
+

package/.prettierrc

@@ -0,0 +1,13 @@
+{
+  "bracketSameLine": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "jsxSingleQuote": false,
+  "bracketSpacing": true,
+  "semi": true,
+  "useTabs": false,
+  "arrowParens": "always",
+  "endOfLine": "lf",
+  "proseWrap": "never",
+  "trailingComma": "none"
+}

package/README.md

@@ -0,0 +1,35 @@
+# pz-click-collect
+
+### Install the npm package
+
+```bash
+# For latest version
+yarn add ​git+ssh://git@bitbucket.org:akinonteam/pz-click-collect.git
+
+# For specific version
+yarn add ​git+ssh://git@bitbucket.org:akinonteam/pz-click-collect.git#COMMIT_HASH
+```
+
+### Next Config Configuration
+
+##### next.config.js**
+
+```javascript
+const withTM = require("next-transpile-modules")(["pz-click-collect"]);
+```
+
+### Example Usage
+##### File Path: src/views/checkout/steps/shipping/addresses.tsx
+
+
+```javascript
+import ClickCollect from 'pz-click-collect';
+
+<ClickCollect addressTypeParam={addressType.requestParam}/>
+```
+
+### Props
+
+| Properties | Type     | Description          |
+| ---------- | -------- | -------------------- |
+| addressTypeParam | `string` | Address Type Request Param |

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@akinon/pz-click-collect",
+  "version": "1.0.0",
+  "main": "./src/index.tsx",
+  "module": "./src/index.tsx",
+  "license": "MIT",
+  "devDependencies": {
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^4.7.4"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
+  }
+}

package/src/index.tsx

@@ -0,0 +1,312 @@
+import React, {
+  useEffect,
+  useState,
+  useMemo,
+  useCallback,
+  useRef,
+  ChangeEvent
+} from 'react';
+import clsx from 'clsx';
+import { Icon, LoaderSpinner } from '@akinon/next/components';
+import { useAppSelector } from '@akinon/next/redux/hooks';
+import {
+  useSetDeliveryOptionMutation,
+  useSetRetailStoreMutation,
+  useSetShippingOptionMutation,
+  useSetAddressesMutation
+} from '@akinon/next/data/client/checkout';
+
+import { RootState } from 'redux/store';
+
+interface ClickCollectTranslationsProps {
+  deliveryFromTheStore: string;
+  deliveryStore: string;
+}
+
+const defaultTranslations = {
+  deliveryFromTheStore: 'DELIVERY FROM THE STORE',
+  deliveryStore: 'Delivery Store'
+};
+
+export function ClickCollect({
+  addressTypeParam,
+  translations
+}: {
+  addressTypeParam: string;
+  translations: ClickCollectTranslationsProps;
+}) {
+  const _translations = {
+    ...defaultTranslations,
+    ...translations
+  };
+
+  const [loading, setLoading] = useState(false);
+
+  const { deliveryOptions, retailStores } = useAppSelector(
+    (state: RootState) => state.checkout
+  );
+
+  const { billing_address, shipping_address, retail_store, delivery_option } =
+    useAppSelector((state: RootState) => state.checkout.preOrder) ?? {};
+
+  const cityPkRef = useRef(null);
+
+  const retailStore = useMemo(
+    () =>
+      deliveryOptions?.find(
+        (value) => value?.delivery_option_type === 'retail_store'
+      ),
+    [deliveryOptions]
+  );
+  const [stores, setStores] = useState([]);
+
+  const [setDeliveryOption, { isLoading: deliveryLoading }] =
+    useSetDeliveryOptionMutation();
+
+  const [setRetailStore, { isLoading: retailLoading }] =
+    useSetRetailStoreMutation();
+
+  const [setShippingOption, { isLoading: shippingLoading }] =
+    useSetShippingOptionMutation();
+
+  const [setAddresses, { isLoading: addressLoading }] =
+    useSetAddressesMutation();
+
+  const [selectedCity, setSelectedCity] = useState(null);
+
+  const [selectedStore, setSelectedStore] = useState(null);
+
+  const [isActive, setIsActive] = useState(false);
+
+  const [retailStoresForCity, setRetailStoresForCity] = useState([]);
+
+  const defaultDeliveryOption = useMemo(
+    () =>
+      deliveryOptions.find(
+        (option) => option?.delivery_option_type === 'customer'
+      ),
+    [deliveryOptions]
+  );
+
+  const retailStoreDeliveryOption = useMemo(
+    () =>
+      deliveryOptions.find(
+        (option) => option?.delivery_option_type === 'retail_store'
+      ),
+    [deliveryOptions]
+  );
+
+  const postRetailStore = async ({ retailStorePk, billingAddressPk }) => {
+    await setRetailStore({
+      retailStorePk: retailStorePk,
+      billingAddressPk: billingAddressPk
+    });
+  };
+
+  const handleDeactivate = useCallback(async () => {
+    try {
+      await setDeliveryOption(defaultDeliveryOption?.pk);
+
+      await setAddresses({
+        shippingAddressPk: shipping_address?.pk,
+        billingAddressPk: billing_address?.pk
+      });
+    } catch (error) {
+      console.error('Error updating details:', error);
+    }
+  }, [setDeliveryOption, setAddresses]);
+
+  const handleActive = useCallback(async () => {
+    if (retailStore) {
+      await setShippingOption(retailStore.pk).unwrap();
+    }
+
+    const response = await setDeliveryOption(
+      retailStoreDeliveryOption.pk
+    ).unwrap();
+    const retailStores = response?.context_list?.find(
+      (context) => context.page_slug === 'retailstoreselectionpage'
+    );
+
+    setStores(retailStores?.page_context['retail_stores']);
+
+    postRetailStore({
+      retailStorePk: retail_store
+        ? retail_store.pk
+        : retailStores.page_context['retail_stores'][0]?.pk,
+      billingAddressPk: billing_address ? billing_address.pk : null
+    });
+  }, [
+    retailStore,
+    retailStoreDeliveryOption,
+    setStores,
+    postRetailStore,
+    setShippingOption,
+    setDeliveryOption,
+    retail_store,
+    billing_address
+  ]);
+
+  const handleCityChange = useCallback(
+    async (e: ChangeEvent<HTMLSelectElement>) => {
+      const cityPk = parseInt(e.target.value);
+      cityPkRef.current = cityPk;
+      const correspondingCity = retailStores.find(
+        (store) => store?.township?.city?.pk === cityPk
+      )?.township.city;
+      setSelectedCity(correspondingCity ? correspondingCity.name : null);
+      const storesInCity = retailStores.filter(
+        (store) => store?.township?.city?.pk === cityPk
+      );
+      setRetailStoresForCity(storesInCity);
+
+      if (storesInCity.length > 0) {
+        setSelectedStore(storesInCity[0].pk);
+        await postRetailStore({
+          retailStorePk: storesInCity[0].pk,
+          billingAddressPk: billing_address?.pk
+        });
+      }
+    },
+    [retailStores]
+  );
+
+  const handleStoreChange = useCallback(
+    (e: ChangeEvent<HTMLSelectElement>) => {
+      const storePk = parseInt(e.target.value);
+      setSelectedStore(storePk);
+      postRetailStore({
+        retailStorePk: storePk,
+        billingAddressPk: billing_address?.pk
+      });
+    },
+    [postRetailStore, billing_address?.pk]
+  );
+
+  const getUniqueCities = useMemo(() => {
+    const uniqueCities = [];
+
+    retailStores.forEach((store: any) => {
+      if (
+        !uniqueCities.some((city) => city?.pk === store?.township?.city?.pk)
+      ) {
+        uniqueCities.push(store?.township?.city);
+      }
+    });
+
+    return uniqueCities;
+  }, [retailStores]);
+
+  useEffect(() => {
+    setLoading(
+      [deliveryLoading, retailLoading, shippingLoading, addressLoading].some(
+        Boolean
+      )
+    );
+  }, [deliveryLoading, retailLoading, shippingLoading, addressLoading]);
+
+  useEffect(() => {
+    setIsActive(delivery_option?.pk === retailStoreDeliveryOption?.pk);
+  }, [delivery_option?.pk, retailStoreDeliveryOption]);
+
+  useEffect(() => {
+    if (retailStores.length > 0) {
+      const defaultCity = retailStores[0]?.township?.city;
+      const defaultStore = retailStores.find(
+        (store) => store.township.city.pk === defaultCity.pk
+      );
+
+      if (!selectedCity) {
+        setSelectedCity(defaultCity.pk);
+        cityPkRef.current = defaultCity.pk;
+      }
+
+      if (!selectedStore) {
+        setSelectedStore(defaultStore.pk);
+        postRetailStore({
+          retailStorePk: defaultStore.pk,
+          billingAddressPk: billing_address?.pk
+        });
+      }
+
+      if (cityPkRef.current) {
+        const storesInCity = retailStores.filter(
+          (store) => store.township.city.pk === cityPkRef.current
+        );
+        setRetailStoresForCity(storesInCity);
+      }
+    }
+  }, [retailStores, cityPkRef.current]);
+
+  if (addressTypeParam !== 'shippingAddressPk') return;
+
+  return (
+    <div
+      role={!isActive ? 'button' : 'div'}
+      onClick={() => {
+        !isActive && handleActive();
+      }}
+      className={clsx(
+        'relative w-full min-h-[8rem] border shadow p-4',
+        "hover:after:content-[''] hover:after:border-4 hover:after:opacity-30 hover:after:transition-opacity",
+        'after:border-secondary-400 after:absolute after:inset-0 after:opacity-0 after:duration-150 after:-z-10'
+      )}
+    >
+      <div className="text-xs flex justify-center items-center h-full gap-x-2">
+        {isActive && (
+          <div
+            role="button"
+            onClick={handleDeactivate}
+            className="absolute cursor-pointer top-2 right-2 hover:bg-byarlack-100/[.1] p-2 z-10 rounded-full "
+          >
+            <Icon name="close" size={9} />
+          </div>
+        )}
+        {loading && (
+          <div className="absolute top-0 left-0 w-full h-full bg-white/[.9] z-10">
+            <LoaderSpinner />
+          </div>
+        )}
+        {!isActive ? (
+          <div className="text-xs text-center flex justify-center items-center h-full gap-x-2">
+            <Icon name="plus" size={12} />
+            <span data-testid="click-collect-add-new-address">
+              {_translations.deliveryFromTheStore}
+            </span>
+          </div>
+        ) : (
+          <div className="relative w-full">
+            <label
+              htmlFor="cities"
+              className="block mb-2 text-sm text-center font-light text-black-900 "
+            >
+              {_translations.deliveryStore}
+            </label>
+            <select
+              id="cities"
+              className="bg-white border border-gray-300 font-light text-black-900 text-sm block w-full p-1 mb-2 focus:ring-black-500 focus:border-black-500"
+              onChange={handleCityChange}
+            >
+              {getUniqueCities.map((city) => (
+                <option key={city.pk} value={city.pk}>
+                  {city.name}
+                </option>
+              ))}
+            </select>
+            <select
+              id="stores"
+              onChange={handleStoreChange}
+              className="bg-white border border-gray-300 font-light text-black-900 text-sm block w-full p-1 mb-2 focus:ring-black-500 focus:border-black-500"
+            >
+              {retailStoresForCity.map((store) => (
+                <option key={store.pk} value={store.pk}>
+                  {store.name}
+                </option>
+              ))}
+            </select>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}