@akinon/pz-b2b 1.18.0

package/src/views/product/store-modal.tsx

@@ -0,0 +1,170 @@
+'use client';
+
+import { useAddToBasketMutation } from '@akinon/next/data/client/b2b';
+import { useLocalization } from '@akinon/next/hooks';
+import { Division } from '@akinon/next/types';
+import React, { useMemo, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+interface GetResponse<T> {
+  count: number;
+  next: null;
+  previous: null;
+  results: T[];
+}
+
+export function StoreModal({
+  storeData,
+  productPk,
+  open,
+  setOpen
+}: {
+  storeData: GetResponse<Division>;
+  productPk: number;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}) {
+  const initialStateSelectStore = {
+    id: null,
+    quantity: '0'
+  };
+
+  const { t } = useLocalization();
+  const [addToBasket] = useAddToBasketMutation();
+  const [selectedStore, setSelectedStore] = useState(initialStateSelectStore);
+  const inputRefs = {};
+
+  const handleRadioChange = (storeId) => {
+    setSelectedStore((prevSelectedStore) => ({
+      ...prevSelectedStore,
+      id: storeId
+    }));
+
+    clearQuantityInput(storeId);
+  };
+
+  const handleQuantityChange = (storeId, e) => {
+    if (storeId !== selectedStore.id) {
+      return;
+    }
+
+    setSelectedStore((prevSelectedStore) => ({
+      ...prevSelectedStore,
+      quantity: e.target.value
+    }));
+  };
+
+  const handleAddToBasket = () => {
+    addToBasket({
+      division: selectedStore.id,
+      product_remote_id: productPk.toString(),
+      quantity: selectedStore.quantity
+    })
+      .unwrap()
+      .then(() => {
+        setOpen(false);
+        setSelectedStore(initialStateSelectStore);
+      });
+  };
+
+  const clearQuantityInput = (storeId) => {
+    inputRefs[storeId]?.focus();
+    inputRefs[storeId].value = '';
+
+    setSelectedStore((prevSelectedStore) => ({
+      ...prevSelectedStore,
+      quantity: '0'
+    }));
+  };
+
+  const isButtonDisabled = useMemo(() => {
+    if (selectedStore.quantity === '') {
+      return true;
+    }
+
+    return !selectedStore.id || parseInt(selectedStore.quantity) < 1;
+  }, [selectedStore]);
+
+  if (!open) return null;
+
+  return (
+    <div className="before:w-full before:h-screen before:content-[''] before:bg-black/60 before:z-40 before:fixed before:inset-0">
+      <div className="w-full h-screen inset-0 md:inset-auto md:w-[600px] md:h-min md:left-1/2 md:top-1/2 md:-translate-x-1/2 md:-translate-y-1/2 z-50 fixed bg-white">
+        <header className="relative md:border-b border-[#d5dadb]">
+          <h3 className="text-left px-4 md:text-center py-4 font-bold text-lg">
+            {t('product.store_select_modal.title')}
+          </h3>
+          <button
+            className="absolute right-[15px] md:right-[30px] top-5"
+            onClick={() => {
+              setOpen(false);
+              setSelectedStore(initialStateSelectStore);
+            }}
+          >
+            <i className="pz-icon-close"></i>
+          </button>
+        </header>
+        <div className="p-[15px] md:p-[30px]">
+          <table className="w-full flex flex-col h-full md:h-auto md:table md:w-[540px]">
+            <thead className="w-full flex-grow-0 shrink-0 basis-auto table">
+              <tr className="border border-[#d7d7d7] bg-[#fafafa]">
+                <th className="w-[43px] border-r border-[#d7d7d7]"></th>
+                <th className="w-[190px] md:w-auto text-[11px] text-[#99999d] py-[18px] px-4 border-r border-[#d7d7d7] text-left font-normal">
+                  {t('product.store_select_modal.store_name')}
+                </th>
+                <th className="max-w-[111px] w-[111px] md:w-[180px] md:max-w-[180px] text-[11px] text-[#99999d] py-[18px] text-right pr-6 md:pr-[37px] font-normal">
+                  {t('product.store_select_modal.quantity')}
+                </th>
+              </tr>
+            </thead>
+            <tbody className="flex-1 basis-auto block overflow-y-auto h-[calc(100vh-206px)] md:h-auto md:max-h-[488px]">
+              {storeData?.results.map((store) => (
+                <tr
+                  key={store.id}
+                  className="w-full table table-fixed h-[61px] even:bg-[#fafafa] border border-t-0 border-[#d7d7d7]"
+                >
+                  <td className="w-[43px] border-r border-[#d7d7d7] text-center">
+                    <input
+                      type="radio"
+                      value={store.id}
+                      name="division"
+                      className="w-[18px] h-[18px] accent-black"
+                      id={store.erp_code}
+                      onChange={() => handleRadioChange(store.id)}
+                    />
+                  </td>
+                  <td className="border-r border-[#d7d7d7] text-xs px-4 py-6 leading-3 w-[190px] md:w-auto">
+                    <label htmlFor={store.erp_code}>{store.name}</label>
+                  </td>
+                  <td className="text-right pr-6 md:pr-[37px] max-w-[111px] w-[111px] md:w-[180px] md:max-w-[180px]">
+                    <input
+                      type="number"
+                      className="w-[64px] md:w-[84px] h-[31px] border border-[#d7d7d7] outline-none text-xs text-right pr-1 appearance-none"
+                      onChange={(e) => handleQuantityChange(store.id, e)}
+                      ref={(ref) => (inputRefs[store.id] = ref)}
+                    />
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+
+          <div className="fixed bottom-0 left-0 w-full p-[15px] md:p-0 md:static mt-5 shadow-[0_0_4px_0_rgba(0,0,0,0.2)] md:shadow-none">
+            <p hidden>{t('product.store_select_modal.valid_quantity')}</p>
+
+            <button
+              className={twMerge(
+                'text-xs text-white bg-black py-3 px-14 w-full md:w-auto',
+                isButtonDisabled && 'bg-black/40'
+              )}
+              onClick={handleAddToBasket}
+              disabled={isButtonDisabled}
+            >
+              {t('product.store_select_modal.add_to_basket')}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}