@akinon/pz-b2b 1.62.0 → 1.63.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @akinon/pz-b2b
 
+## 1.63.0
+
+### Minor Changes
+
+- c45b62c: ZERO-2818: Add upload and download support for b2b package
+
 ## 1.62.0
 
 ## 1.61.0

package/README.md

@@ -102,6 +102,15 @@ Add the translation inside the basket object. Apply this for every language
       "add_to_favorites_button": "ADD TO FAVORITES",
       "delete_product_button": "delete product"
     },
+    "upload_file_modal": {
+      "select_file": "Select File",
+      "upload": "Upload",
+      "no_file_selected": "No file selected",
+      "error": {
+        "upload_failed": "An error occurred while uploading the file",
+        "no_file_selected": "Please select a file before uploading."
+      }
+    },
     "empty": {
       "title": "Your cart is empty, would you like to continue with your saved carts?",
       "button": "SELECT CART",
@@ -141,6 +150,15 @@ Add the translation inside the basket object. Apply this for every language
       "add_to_favorites_button": "FAVORİLERE EKLE",
       "delete_product_button": "ürünü sil"
     },
+    "upload_file_modal": {
+      "select_file": "Dosya Seç",
+      "upload": "Yükle",
+      "no_file_selected": "Dosya seçilmedi",
+      "error": {
+        "upload_failed": "Dosya yüklenirken bir hata oluştu",
+        "no_file_selected": "Lütfen yüklemeden önce bir dosya seçin"
+      }
+    },
     "empty": {
       "title": "Sepetiniz boş, kaydettiğiniz sepetlerle devam etmek ister misiniz?",
       "button": "SEPETİ SEÇ",
@@ -189,7 +207,7 @@ rewrites: [
 Add plugin name
 
 ```javascript
-module.exports = ["...", "pz-b2b"];
+module.exports = ['...', 'pz-b2b'];
 ```
 
 ##### File Path: src/views/product/product-info.tsx
@@ -197,7 +215,7 @@ module.exports = ["...", "pz-b2b"];
 Add imports
 
 ```javascript
-import { useB2b, StoreModal } from "@akinon/pz-b2b";
+import { useB2b, StoreModal } from '@akinon/pz-b2b';
 ```
 
 Add useB2b hook
@@ -208,14 +226,14 @@ const {
   setOpenSelectStoreModal,
   divisions,
   divisionLoading,
-  B2bButton,
+  B2bButton
 } = useB2b();
 ```
 
 Add open modal button
 
 ```javascript
-<B2bButton buttonText={t("product.add_to_cart")} />
+<B2bButton buttonText={t('product.add_to_cart')} />
 ```
 
 Add the end in the return
@@ -229,6 +247,6 @@ Add the end in the return
       open={openSelectStoreModal}
       setOpen={setOpenSelectStoreModal}
     />
-  )
+  );
 }
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/pz-b2b",
-  "version": "1.62.0",
+  "version": "1.63.0",
   "license": "MIT",
   "main": "src/index.ts",
   "peerDependencies": {

package/src/basket-b2b/index.tsx

@@ -7,18 +7,22 @@ import {
   Trans,
   Price,
   Icon,
-  Link
+  Link,
+  Button
 } from '@akinon/next/components';
 import {
   useGetBasketB2bQuery,
   useGetDraftsQuery,
-  useLoadBasketMutation
+  useLoadBasketMutation,
+  useGetBasketStatusMutation,
+  useExportBasketMutation
 } from '@akinon/next/data/client/b2b';
 import {
   BasketItem,
   RequestQuoteModal,
   RemoveProductModal,
-  SaveCartModal
+  SaveCartModal,
+  UploadModal
 } from '../views/basket-b2b';
 
 interface BasketB2bTranslationsProps {
@@ -66,11 +70,14 @@ interface BasketB2bProps {
 
 export function BasketB2b({ translations }: BasketB2bProps) {
   const { data: basket, isLoading, isSuccess } = useGetBasketB2bQuery();
+  const [getBasketStatus] = useGetBasketStatusMutation();
+  const [exportBasket] = useExportBasketMutation();
   const [loadBasket] = useLoadBasketMutation();
   const { data: dataDraft } = useGetDraftsQuery();
   const [open, setOpen] = useState(false);
   const [openRequestQuote, setRequestQuote] = useState(false);
   const [openRemoveProduct, setRemoveProduct] = useState(false);
+  const [openUploadBasket, setUploadBasket] = useState(false);
   const [productToBeDeleted, setProductToBeDeleted] = useState(null);
   const [selectedDraft, setSelectedDraft] = useState(null);
 
@@ -129,6 +136,42 @@ export function BasketB2b({ translations }: BasketB2bProps) {
 
     loadBasket(selectedDraft);
   };
+  const handleDownload = async () => {
+    const fieldsArray = [
+      'product__sku',
+      'quantity',
+      'division__erp_code',
+      'division__name',
+      'price',
+      'variants__Renk'
+    ];
+
+    const queryString = new URLSearchParams(
+      fieldsArray.map((queryName) => ['_fields', queryName])
+    ).toString();
+
+    try {
+      const data = await exportBasket(queryString).unwrap();
+      await handleDownloadStatus(data.cache_key);
+    } catch (error) {
+      console.error('Error during download process:', error);
+    }
+  };
+
+  const handleDownloadStatus = async (cacheKey) => {
+    try {
+      const data = await getBasketStatus(cacheKey).unwrap();
+      if (data.status === 'completed') {
+        window.location.href = data.url;
+      } else if (data.status === 'waiting') {
+        setTimeout(() => handleDownloadStatus(cacheKey), 2000);
+      } else {
+        console.warn(`Unhandled status: ${data.status}`);
+      }
+    } catch (error) {
+      console.error('Error fetching basket data:', error);
+    }
+  };
 
   useEffect(() => {
     if (isSuccess) {
@@ -156,19 +199,36 @@ export function BasketB2b({ translations }: BasketB2bProps) {
                   <h2 className="text-xl lg:text-2xl font-light">
                     {_translations.my_cart}
                   </h2>
-
                   <Link href="/" className="text-xs hover:text-secondary-500">
                     {_translations.back_to_shopping}
                   </Link>
                 </div>
 
-                <div className="px-5 py-4 border border-b-0 border-gray-200 text-xs text-[#363636]">
-                  <Trans
-                    i18nKey={_translations.table.basket_qty}
-                    components={{
-                      Qty: <span>{basket.total_quantity}</span>
-                    }}
-                  />
+                <div className="flex justify-between items-center px-5 py-4 border border-b-0 border-gray-200">
+                  <div className=" text-xs text-[#363636]">
+                    <Trans
+                      i18nKey={_translations.table.basket_qty}
+                      components={{
+                        Qty: <span>{basket.total_quantity}</span>
+                      }}
+                    />
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Button
+                      className="flex flex-col items-center justify-center"
+                      onClick={() => setUploadBasket(true)}
+                    >
+                      <span>XLS</span>
+                      <Icon name="chevron-up" size={12} />
+                    </Button>
+                    <Button
+                      className="flex flex-col items-center justify-center"
+                      onClick={handleDownload}
+                    >
+                      <span>XLS</span>
+                      <Icon name="chevron-down" size={12} />
+                    </Button>
+                  </div>
                 </div>
 
                 <div className="w-full overflow-x-auto">
@@ -322,6 +382,12 @@ export function BasketB2b({ translations }: BasketB2bProps) {
             _translations.remove_product_modal.delete_product_button
           }
         />
+
+        <UploadModal
+          setOpen={setUploadBasket}
+          open={openUploadBasket}
+          modalTitle="File Upload"
+        />
       </div>
     </>
   );

package/src/views/basket-b2b/index.ts

@@ -2,3 +2,4 @@ export * from './basket-item';
 export * from './remove-product-modal';
 export * from './request-quote-modal';
 export * from './save-cart-modal';
+export * from './upload-modal';

package/src/views/basket-b2b/upload-modal.tsx

@@ -0,0 +1,106 @@
+'use client';
+
+import { useUploadFileMutation } from '@akinon/next/data/client/b2b';
+import React, { useState } from 'react';
+import { Button } from '@akinon/next/components';
+import { useLocalization } from '@akinon/next/hooks';
+
+export const UploadModal = ({
+  open,
+  setOpen,
+  modalTitle
+}: {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  modalTitle: string;
+}) => {
+  const { t } = useLocalization();
+  const [file, setFile] = useState<File | null>(null);
+  const [uploadFile, { isLoading }] = useUploadFileMutation();
+  const [error, setError] = useState<string | null>(null);
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFile(e.target.files?.[0] || null);
+    setError(null);
+  };
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    if (!file) {
+      setError(t('basket.b2b.upload_file_modal.error.no_file_selected'));
+      return;
+    }
+
+    const formData = new FormData();
+    formData.append('filename', file);
+
+    try {
+      await uploadFile(formData).unwrap();
+      setOpen(false);
+      setFile(null);
+      setError(null);
+    } catch (uploadError) {
+      setError(t('basket.b2b.upload_file_modal.error.upload_failed'));
+    }
+  };
+
+  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-11/12 max-w-[344px] md:w-[370px] left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-50 fixed bg-white">
+        <header className="relative border-b border-[#d5dadb]">
+          <h3 className="text-left px-[30px] py-4 font-medium text-lg">
+            {modalTitle}
+          </h3>
+          <button
+            className="absolute right-[30px] top-5"
+            onClick={() => setOpen(false)}
+          >
+            <i className="pz-icon-close"></i>
+          </button>
+        </header>
+        <div className="p-[30px]">
+          <form onSubmit={handleSubmit}>
+            <div className="relative flex flex-col justify-center items-center mb-4">
+              <input
+                type="file"
+                accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
+                onChange={handleFileChange}
+                className="opacity-0 w-full absolute left-0 top-0 h-full text-[0px] cursor-pointer"
+              />
+              <Button className="pointer-events-none h-9 text-white border rounded mb-1">
+                {t('basket.b2b.upload_file_modal.select_file')}
+              </Button>
+
+              <p className="text-xs text-[#3e3e3e]">
+                {file
+                  ? file.name
+                  : t('basket.b2b.upload_file_modal.no_file_selected')}
+              </p>
+            </div>
+
+            {error && (
+              <p className="text-xs text-center text-error mb-4">{error}</p>
+            )}
+
+            <Button
+              type="submit"
+              className="h-8 bg-black text-white font-medium text-sm w-full"
+              disabled={isLoading}
+            >
+              {isLoading ? (
+                <div className="w-full h-full flex justify-center items-center">
+                  <div className="w-4 h-4 border-2 border-gray-600 border-t-transparent rounded-full animate-spin" />
+                </div>
+              ) : (
+                t('basket.b2b.upload_file_modal.upload')
+              )}
+            </Button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};