@akinon/pz-b2b 1.18.0

package/src/utils/gtm.ts

@@ -0,0 +1,26 @@
+'use client';
+
+import { GTMEvent, Product } from '@akinon/next/types';
+
+export const pushCartView = (
+  products: Pick<Product, 'name' | 'pk' | 'price'>[]
+) => {
+  pushEvent({
+    Action: 'Checkout',
+    Label: 'Sepet',
+    ecommerce: {
+      products: products?.map((product) => ({
+        name: product.name,
+        id: product.pk,
+        price: product.price
+      }))
+    },
+    event: 'eeCheckout'
+  });
+};
+
+export const pushEvent = (event: GTMEvent) => {
+  const { Category = 'Enhanced Ecommerce', Value = 0, ...rest } = event;
+
+  window.dataLayer.push({ Category, Value, ...rest });
+};

package/src/views/basket-b2b/basket-item.tsx

@@ -0,0 +1,144 @@
+'use client';
+
+import { useLocalization } from '@akinon/next/hooks';
+import { Image, Price, Input, Icon } from '@akinon/next/components';
+import { useUpdateProductMutation } from '@akinon/next/data/client/b2b';
+import { BasketItemType } from '@akinon/next/types';
+import React, { useState } from 'react';
+
+interface Props {
+  basketItem: BasketItemType;
+  setProductToBeDeleted: (item: BasketItemType) => void;
+  setRemoveProduct: (open: boolean) => void;
+}
+
+export const BasketItem = (props: Props) => {
+  const { t } = useLocalization();
+  const { basketItem, setRemoveProduct, setProductToBeDeleted } = props;
+  const [updateProduct] = useUpdateProductMutation();
+  const [divisionErrors, setDivisionErrors] = useState([]);
+
+  const handleChange = (divisionID, e, index) => {
+    if (parseInt(e.target.value) < 1) {
+      setRemoveProduct(true);
+      setProductToBeDeleted(basketItem);
+    } else {
+      updateProduct({
+        product_remote_id: basketItem.product_remote_id,
+        division: divisionID,
+        quantity: parseInt(e.target.value)
+      }).then((res) => {
+        if ('error' in res && 'data' in res.error) {
+          setDivisionErrors((prevErrors) => {
+            const newErrors = [...prevErrors];
+            newErrors[index] = (res.error as any).data.quantity || [];
+            return newErrors;
+          });
+        } else {
+          setDivisionErrors((prevErrors) => {
+            const newErrors = [...prevErrors];
+            newErrors[index] = [];
+            return newErrors;
+          });
+        }
+      });
+    }
+  };
+
+  return (
+    <>
+      <tr>
+        <td>
+          <div className='h-[183px] w-full flex flex-col justify-between items-center text-xs'>
+            <div className='w-full flex items-center justify-center py-3 mb-3 border-b'>
+              <Icon name='chevron-down' size={10} />
+            </div>
+
+            <div className='h-full overflow-hidden'
+              style={{ writingMode: 'vertical-rl', textOrientation: 'mixed', display: '-webkit-box', lineClamp: 1, WebkitLineClamp: 1, WebkitBoxOrient: 'vertical' }}
+            >
+              {basketItem.product.name}{basketItem.product.name}{basketItem.product.name}
+            </div>
+
+            <button
+              onClick={() => { setProductToBeDeleted(basketItem), setRemoveProduct(true) }}
+              className='py-1.5 border-t w-full flex items-center justify-center'
+              style={{ writingMode: 'vertical-rl', textOrientation: 'mixed' }}
+            >
+              {t('basket.b2b.table.delete')}
+            </button>
+          </div>
+        </td>
+
+        <td className='border text-center'>
+          <div className='min-w-[80px] w-full h-full flex items-center justify-center'>
+            <Image
+              src={basketItem.product.product_image}
+              alt={basketItem.product.name}
+              width={50}
+              height={65}
+            />
+          </div>
+        </td>
+
+        <td className='min-w-[181px] text-sm border text-[#3f4b5c] leading-normal'>
+          <div className='px-4'>
+            <div className='break-words'>{basketItem.product.name}</div>
+            <div className='break-words'>SKU: {basketItem.product.sku}</div>
+          </div>
+        </td>
+
+        <td className='text-sm border text-[#3f4b5c] leading-normal text-right px-3'>
+          <Price value={basketItem.price} className='w-max block' />
+        </td>
+
+        <td className='text-sm border text-[#3f4b5c] leading-normal text-center'>
+          <div className='min-w-[90px]'>
+            {basketItem.quantity}
+          </div>
+        </td>
+
+        <td className='border'>
+          <div className='min-w-[140px]'>
+            {basketItem.divisions.map((division) => (
+              <div className='py-5 px-1 border-b last:border-0 text-center flex items-center justify-center gap-x-1' key={division.name}>
+                <Icon name='b2b-info' size={18} className='text-[#293245]' />
+
+                <div className='text-sm underline text-[#3f4b5c] overflow-hidden' style={{ display: '-webkit-box', lineClamp: 1, WebkitLineClamp: 1, WebkitBoxOrient: 'vertical' }}>
+                  {division.name}
+                </div>
+              </div>
+            ))}
+          </div>
+        </td>
+
+        <td className='border'>
+          <div className='min-w-[120px]'>
+            {basketItem.divisions.map((division, index) => (
+              <div className='relative py-5 border-b last:border-0 text-center flex flex-col gap-y-1 items-center justify-center' key={`division-${division.id}`}>
+                <Input
+                  className='appearance-none outline-none w-20 h-6 px-2 py-0 border border-[#c8daec] rounded text-right'
+                  type="number"
+                  value={division.quantity}
+                  onChange={(e) => handleChange(division.id, e, index)}
+                />
+
+                {divisionErrors[index] && (
+                  <div className="text-xs text-error mb-2 absolute -bottom-1">
+                    {divisionErrors[index].map((err) => (
+                      <div key={err}>{err}</div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </td>
+
+        <td className='text-sm border text-[#3f4b5c] leading-normal text-right px-6'>
+          <Price value={basketItem.total_amount} className='w-max block' />
+        </td>
+      </tr>
+    </>
+  );
+};

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

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

package/src/views/basket-b2b/remove-product-modal.tsx

@@ -0,0 +1,109 @@
+'use client';
+
+import { useDeleteProductMutation } from '@akinon/next/data/client/b2b';
+import { Image } from '@akinon/next/components';
+import { useLocalization } from '@akinon/next/hooks';
+import React, { useEffect } from 'react';
+import { BasketItemType } from '@akinon/next/types';
+import { useAddFavoriteMutation } from '@akinon/next/data/client/wishlist';
+import clsx from 'clsx';
+
+export const RemoveProductModal = ({
+  open,
+  setOpen,
+  basketItem
+}: {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  basketItem: BasketItemType
+}) => {
+  const { t } = useLocalization();
+  const [addFavorite] = useAddFavoriteMutation();
+  const [deleteProduct, { isLoading, isSuccess }] = useDeleteProductMutation();
+
+  const handleClick = (addToFavorite:boolean) => {
+    if(addToFavorite) {
+      addFavorite(basketItem.product_remote_id)
+    }
+
+    deleteProduct({ product_remote_id: basketItem.product_remote_id });
+  };
+
+  useEffect(() => {
+    if (isSuccess) {
+      setOpen(false);
+    }
+  }, [isSuccess]);
+
+  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-[17px]">
+            {t('basket.b2b.remove_product_modal.title')}
+          </h3>
+
+          <button
+            className="absolute right-[30px] top-5"
+            onClick={() => setOpen(false)}
+          >
+            <i className="pz-icon-close"></i>
+          </button>
+        </header>
+
+        <p className="text-left px-[30px] py-4 text-sm">
+            {t('basket.b2b.remove_product_modal.description')}
+        </p>
+
+        <div className="px-[30px] pb-5">
+          <div className='flex items-center gap-x-3'>
+            <div>
+              <Image src={basketItem.product.product_image} width={72} height={93} alt={basketItem.product.name} />
+            </div>
+            <div className='text-[#3f4b5c] text-sm'>
+              <p>{basketItem.product.name}</p>
+              <p>SKU: {basketItem.product.sku}</p>
+            </div>
+          </div>
+
+          <div className='flex gap-y-3 flex-col items-center'>
+            <button
+              type="submit"
+              className="h-8 bg-black text-white font-medium text-sm w-full"
+              disabled={isLoading}
+              onClick={() => handleClick(true)}
+            >
+              {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.remove_product_modal.add_to_favorites_button')
+              )}
+            </button>
+
+            <button
+              type="submit"
+              className={clsx(
+                'h-auto bg-transparent text-[#181818] border-[#181818] text-xs w-auto',
+                !isLoading && 'border-b'
+              )}
+              disabled={isLoading}
+              onClick={() => handleClick(false)}
+            >
+              {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.remove_product_modal.delete_product_button')
+              )}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/views/basket-b2b/request-quote-modal.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+import { useCreateQuotationMutation } from '@akinon/next/data/client/b2b';
+import { useLocalization } from '@akinon/next/hooks';
+import React, { useEffect, useState } from 'react';
+
+export const RequestQuoteModal = ({
+  open,
+  setOpen
+}: {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}) => {
+  const { t } = useLocalization();
+  const [createQuotation, { isLoading, isSuccess, error, isError }] = useCreateQuotationMutation();
+  const [errors, setErrors] = useState([]);
+  const [cartName, setCartName] = useState<string>('');
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    if (!cartName) {
+      return;
+    }
+
+   createQuotation({ name: cartName }).then((res) => {
+    if ('error' in res && 'data' in res.error) {
+      setErrors((res.error.data as any).non_field_errors || []);
+    }
+   })
+  };
+
+  useEffect(() => {
+    if (isSuccess) {
+      setOpen(false);
+    }
+  }, [isSuccess]);
+
+  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">
+            {t('basket.b2b.request_quote_modal.title')}
+          </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={(e) => handleSubmit(e)}>
+            <label htmlFor="cart-name-input" className="text-xs block mb-2">
+              {t('basket.b2b.request_quote_modal.quotation_name')}
+            </label>
+
+            <input
+              id="cart-name-input"
+              name="name"
+              type="text"
+              className="h-8 border border-[#eeeeee] text-sm mb-2.5 outline-none px-2 w-full"
+              onChange={(e) => setCartName(e.target.value)}
+            />
+
+            {isError && (
+              <div className="text-xs text-error mb-2">
+                {errors.map((err) => (
+                  <div key={err}>{err}</div>
+                ))}
+              </div>
+            )}
+
+            <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.request_quote_modal.button')
+              )}
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/views/basket-b2b/save-cart-modal.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import { useSaveBasketMutation } from '@akinon/next/data/client/b2b';
+import { useLocalization } from '@akinon/next/hooks';
+import React, { useEffect, useState } from 'react';
+
+export const SaveCartModal = ({
+  open,
+  setOpen
+}: {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}) => {
+  const { t } = useLocalization();
+  const [cartName, setCartName] = useState<string>('');
+  const [saveBasket, { isLoading, isSuccess }] = useSaveBasketMutation();
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    if (!cartName) {
+      return;
+    }
+
+    saveBasket({ name: cartName });
+  };
+
+  useEffect(() => {
+    if (isSuccess) {
+      setOpen(false);
+    }
+  }, [isSuccess]);
+
+  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">
+            {t('basket.b2b.save_cart_modal.title')}
+          </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={(e) => handleSubmit(e)}>
+            <label htmlFor="cart-name-input" className="text-xs block mb-2">
+              {t('basket.b2b.save_cart_modal.cart_name')}
+            </label>
+            <input
+              id="cart-name-input"
+              name="name"
+              type="text"
+              className="h-8 border border-[#eeeeee] text-sm mb-2.5 outline-none px-2 w-full"
+              onChange={(e) => setCartName(e.target.value)}
+            />
+            <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.save_cart_modal.save_cart_button')
+              )}
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/views/my-quotations/tabs.tsx

@@ -0,0 +1,184 @@
+'use client';
+
+import { GetQuotationsResponse } from '@akinon/next/data/client/account';
+import clsx from 'clsx';
+import React, { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+type TabsType = {
+  quotations: GetQuotationsResponse | undefined;
+  setActiveTab: Dispatch<SetStateAction<string>>;
+  activeTab: string;
+};
+
+const initialTabCountsState = {
+  pendingCount: 0,
+  rejectedCount: 0,
+  approvedCount: 0,
+  sendingApprovalRequestCount: 0
+};
+
+export function Tabs(props: TabsType) {
+  const quotations = props.quotations?.results;
+  const setActiveTab = props.setActiveTab;
+  const activeTab = props.activeTab;
+  const [tabCounts, setTabCounts] = useState(initialTabCountsState);
+
+  useEffect(() => {
+    setTabCounts(initialTabCountsState);
+
+    quotations?.forEach((quotation) => {
+      if (quotation.status === 'pending') {
+        setTabCounts((prevCount) => ({
+          ...prevCount,
+          pendingCount: prevCount.pendingCount + 1
+        }));
+      } else if (quotation.status === 'rejected') {
+        setTabCounts((prevCount) => ({
+          ...prevCount,
+          rejectedCount: prevCount.rejectedCount + 1
+        }));
+      } else if (quotation.status === 'approved') {
+        setTabCounts((prevCount) => ({
+          ...prevCount,
+          approvedCount: prevCount.approvedCount + 1
+        }));
+      } else if (quotation.status === 'sending_approval_request') {
+        setTabCounts((prevCount) => ({
+          ...prevCount,
+          sendingApprovalRequestCount: prevCount.sendingApprovalRequestCount + 1
+        }));
+      }
+    });
+  }, [quotations]);
+
+  return (
+    <div className="mb-9 mt-4 lg:mt-0">
+      <div className="relative flex justify-start lg:justify-between space-x-3 lg:space-x-4">
+        <div
+          className="flex flex-col items-center space-y-1.5 transition-all cursor-pointer"
+          onClick={() => setActiveTab('all')}
+        >
+          <span
+            className={twMerge(
+              clsx(
+                'flex items-center text-xl justify-center w-9 h-9 rounded-full p-1.5 border border-[#eeeded] text-black bg-white'
+              ),
+              activeTab === 'all' && 'bg-[#71d200] text-white'
+            )}
+          >
+            ☷
+          </span>
+          <span
+            className={clsx(
+              'text-xs text-center text-[#363636] w-[50px] lg:w-[110px]',
+              activeTab === 'all' && 'font-bold'
+            )}
+          >
+            All Quotes (<span>{quotations?.length}</span>)
+          </span>
+        </div>
+
+        <div
+          className="flex flex-col items-center space-y-1.5 transition-all cursor-pointer"
+          onClick={() => setActiveTab('pending')}
+        >
+          <span
+            className={twMerge(
+              clsx(
+                'flex items-center text-xl justify-center w-9 h-9 rounded-full p-1.5 border border-[#eeeded] text-black bg-white'
+              ),
+              activeTab === 'pending' && 'bg-[#71d200] text-white'
+            )}
+          >
+            ☷
+          </span>
+          <span
+            className={clsx(
+              'text-xs text-center text-[#363636] w-[50px] lg:w-[110px]',
+              activeTab === 'pending' && 'font-bold'
+            )}
+          >
+            Pending (<span>{tabCounts.pendingCount}</span>)
+          </span>
+        </div>
+
+        <div
+          className="flex flex-col items-center space-y-1.5 transition-all cursor-pointer"
+          onClick={() => setActiveTab('rejected')}
+        >
+          <span
+            className={twMerge(
+              clsx(
+                'flex items-center text-xl justify-center w-9 h-9 rounded-full p-1.5 border border-[#eeeded] text-black bg-white'
+              ),
+              activeTab === 'rejected' && 'bg-[#71d200] text-white'
+            )}
+          >
+            ☷
+          </span>
+          <span
+            className={clsx(
+              'text-xs text-center text-[#363636] w-[50px] lg:w-[110px]',
+              activeTab === 'rejected' && 'font-bold'
+            )}
+          >
+            Rejected (<span>{tabCounts.rejectedCount}</span>)
+          </span>
+        </div>
+
+        <div
+          className="flex flex-col items-center space-y-1.5 transition-all cursor-pointer"
+          onClick={() => setActiveTab('approved')}
+        >
+          <span
+            className={twMerge(
+              clsx(
+                'flex items-center text-xl justify-center w-9 h-9 rounded-full p-1.5 border border-[#eeeded] text-black bg-white'
+              ),
+              activeTab === 'approved' && 'bg-[#71d200] text-white'
+            )}
+          >
+            ☷
+          </span>
+          <span
+            className={clsx(
+              'text-xs text-center text-[#363636] w-[50px] lg:w-[110px]',
+              activeTab === 'approved' && 'font-bold'
+            )}
+          >
+            Approved (<span>{tabCounts.approvedCount}</span>)
+          </span>
+        </div>
+
+        <div
+          className="flex flex-col items-center space-y-1.5 transition-all cursor-pointer"
+          onClick={() => setActiveTab('sending_approval_request')}
+        >
+          <span
+            className={twMerge(
+              clsx(
+                'flex items-center text-xl justify-center w-9 h-9 rounded-full p-1.5 border border-[#eeeded] text-black bg-white'
+              ),
+              activeTab === 'sending_approval_request' &&
+                'bg-[#71d200] text-white'
+            )}
+          >
+            ☷
+          </span>
+          <span
+            className={clsx(
+              'text-xs text-center text-[#363636] w-[50px] lg:w-[110px]',
+              activeTab === 'sending_approval_request' && 'font-bold'
+            )}
+          >
+            Requires My Approval (
+            <span>{tabCounts.sendingApprovalRequestCount}</span>)
+          </span>
+        </div>
+
+        <span className="absolute h-px bg-[#eeeded] top-[18px] left-6 -translate-y-1/2 lg:left-1/2 lg:-translate-x-1/2 z-[-1] w-[250px] lg:w-[calc(100%-110px)]"></span>
+      </div>
+    </div>
+  );
+}