@akinon/pz-b2b 1.18.0

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @akinon/pz-b2b
+
+## 1.18.0
+
+### Minor Changes
+
+- db017b2c: ZERO-2377: Add B2B plugin

package/README.md

@@ -0,0 +1,234 @@
+# pz-b2b
+
+### Install the npm package
+
+```bash
+# For latest version
+yarn add git+ssh://git@bitbucket.org:akinonteam/pz-b2b.git
+
+# For specific version
+yarn add git+ssh://git@bitbucket.org:akinonteam/pz-b2b.git#xxxxxxx
+```
+
+### Installation
+
+##### File Path: src/routes/index.ts
+
+Add ACCOUNT_MY_QUOTATIONS route into ACCOUNT_ROUTES
+
+```javascript
+enum ACCOUNT_ROUTES {
+  ...,
+  ACCOUNT_MY_QUOTATIONS = '/users/my-quotations'
+}
+```
+
+##### File Path: src/views/account/account-menu.tsx
+
+Add my quotes link to account menu
+
+```javascript
+const ACCOUNT_MENU_ITEMS = [
+  ...,
+  {
+    translationKey: 'account.base.menu.my_quotations',
+    href: ROUTES.ACCOUNT_MY_QUOTATIONS,
+    testId: 'account-my-quotations'
+  }
+];
+```
+
+##### File Path: public/locales/en/account.json
+
+##### File Path: public/locales/tr/account.json
+
+Add translation to account.base.menu. Apply this for every language
+
+```json
+ "my_quotations": "My Quotations"
+ "my_quotations": "Tüm Tekliflerim"
+```
+
+##### File Path: public/locales/en/product.json
+
+##### File Path: public/locales/tr/product.json
+
+Add the translation inside the product object. Apply this for every language
+
+```json
+"store_select_modal": {
+  "title": "CHOOSE STORE",
+  "store_name": "STORE NAME",
+  "quantity": "QUANTITY",
+  "add_to_basket": "Add to Basket",
+  "valid_quantity": "Please select a store and enter a valid quantity"
+}
+
+"store_select_modal": {
+  "title": "MAĞAZA SEÇ",
+  "store_name": "MAĞAZA ADI",
+  "quantity": "ADET",
+  "add_to_basket": "SEPETE EKLE",
+  "valid_quantity": "Lütfen bir mağaza seçin ve geçerli bir miktar girin"
+}
+```
+
+##### File Path: public/locales/en/basket.json
+
+##### File Path: public/locales/tr/basket.json
+
+Add the translation inside the basket object. Apply this for every language
+
+```json
+"b2b": {
+    "my_cart": "My Cart",
+    "back_to_shopping": "BACK TO SHOPPING",
+    "save_cart": "SAVE CART",
+    "request_quote": "REQUEST A QUOTE",
+    "total_price": "Catalog Total Price (Excl. Tax)",
+    "save_cart_modal": {
+      "title": "SAVE CART",
+      "cart_name": "Cart Name",
+      "save_cart_button": "SAVE CART"
+    },
+    "request_quote_modal": {
+      "title": "REQUEST A QUOTE",
+      "quotation_name": "Quotation Name",
+      "button": "SAVE"
+    },
+    "remove_product_modal": {
+      "title": "DELETE AND ADD TO FAVORITES",
+      "description": "Would you like to add this product you want to delete to your favorites?",
+      "add_to_favorites_button": "ADD TO FAVORITES",
+      "delete_product_button": "delete product"
+    },
+    "empty": {
+      "title": "Your cart is empty, would you like to continue with your saved carts?",
+      "button": "SELECT CART",
+      "choose_cart_placeholder": "Chose a cart"
+    },
+    "table": {
+      "basket_qty": "<Qty /> Products",
+      "delete": "Delete",
+      "name_sku": "NAME & SKU",
+      "price": "PRICE",
+      "quantity": "QTY",
+      "store_name": "STORE NAME",
+      "store_qty": "STORE QTY",
+      "subtotal": "SUBTOTAL"
+    }
+  }
+
+"b2b": {
+    "my_cart": "Sepetim",
+    "back_to_shopping": "ALIŞVERİŞE GERİ DÖN",
+    "save_cart": "SEPETİ KAYDET",
+    "request_quote": "TEKLİF İSTE",
+    "total_price": "Katalog Toplam Fiyatı (Vergi Hariç)",
+    "save_cart_modal": {
+      "title": "SEPETİ KAYDET",
+      "cart_name": "Sepet Adı",
+      "save_cart_button": "SEPETİ KAYDET"
+    },
+    "request_quote_modal": {
+      "title": "TEKLİF İSTE",
+      "quotation_name": "Teklif Adı",
+      "button": "KAYDET"
+    },
+    "remove_product_modal": {
+      "title": "SİL VE FAVORİLERE EKLE",
+      "description": "Silmek istediğiniz bu ürünü favorilerinize eklemek ister misiniz?",
+      "add_to_favorites_button": "FAVORİLERE EKLE",
+      "delete_product_button": "ürünü sil"
+    },
+    "empty": {
+      "title": "Sepetiniz boş, kaydettiğiniz sepetlerle devam etmek ister misiniz?",
+      "button": "SEPETİ SEÇ",
+      "choose_cart_placeholder": "Bir sepet seçin"
+    },
+    "table": {
+      "basket_qty": "<Qty /> Ürün",
+      "delete": "Sil",
+      "name_sku": "AD & SKU",
+      "price": "FİYAT",
+      "quantity": "ADET",
+      "store_name": "MAĞAZA ADI",
+      "store_qty": "MAĞAZA ADEDİ",
+      "subtotal": "ARA TOPLAM"
+    }
+  }
+```
+
+##### File Path: src/settings.js
+
+Update destination path for basket route
+
+```javascript
+rewrites: [
+  {
+    source: ROUTES.BASKET,
+    destination: '/basket-b2b'
+  }
+],
+```
+
+Add rewrite url
+
+```javascript
+rewrites: [
+  ...,
+  {
+    source: ROUTES.ACCOUNT_MY_QUOTATIONS,
+    destination: '/account/my-quotations'
+  }
+],
+```
+
+##### File Path: src/plugins.js
+
+Add plugin name
+
+```javascript
+module.exports = ["...", "pz-b2b"];
+```
+
+##### File Path: src/views/product/product-info.tsx
+
+Add imports
+
+```javascript
+import { useB2b, StoreModal } from "@akinon/pz-b2b";
+```
+
+Add useB2b hook
+
+```javascript
+const {
+  openSelectStoreModal,
+  setOpenSelectStoreModal,
+  divisions,
+  divisionLoading,
+  B2bButton,
+} = useB2b();
+```
+
+Add open modal button
+
+```javascript
+<B2bButton buttonText={t("product.add_to_cart")} />
+```
+
+Add the end in the return
+
+```javascript
+{
+  !divisionLoading && (
+    <StoreModal
+      storeData={divisions}
+      productPk={data.product.pk}
+      open={openSelectStoreModal}
+      setOpen={setOpenSelectStoreModal}
+    />
+  )
+}
+```

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@akinon/pz-b2b",
+  "version": "1.18.0",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^18.7.8",
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^4.7.4"
+  }
+}

package/src/basket-b2b/index.tsx

@@ -0,0 +1,220 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { pushCartView } from "../utils/gtm";
+import {
+  LoaderSpinner,
+  Trans,
+  Price,
+  Icon,
+  Link,
+} from "@akinon/next/components";
+import { useLocalization } from "@akinon/next/hooks";
+import {
+  useGetBasketB2bQuery,
+  useGetDraftsQuery,
+  useLoadBasketMutation,
+} from "@akinon/next/data/client/b2b";
+import {
+  BasketItem,
+  RequestQuoteModal,
+  RemoveProductModal,
+  SaveCartModal,
+} from "../views/basket-b2b";
+
+export function BasketB2b() {
+  const { data: basket, isLoading, isSuccess } = useGetBasketB2bQuery();
+  const [loadBasket] = useLoadBasketMutation();
+  const { t } = useLocalization();
+  const { data: dataDraft } = useGetDraftsQuery();
+  const [open, setOpen] = useState(false);
+  const [openRequestQuote, setRequestQuote] = useState(false);
+  const [openRemoveProduct, setRemoveProduct] = useState(false);
+  const [productToBeDeleted, setProductToBeDeleted] = useState(null);
+  const [selectedDraft, setSelectedDraft] = useState(null);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    if (!selectedDraft) {
+      return;
+    }
+
+    loadBasket(selectedDraft);
+  };
+
+  useEffect(() => {
+    if (isSuccess) {
+      const products = basket?.basket_items.map((basketItem) => ({
+        ...basketItem.product,
+      }));
+      pushCartView(products);
+    }
+  }, [basket, isSuccess]);
+
+  return (
+    <>
+      <div className="max-w-screen-xl p-4 flex flex-col text-primary-800 lg:p-8 xl:flex-row xl:mx-auto">
+        {isLoading && (
+          <div className="flex justify-center w-full">
+            <LoaderSpinner />
+          </div>
+        )}
+
+        {isSuccess &&
+          (basket && basket.basket_items && basket.basket_items.length > 0 ? (
+            <div className="w-full">
+              <div className="w-full">
+                <div className="flex items-center justify-between py-2 lg:py-3">
+                  <h2 className="text-xl lg:text-2xl font-light">
+                    {t("basket.b2b.my_cart")}
+                  </h2>
+
+                  <Link href="/" className="text-xs hover:text-secondary-500">
+                    {t("basket.b2b.back_to_shopping")}
+                  </Link>
+                </div>
+
+                <div className="px-5 py-4 border border-b-0 border-gray-200 text-xs text-[#363636]">
+                  <Trans
+                    i18nKey="basket.b2b.table.basket_qty"
+                    components={{
+                      Qty: <span>{basket.total_quantity}</span>,
+                    }}
+                  />
+                </div>
+
+                <div className="w-full overflow-x-auto">
+                  <table className="border table-fixed overflow-scroll align-middle lg:w-full">
+                    <thead className="bg-[#eff1f8]">
+                      <tr>
+                        <th className="w-7 border border-[#d5dadb]"></th>
+                        <th className="text-xs text-[#99999d] font-normal border border-[#d5dadb] py-3">
+                          <div className="flex items-center justify-center">
+                            <Icon
+                              name="b2b-image"
+                              size={18}
+                              className="text-[#293245]"
+                            />
+                          </div>
+                        </th>
+                        <th className="text-xs text-[#99999d] font-normal border border-[#d5dadb] py-3">
+                          {t("basket.b2b.table.name_sku")}
+                        </th>
+                        <th className="text-xs text-[#99999d] font-normal border border-[#d5dadb] py-3">
+                          {t("basket.b2b.table.price")}
+                        </th>
+                        <th className="text-xs text-[#99999d] font-normal border border-[#d5dadb] py-3">
+                          {t("basket.b2b.table.quantity")}
+                        </th>
+                        <th className="text-xs text-[#99999d] font-normal border border-[#d5dadb] py-3">
+                          {t("basket.b2b.table.store_name")}
+                        </th>
+                        <th className="text-xs text-[#99999d] font-normal border border-[#d5dadb] py-3">
+                          <div className="flex items-center justify-between pl-5 pr-2.5">
+                            <span>{t("basket.b2b.table.store_qty")}</span>
+                            <Icon
+                              name="b2b-distribute"
+                              size={18}
+                              className="text-[#293245]"
+                            />
+                          </div>
+                        </th>
+                        <th className="text-xs text-[#99999d] font-normal border border-[#d5dadb] py-3">
+                          {t("basket.b2b.table.subtotal")}
+                        </th>
+                      </tr>
+                    </thead>
+
+                    <tbody className="[&>*:nth-child(even)]:bg-[#f4f5fb] [&>*:nth-child(odd)>*:nth-child(1)]:bg-[#c7cbd2] [&>*:nth-child(odd)>*:nth-child(1)]>div>button:border-[#c7cbd2] [&>*:nth-child(odd)>*:nth-child(1)]:text-[#747d8f] [&>*:nth-child(even)>*:nth-child(1)]:bg-[#747d8f] [&>*:nth-child(even)>*:nth-child(1)]:text-white">
+                      {basket.basket_items.map((basketItem, index) => (
+                        <BasketItem
+                          basketItem={basketItem}
+                          key={index}
+                          setRemoveProduct={setRemoveProduct}
+                          setProductToBeDeleted={setProductToBeDeleted}
+                        />
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+
+              <div className="flex justify-end">
+                <div className="w-full md:w-[426px]">
+                  <div className="w-full flex justify-between items-center text-sm text-[#3f4b5c] border border-[#d5dadb] py-6 px-4 mt-7 md:mt-0 md:px-5">
+                    <span>{t("basket.b2b.total_price")}</span>
+                    <Price value={basket.total_amount} />
+                  </div>
+
+                  <button
+                    onClick={() => setRequestQuote(true)}
+                    className="mt-4 lg:mt-5 w-full h-10 text-white bg-black border border-black text-sm hover:bg-white hover:text-black transition-colors"
+                  >
+                    {t("basket.b2b.request_quote")}
+                  </button>
+
+                  <button
+                    onClick={() => setOpen(true)}
+                    className="mt-4 lg:mt-2.5 w-full h-10 bg-white text-[#2189ff] border border-[#2189ff] text-sm hover:bg-[#2189ff] hover:text-white transition-colors"
+                  >
+                    {t("basket.b2b.save_cart")}
+                  </button>
+                </div>
+              </div>
+            </div>
+          ) : (
+            <div
+              className="flex flex-col items-center container max-w-screen-sm py-4 px-4 xs:py-6 xs:px-6 sm:py-8 sm:px-8 lg:max-w-screen-xl
+          shadow-[0_0_4px_0_rgba(194,194,194,0.5)]"
+            >
+              <div className="w-full text-sm text-black-800 text-center my-4 mb-2 sm:text-base">
+                <div className="relative mb-[60px]">
+                  <i className="pz-icon-cart-b2b text-[102px]"></i>
+                  <span className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+                    0
+                  </span>
+                </div>
+                <p className="text-xs">{t("basket.b2b.empty.title")}</p>
+              </div>
+
+              <form onSubmit={(e) => handleSubmit(e)}>
+                <div className="relative mt-5">
+                  <i className="pz-icon-chevron-down absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none"></i>
+                  <select
+                    onChange={(e) => setSelectedDraft(e.target.value)}
+                    className="w-[230px] h-[40px] mb-1 border border-[#d4d4d4] px-4 appearance-none text-sm outline-none cursor-pointer"
+                  >
+                    <option value="">
+                      {t("basket.b2b.empty.choose_cart_placeholder")}
+                    </option>
+                    {dataDraft &&
+                      dataDraft.map((draft) => (
+                        <option key={draft.id} value={draft.id}>
+                          {draft.name}
+                        </option>
+                      ))}
+                  </select>
+                </div>
+
+                <button
+                  type="submit"
+                  className="px-10 mt-2 w-full md:w-[230px] h-[40px] text-sm font-medium bg-black text-white cursor-pointer"
+                >
+                  {t("basket.empty.button")}
+                </button>
+              </form>
+            </div>
+          ))}
+
+        <SaveCartModal setOpen={setOpen} open={open} />
+        <RequestQuoteModal setOpen={setRequestQuote} open={openRequestQuote} />
+        <RemoveProductModal
+          setOpen={setRemoveProduct}
+          open={openRemoveProduct}
+          basketItem={productToBeDeleted}
+        />
+      </div>
+    </>
+  );
+}

package/src/hook/use-b2b.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import React, { useState, useEffect, useCallback } from 'react';
+import { useLazyGetDivisionsQuery } from '@akinon/next/data/client/b2b';
+import { Button } from '@akinon/next/components';
+import { twMerge } from 'tailwind-merge';
+
+export const useB2b = () => {
+  const [isVisible, setIsVisible] = useState<boolean>(false);
+  const [openSelectStoreModal, setOpenSelectStoreModal] = useState(false);
+  const [getDivisions, { data: divisions, isLoading: divisionLoading }] =
+    useLazyGetDivisionsQuery();
+
+  useEffect(() => {
+    if (!isVisible) {
+      setIsVisible(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!openSelectStoreModal) {
+      return;
+    }
+
+    getDivisions();
+  }, [openSelectStoreModal, getDivisions]);
+
+const B2bButton = useCallback(({buttonText}) => {
+    return isVisible ? (
+      <Button
+        className={twMerge(
+          'fixed bottom-0 right-0 w-1/2 h-14 z-[20] flex items-center justify-center fill-primary-foreground hover:fill-primary sm:relative sm:w-full sm:mt-3 sm:font-semibold',
+          divisionLoading && 'bg-black/50'
+        )}
+        onClick={() => setOpenSelectStoreModal(true)}
+      >
+        <span>{buttonText}</span>
+      </Button>
+    ) : null;
+}, [isVisible, divisionLoading]);
+
+  return {
+    openSelectStoreModal,
+    setOpenSelectStoreModal,
+    divisions,
+    divisionLoading,
+    B2bButton
+  };
+};
+

package/src/index.ts

@@ -0,0 +1,6 @@
+export * from './my-quotations';
+export * from './basket-b2b';
+export * from './views/my-quotations/tabs';
+export * from './views/basket-b2b';
+export * from './views/product/store-modal';
+export * from './hook/use-b2b';

package/src/my-quotations/index.tsx

@@ -0,0 +1,136 @@
+'use client';
+
+import { useGetQuotationsQuery } from '@akinon/next/data/client/account';
+import { Quotations } from '@akinon/next/types';
+import { LoaderSpinner, Link, Pagination } from '@akinon/next/components';
+import { Tabs } from '../views/my-quotations/tabs';
+import clsx from 'clsx';
+import React, { useEffect, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { useSearchParams } from 'next/navigation';
+
+export function AccountMyQuotations() {
+  const searchParams = useSearchParams();
+  const { data: quotations, isLoading } = useGetQuotationsQuery();
+  const [activeTab, setActiveTab] = useState('all');
+  const [filteredQuotations, setFilteredQuotations] = useState<Quotations[]>(
+    []
+  );
+
+  const thClasses =
+    'px-6 py-3 bg-[#f1f3f9] text-xs text-[#99999d] border-r border-[#c8daec] font-normal text-left';
+  const thTitles = ['NAME', 'DATE', 'STATUS', 'NUMBER', 'ACTIONS'];
+
+  const filterStatus = (quotation: Quotations, activeStatus: string) => {
+    if (activeStatus === 'all') {
+      return quotation;
+    }
+
+    return quotation.status === activeStatus;
+  };
+
+  useEffect(() => {
+    if (!quotations) {
+      return;
+    }
+
+    const _filteredQuotations = quotations.results.filter((quotation) =>
+      filterStatus(quotation, activeTab)
+    );
+
+    setFilteredQuotations(_filteredQuotations);
+  }, [quotations, activeTab]);
+
+  if (isLoading) {
+    return <LoaderSpinner />;
+  }
+
+  return (
+    <div className="flex-1">
+      <Tabs
+        setActiveTab={setActiveTab}
+        activeTab={activeTab}
+        quotations={quotations}
+      />
+
+      <div className="border border-[#d5dadb] mb-10 overflow-x-auto lg:overflow-hidden">
+        <p className="px-6 py-5 text-[#363636]">
+          <span hidden={activeTab !== 'all'}>All Quotas</span>
+          <span hidden={activeTab !== 'pending'}>Pending Quotas</span>
+          <span hidden={activeTab !== 'rejected'}>Rejected Quotas</span>
+          <span hidden={activeTab !== 'approved'}>Approved Quotas</span>
+          <span hidden={activeTab !== 'sending_approval_request'}>
+            Requires My Approval
+          </span>
+          (<span>{filteredQuotations?.length}</span>)
+        </p>
+
+        <table className="w-full">
+          <thead>
+            <tr>
+              {thTitles.map((title, i) => (
+                <th
+                  key={i}
+                  className={twMerge(
+                    thClasses,
+                    i + 1 === thTitles.length && 'border-r-0'
+                  )}
+                >
+                  {title}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {filteredQuotations?.map((quotation) => (
+              <tr
+                key={quotation.id}
+                className="h-[64px] lg:h-[75px] even:bg-[#fbfcfd]"
+              >
+                <td className="text-sm text-[#3f4b5c] px-6 py-2 whitespace-nowrap border-r border-b border-[#eaeff0] h-[64px] lg:h-[75px]">
+                  {quotation.name}
+                </td>
+                <td className="text-sm text-[#3f4b5c] px-6 py-2 whitespace-nowrap border-r border-b border-[#eaeff0] h-[64px] lg:h-[75px]">
+                  {quotation.created_at}
+                </td>
+                <td className="px-6 py-5 flex whitespace-normal border-r border-b border-[#eaeff0] h-[64px] lg:h-[75px] text-sm text-[#3f4b5c]">
+                  <button
+                    className={clsx(
+                      'text-xs font-medium min-w-[77px] w-[170px] text-center rounded-md m-auto p-1 leading-4 --w-auto',
+                      quotation.status === 'approved' &&
+                        'bg-[#e3f6cc] border border-[#71d200] text-[#67b50c]',
+                      quotation.status === 'pending' &&
+                        'bg-[#fce0ce] border border-[#ff7041] text-[#ff7041]',
+                      quotation.status === 'rejected' &&
+                        'bg-[#f9b9b9] border border-[#f05050] text-[#e33030]',
+                      quotation.status === 'sending_approval_request' &&
+                        'bg-[#eae7f4] border border-[#9387c7] text-[#7667b6]'
+                    )}
+                  >
+                    {quotation.status}
+                  </button>
+                </td>
+                <td className="text-center border-r border-b border-[#eaeff0] h-[64px] lg:h-[75px] text-sm text-[#3f4b5c]">
+                  <Link href="#" className="text-sm text-[#1890ff]">
+                    {quotation.number}
+                  </Link>
+                </td>
+                <td className="px-5 py-3 border-b border-[#eaeff0] h-[64px] lg:h-[75px] text-sm text-[#3f4b5c]"></td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {filteredQuotations?.length > 0 && (
+        <Pagination
+          total={filteredQuotations.length}
+          limit={20}
+          numberOfPages={Math.ceil(filteredQuotations.length / 20)}
+          containerClassName="lg:justify-end"
+          currentPage={Number(searchParams.get('page')) || 1}
+        />
+      )}
+    </div>
+  );
+}