@akinon/pz-b2b 1.19.4 → 1.20.0

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/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @akinon/pz-b2b
 
+## 1.20.0
+
+### Minor Changes
+
+- 86a9561: ZERO-2416: Update translations and refactor my quotations
+
 ## 1.19.4
 
 ## 1.19.3

package/package.json

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

package/src/basket-b2b/index.tsx

@@ -1,31 +1,72 @@
-"use client";
+'use client';
 
-import { useEffect, useState } from "react";
-import { pushCartView } from "../utils/gtm";
+import { useEffect, useMemo, useState } from 'react';
+import { pushCartView } from '../utils/gtm';
 import {
   LoaderSpinner,
   Trans,
   Price,
   Icon,
-  Link,
-} from "@akinon/next/components";
-import { useLocalization } from "@akinon/next/hooks";
+  Link
+} from '@akinon/next/components';
 import {
   useGetBasketB2bQuery,
   useGetDraftsQuery,
-  useLoadBasketMutation,
-} from "@akinon/next/data/client/b2b";
+  useLoadBasketMutation
+} from '@akinon/next/data/client/b2b';
 import {
   BasketItem,
   RequestQuoteModal,
   RemoveProductModal,
-  SaveCartModal,
-} from "../views/basket-b2b";
+  SaveCartModal
+} from '../views/basket-b2b';
 
-export function BasketB2b() {
+interface BasketB2bTranslationsProps {
+  my_cart: string;
+  back_to_shopping: string;
+  save_cart: string;
+  request_quote: string;
+  total_price: string;
+  save_cart_modal: {
+    title: string;
+    cart_name: string;
+    save_cart_button: string;
+  };
+  request_quote_modal: {
+    title: string;
+    quotation_name: string;
+    button: string;
+  };
+  remove_product_modal: {
+    title: string;
+    description: string;
+    add_to_favorites_button: string;
+    delete_product_button: string;
+  };
+  empty: {
+    title: string;
+    button: string;
+    choose_cart_placeholder: string;
+  };
+  table: {
+    basket_qty: string;
+    delete: string;
+    name_sku: string;
+    price: string;
+    quantity: string;
+    store_name: string;
+    store_qty: string;
+    subtotal: string;
+  };
+}
+
+interface BasketB2bProps {
+  translations: Record<string, BasketB2bTranslationsProps>;
+}
+
+export function BasketB2b({ translations }: BasketB2bProps) {
   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);
@@ -33,6 +74,52 @@ export function BasketB2b() {
   const [productToBeDeleted, setProductToBeDeleted] = useState(null);
   const [selectedDraft, setSelectedDraft] = useState(null);
 
+  const defaultTranslations = {
+    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'
+    }
+  };
+
+  const _translations = useMemo(
+    () => ({ ...defaultTranslations, ...translations }),
+    [translations]
+  );
+
   const handleSubmit = (e) => {
     e.preventDefault();
 
@@ -46,7 +133,7 @@ export function BasketB2b() {
   useEffect(() => {
     if (isSuccess) {
       const products = basket?.basket_items.map((basketItem) => ({
-        ...basketItem.product,
+        ...basketItem.product
       }));
       pushCartView(products);
     }
@@ -67,19 +154,19 @@ export function BasketB2b() {
               <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")}
+                    {_translations.my_cart}
                   </h2>
 
                   <Link href="/" className="text-xs hover:text-secondary-500">
-                    {t("basket.b2b.back_to_shopping")}
+                    {_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="basket.b2b.table.basket_qty"
+                    i18nKey={_translations.table.basket_qty}
                     components={{
-                      Qty: <span>{basket.total_quantity}</span>,
+                      Qty: <span>{basket.total_quantity}</span>
                     }}
                   />
                 </div>
@@ -99,20 +186,20 @@ export function BasketB2b() {
                           </div>
                         </th>
                         <th className="text-xs text-[#99999d] font-normal border border-[#d5dadb] py-3">
-                          {t("basket.b2b.table.name_sku")}
+                          {_translations.table.name_sku}
                         </th>
                         <th className="text-xs text-[#99999d] font-normal border border-[#d5dadb] py-3">
-                          {t("basket.b2b.table.price")}
+                          {_translations.table.price}
                         </th>
                         <th className="text-xs text-[#99999d] font-normal border border-[#d5dadb] py-3">
-                          {t("basket.b2b.table.quantity")}
+                          {_translations.table.quantity}
                         </th>
                         <th className="text-xs text-[#99999d] font-normal border border-[#d5dadb] py-3">
-                          {t("basket.b2b.table.store_name")}
+                          {_translations.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>
+                            <span>{_translations.table.store_qty}</span>
                             <Icon
                               name="b2b-distribute"
                               size={18}
@@ -121,7 +208,7 @@ export function BasketB2b() {
                           </div>
                         </th>
                         <th className="text-xs text-[#99999d] font-normal border border-[#d5dadb] py-3">
-                          {t("basket.b2b.table.subtotal")}
+                          {_translations.table.subtotal}
                         </th>
                       </tr>
                     </thead>
@@ -133,6 +220,7 @@ export function BasketB2b() {
                           key={index}
                           setRemoveProduct={setRemoveProduct}
                           setProductToBeDeleted={setProductToBeDeleted}
+                          deleteText={_translations.table.delete}
                         />
                       ))}
                     </tbody>
@@ -143,7 +231,7 @@ export function BasketB2b() {
               <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>
+                    <span>{_translations.total_price}</span>
                     <Price value={basket.total_amount} />
                   </div>
 
@@ -151,14 +239,14 @@ export function BasketB2b() {
                     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")}
+                    {_translations.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")}
+                    {_translations.empty.title}
                   </button>
                 </div>
               </div>
@@ -175,7 +263,7 @@ export function BasketB2b() {
                     0
                   </span>
                 </div>
-                <p className="text-xs">{t("basket.b2b.empty.title")}</p>
+                <p className="text-xs">{_translations.empty.title}</p>
               </div>
 
               <form onSubmit={(e) => handleSubmit(e)}>
@@ -186,7 +274,7 @@ export function BasketB2b() {
                     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")}
+                      {_translations.empty.choose_cart_placeholder}
                     </option>
                     {dataDraft &&
                       dataDraft.map((draft) => (
@@ -201,18 +289,38 @@ export function BasketB2b() {
                   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")}
+                  {_translations.empty.button}
                 </button>
               </form>
             </div>
           ))}
 
-        <SaveCartModal setOpen={setOpen} open={open} />
-        <RequestQuoteModal setOpen={setRequestQuote} open={openRequestQuote} />
+        <SaveCartModal
+          setOpen={setOpen}
+          open={open}
+          modalTitle={_translations.save_cart_modal.title}
+          modalCartName={_translations.save_cart_modal.cart_name}
+          saveCartButton={_translations.save_cart_modal.save_cart_button}
+        />
+        <RequestQuoteModal
+          setOpen={setRequestQuote}
+          open={openRequestQuote}
+          modalTitle={_translations.request_quote_modal.title}
+          modalQuotationName={_translations.request_quote_modal.quotation_name}
+          modalButton={_translations.request_quote_modal.button}
+        />
         <RemoveProductModal
           setOpen={setRemoveProduct}
           open={openRemoveProduct}
           basketItem={productToBeDeleted}
+          modalTitle={_translations.remove_product_modal.title}
+          modalDescription={_translations.remove_product_modal.description}
+          addToFavoritesButton={
+            _translations.remove_product_modal.add_to_favorites_button
+          }
+          deleteProductButton={
+            _translations.remove_product_modal.delete_product_button
+          }
         />
       </div>
     </>

package/src/my-quotations/index.tsx

@@ -1,45 +1,126 @@
 'use client';
 
-import { useGetQuotationsQuery } from '@akinon/next/data/client/account';
-import { Quotations } from '@akinon/next/types';
+import {
+  GetQuotationsResponse,
+  useGetQuotationsQuery
+} from '@akinon/next/data/client/account';
 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 React, { useEffect, useMemo, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
-import { useSearchParams } from 'next/navigation';
+import { useSearchParams, usePathname } from 'next/navigation';
+import { useRouter } from '@akinon/next/hooks';
 
-export function AccountMyQuotations() {
-  const searchParams = useSearchParams();
-  const { data: quotations, isLoading } = useGetQuotationsQuery();
+interface AccountMyQuotationsTranslationsProps {
+  tableName: string;
+  tableDate: string;
+  tableStatus: string;
+  tableNumber: string;
+  tableActions: string;
+  tabAllQuotas: string;
+  tabPendingQuotas: string;
+  tabRejectedQuotas: string;
+  tabApprovedQuotas: string;
+  tabRequiresMyApproval: string;
+  tabTitleAllQuotas: string;
+  tabTitlePendingQuotas: string;
+  tabTitleRejectedQuotas: string;
+  tabTitleApprovedQuotas: string;
+  tabTitleRequiresMyApproval: string;
+}
+interface AccountMyQuotationsProps {
+  translations: Record<string, AccountMyQuotationsTranslationsProps>;
+}
+
+export function AccountMyQuotations({
+  translations
+}: AccountMyQuotationsProps) {
+  const searchParams = new URLSearchParams(useSearchParams());
+  const router = useRouter();
+  const pathname = usePathname();
+  const { data: quotations, isLoading } = useGetQuotationsQuery({
+    page: Number(searchParams.get('page') || 1)
+  });
+  const { data: quotationsPending } = useGetQuotationsQuery({
+    page: Number(searchParams.get('page') || 1),
+    status: 'pending'
+  });
+  const { data: quotationsRejected } = useGetQuotationsQuery({
+    page: Number(searchParams.get('page') || 1),
+    status: 'rejected'
+  });
+  const { data: quotationsApproved } = useGetQuotationsQuery({
+    page: Number(searchParams.get('page') || 1),
+    status: 'approved'
+  });
+  const { data: quotationsSendingApprovalRequest } = useGetQuotationsQuery({
+    page: Number(searchParams.get('page') || 1),
+    status: 'sending_approval_request'
+  });
   const [activeTab, setActiveTab] = useState('all');
-  const [filteredQuotations, setFilteredQuotations] = useState<Quotations[]>(
-    []
+  const [selectedQuotations, setSelectedQuotations] =
+    useState<GetQuotationsResponse>();
+
+  const defaultTranslations = {
+    tableName: 'Name',
+    tableDate: 'Date',
+    tableStatus: 'Status',
+    tableNumber: 'Number',
+    tableActions: 'Actions',
+    tabAllQuotas: 'All Quotas',
+    tabPendingQuotas: 'Pending',
+    tabRejectedQuotas: 'Rejected',
+    tabApprovedQuotas: 'Approved',
+    tabRequiresMyApproval: 'Requires My Approval',
+    tabTitleAllQuotas: 'All Quotas',
+    tabTitlePendingQuotas: 'Pending Quotas',
+    tabTitleRejectedQuotas: 'Rejected Quotas',
+    tabTitleApprovedQuotas: 'Approved Quotas',
+    tabTitleRequiresMyApproval: 'Requires My Approval'
+  };
+
+  const _translations = useMemo(
+    () => ({ ...defaultTranslations, ...translations }),
+    [translations]
   );
 
   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;
-  };
+  const thTitles = [
+    _translations.tableName,
+    _translations.tableDate,
+    _translations.tableStatus,
+    _translations.tableNumber,
+    _translations.tableActions
+  ];
 
   useEffect(() => {
-    if (!quotations) {
-      return;
+    if (activeTab === 'all') {
+      setSelectedQuotations(quotations);
+    } else if (activeTab === 'pending') {
+      setSelectedQuotations(quotationsPending);
+    } else if (activeTab === 'rejected') {
+      setSelectedQuotations(quotationsRejected);
+    } else if (activeTab === 'approved') {
+      setSelectedQuotations(quotationsApproved);
+    } else if (activeTab === 'sending_approval_request') {
+      setSelectedQuotations(quotationsSendingApprovalRequest);
     }
+  }, [
+    selectedQuotations,
+    activeTab,
+    quotations,
+    quotationsPending,
+    quotationsRejected,
+    quotationsApproved,
+    quotationsSendingApprovalRequest
+  ]);
 
-    const _filteredQuotations = quotations.results.filter((quotation) =>
-      filterStatus(quotation, activeTab)
-    );
-
-    setFilteredQuotations(_filteredQuotations);
-  }, [quotations, activeTab]);
+  useEffect(() => {
+    searchParams.delete('page');
+    router.push(pathname + '?' + searchParams.toString());
+  }, [activeTab]);
 
   if (isLoading) {
     return <LoaderSpinner />;
@@ -50,19 +131,36 @@ export function AccountMyQuotations() {
       <Tabs
         setActiveTab={setActiveTab}
         activeTab={activeTab}
-        quotations={quotations}
+        quotationsCount={quotations?.count}
+        pendingCount={quotationsPending?.count}
+        rejectedCount={quotationsRejected?.count}
+        approvedCount={quotationsApproved?.count}
+        sendingApprovalRequestCount={quotationsSendingApprovalRequest?.count}
+        tabAllQuotas={_translations.tabAllQuotas}
+        tabPendingQuotas={_translations.tabPendingQuotas}
+        tabRejectedQuotas={_translations.tabRejectedQuotas}
+        tabApprovedQuotas={_translations.tabApprovedQuotas}
+        tabRequiresMyApproval={_translations.tabRequiresMyApproval}
       />
 
       <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 !== 'all'}>
+            {_translations.tabTitleAllQuotas}
+          </span>
+          <span hidden={activeTab !== 'pending'}>
+            {_translations.tabTitlePendingQuotas}
+          </span>
+          <span hidden={activeTab !== 'rejected'}>
+            {_translations.tabTitleRejectedQuotas}
+          </span>
+          <span hidden={activeTab !== 'approved'}>
+            {_translations.tabTitleApprovedQuotas}
+          </span>
           <span hidden={activeTab !== 'sending_approval_request'}>
-            Requires My Approval
+            {_translations.tabTitleRequiresMyApproval}
           </span>
-          (<span>{filteredQuotations?.length}</span>)
+          (<span>{selectedQuotations?.count}</span>)
         </p>
 
         <table className="w-full">
@@ -82,7 +180,7 @@ export function AccountMyQuotations() {
             </tr>
           </thead>
           <tbody>
-            {filteredQuotations?.map((quotation) => (
+            {selectedQuotations?.results?.map((quotation) => (
               <tr
                 key={quotation.id}
                 className="h-[64px] lg:h-[75px] even:bg-[#fbfcfd]"
@@ -122,11 +220,11 @@ export function AccountMyQuotations() {
         </table>
       </div>
 
-      {filteredQuotations?.length > 0 && (
+      {selectedQuotations?.count > 0 && (
         <Pagination
-          total={filteredQuotations.length}
+          total={selectedQuotations.count}
           limit={20}
-          numberOfPages={Math.ceil(filteredQuotations.length / 20)}
+          numberOfPages={Math.ceil(selectedQuotations.count / 20)}
           containerClassName="lg:justify-end"
           currentPage={Number(searchParams.get('page')) || 1}
         />

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

@@ -1,6 +1,5 @@
 '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';
@@ -10,11 +9,12 @@ interface Props {
   basketItem: BasketItemType;
   setProductToBeDeleted: (item: BasketItemType) => void;
   setRemoveProduct: (open: boolean) => void;
+  deleteText: string;
 }
 
 export const BasketItem = (props: Props) => {
-  const { t } = useLocalization();
-  const { basketItem, setRemoveProduct, setProductToBeDeleted } = props;
+  const { basketItem, setRemoveProduct, setProductToBeDeleted, deleteText } =
+    props;
   const [updateProduct] = useUpdateProductMutation();
   const [divisionErrors, setDivisionErrors] = useState([]);
 
@@ -49,29 +49,41 @@ export const BasketItem = (props: Props) => {
     <>
       <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 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' }}
+            <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}
+              {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'
+              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')}
+              {deleteText}
             </button>
           </div>
         </td>
 
-        <td className='border text-center'>
-          <div className='min-w-[80px] w-full h-full flex items-center justify-center'>
+        <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}
@@ -81,30 +93,39 @@ export const BasketItem = (props: Props) => {
           </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>
+        <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 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 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]'>
+        <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' }}>
+              <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>
@@ -112,12 +133,15 @@ export const BasketItem = (props: Props) => {
           </div>
         </td>
 
-        <td className='border'>
-          <div className='min-w-[120px]'>
+        <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}`}>
+              <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'
+                  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)}
@@ -135,8 +159,8 @@ export const BasketItem = (props: Props) => {
           </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 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/remove-product-modal.tsx

@@ -2,7 +2,6 @@
 
 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';
@@ -11,19 +10,26 @@ import clsx from 'clsx';
 export const RemoveProductModal = ({
   open,
   setOpen,
-  basketItem
+  basketItem,
+  modalTitle,
+  modalDescription,
+  addToFavoritesButton,
+  deleteProductButton
 }: {
   open: boolean;
   setOpen: (open: boolean) => void;
-  basketItem: BasketItemType
+  basketItem: BasketItemType;
+  modalTitle: string;
+  modalDescription: string;
+  addToFavoritesButton: string;
+  deleteProductButton: string;
 }) => {
-  const { t } = useLocalization();
   const [addFavorite] = useAddFavoriteMutation();
   const [deleteProduct, { isLoading, isSuccess }] = useDeleteProductMutation();
 
-  const handleClick = (addToFavorite:boolean) => {
-    if(addToFavorite) {
-      addFavorite(basketItem.product_remote_id)
+  const handleClick = (addToFavorite: boolean) => {
+    if (addToFavorite) {
+      addFavorite(basketItem.product_remote_id);
     }
 
     deleteProduct({ product_remote_id: basketItem.product_remote_id });
@@ -42,7 +48,7 @@ export const RemoveProductModal = ({
       <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')}
+            {modalTitle}
           </h3>
 
           <button
@@ -53,22 +59,25 @@ export const RemoveProductModal = ({
           </button>
         </header>
 
-        <p className="text-left px-[30px] py-4 text-sm">
-            {t('basket.b2b.remove_product_modal.description')}
-        </p>
+        <p className="text-left px-[30px] py-4 text-sm">{modalDescription}</p>
 
         <div className="px-[30px] pb-5">
-          <div className='flex items-center gap-x-3'>
+          <div className="flex items-center gap-x-3">
             <div>
-              <Image src={basketItem.product.product_image} width={72} height={93} alt={basketItem.product.name} />
+              <Image
+                src={basketItem.product.product_image}
+                width={72}
+                height={93}
+                alt={basketItem.product.name}
+              />
             </div>
-            <div className='text-[#3f4b5c] text-sm'>
+            <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'>
+          <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"
@@ -80,7 +89,7 @@ export const RemoveProductModal = ({
                   <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')
+                addToFavoritesButton
               )}
             </button>
 
@@ -98,7 +107,7 @@ export const RemoveProductModal = ({
                   <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')
+                deleteProductButton
               )}
             </button>
           </div>
@@ -106,4 +115,4 @@ export const RemoveProductModal = ({
       </div>
     </div>
   );
-}
+};

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

@@ -1,18 +1,23 @@
 '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
+  setOpen,
+  modalTitle,
+  modalQuotationName,
+  modalButton
 }: {
   open: boolean;
   setOpen: (open: boolean) => void;
+  modalTitle: string;
+  modalQuotationName: string;
+  modalButton: string;
 }) => {
-  const { t } = useLocalization();
-  const [createQuotation, { isLoading, isSuccess, error, isError }] = useCreateQuotationMutation();
+  const [createQuotation, { isLoading, isSuccess, error, isError }] =
+    useCreateQuotationMutation();
   const [errors, setErrors] = useState([]);
   const [cartName, setCartName] = useState<string>('');
 
@@ -23,11 +28,11 @@ export const RequestQuoteModal = ({
       return;
     }
 
-   createQuotation({ name: cartName }).then((res) => {
-    if ('error' in res && 'data' in res.error) {
-      setErrors((res.error.data as any).non_field_errors || []);
-    }
-   })
+    createQuotation({ name: cartName }).then((res) => {
+      if ('error' in res && 'data' in res.error) {
+        setErrors((res.error.data as any).non_field_errors || []);
+      }
+    });
   };
 
   useEffect(() => {
@@ -43,7 +48,7 @@ export const RequestQuoteModal = ({
       <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')}
+            {modalTitle}
           </h3>
 
           <button
@@ -57,7 +62,7 @@ export const RequestQuoteModal = ({
         <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')}
+              {modalQuotationName}
             </label>
 
             <input
@@ -86,7 +91,7 @@ export const RequestQuoteModal = ({
                   <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')
+                modalButton
               )}
             </button>
           </form>
@@ -94,4 +99,4 @@ export const RequestQuoteModal = ({
       </div>
     </div>
   );
-}
+};

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

@@ -1,17 +1,21 @@
 '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
+  setOpen,
+  modalTitle,
+  modalCartName,
+  saveCartButton
 }: {
   open: boolean;
   setOpen: (open: boolean) => void;
+  modalTitle: string;
+  modalCartName: string;
+  saveCartButton: string;
 }) => {
-  const { t } = useLocalization();
   const [cartName, setCartName] = useState<string>('');
   const [saveBasket, { isLoading, isSuccess }] = useSaveBasketMutation();
 
@@ -38,7 +42,7 @@ export const SaveCartModal = ({
       <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')}
+            {modalTitle}
           </h3>
           <button
             className="absolute right-[30px] top-5"
@@ -50,7 +54,7 @@ export const SaveCartModal = ({
         <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')}
+              {modalCartName}
             </label>
             <input
               id="cart-name-input"
@@ -69,7 +73,7 @@ export const SaveCartModal = ({
                   <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')
+                saveCartButton
               )}
             </button>
           </form>
@@ -77,4 +81,4 @@ export const SaveCartModal = ({
       </div>
     </div>
   );
-}
+};

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

@@ -1,57 +1,38 @@
 'use client';
 
-import { GetQuotationsResponse } from '@akinon/next/data/client/account';
 import clsx from 'clsx';
-import React, { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import React, { Dispatch, SetStateAction } from 'react';
 import { twMerge } from 'tailwind-merge';
 
-type TabsType = {
-  quotations: GetQuotationsResponse | undefined;
+type TabsPropsType = {
+  quotationsCount: number;
+  pendingCount: number;
+  rejectedCount: number;
+  approvedCount: number;
+  sendingApprovalRequestCount: number;
   setActiveTab: Dispatch<SetStateAction<string>>;
   activeTab: string;
+  tabAllQuotas: string;
+  tabPendingQuotas: string;
+  tabRejectedQuotas: string;
+  tabApprovedQuotas: string;
+  tabRequiresMyApproval: 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]);
-
+export function Tabs({
+  quotationsCount,
+  pendingCount,
+  rejectedCount,
+  approvedCount,
+  sendingApprovalRequestCount,
+  setActiveTab,
+  activeTab,
+  tabAllQuotas,
+  tabPendingQuotas,
+  tabRejectedQuotas,
+  tabApprovedQuotas,
+  tabRequiresMyApproval
+}: TabsPropsType) {
   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">
@@ -75,7 +56,7 @@ export function Tabs(props: TabsType) {
               activeTab === 'all' && 'font-bold'
             )}
           >
-            All Quotes (<span>{quotations?.length}</span>)
+            {tabAllQuotas} (<span>{quotationsCount}</span>)
           </span>
         </div>
 
@@ -99,7 +80,7 @@ export function Tabs(props: TabsType) {
               activeTab === 'pending' && 'font-bold'
             )}
           >
-            Pending (<span>{tabCounts.pendingCount}</span>)
+            {tabPendingQuotas} (<span>{pendingCount}</span>)
           </span>
         </div>
 
@@ -123,7 +104,7 @@ export function Tabs(props: TabsType) {
               activeTab === 'rejected' && 'font-bold'
             )}
           >
-            Rejected (<span>{tabCounts.rejectedCount}</span>)
+            {tabRejectedQuotas} (<span>{rejectedCount}</span>)
           </span>
         </div>
 
@@ -147,7 +128,7 @@ export function Tabs(props: TabsType) {
               activeTab === 'approved' && 'font-bold'
             )}
           >
-            Approved (<span>{tabCounts.approvedCount}</span>)
+            {tabApprovedQuotas} (<span>{approvedCount}</span>)
           </span>
         </div>
 
@@ -172,8 +153,7 @@ export function Tabs(props: TabsType) {
               activeTab === 'sending_approval_request' && 'font-bold'
             )}
           >
-            Requires My Approval (
-            <span>{tabCounts.sendingApprovalRequestCount}</span>)
+            {tabRequiresMyApproval} (<span>{sendingApprovalRequestCount}</span>)
           </span>
         </div>
 

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

@@ -1,7 +1,6 @@
 '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';
@@ -13,27 +12,51 @@ interface GetResponse<T> {
   results: T[];
 }
 
-export function StoreModal({
-  storeData,
-  productPk,
-  open,
-  setOpen
-}: {
+interface StoreModalTranslationsProps {
+  modalTitle: string;
+  storeName: string;
+  quantity: string;
+  validQuantity: string;
+  addToBasket: string;
+}
+
+interface StoreModalProps {
   storeData: GetResponse<Division>;
   productPk: number;
   open: boolean;
   setOpen: (open: boolean) => void;
-}) {
+  translations?: Record<string, any>;
+}
+
+export function StoreModal({
+  storeData,
+  productPk,
+  open,
+  setOpen,
+  translations
+}: StoreModalProps) {
   const initialStateSelectStore = {
     id: null,
     quantity: '0'
   };
 
-  const { t } = useLocalization();
   const [addToBasket] = useAddToBasketMutation();
   const [selectedStore, setSelectedStore] = useState(initialStateSelectStore);
   const inputRefs = {};
 
+  const defaultTranslations: StoreModalTranslationsProps = {
+    modalTitle: 'Select Store',
+    storeName: 'Store Name',
+    quantity: 'Quantity',
+    validQuantity: 'Please enter a valid quantity',
+    addToBasket: 'Add to Basket'
+  };
+
+  const mergedTranslations = useMemo(
+    () => ({ ...defaultTranslations, ...translations }),
+    [translations]
+  );
+
   const handleRadioChange = (storeId) => {
     setSelectedStore((prevSelectedStore) => ({
       ...prevSelectedStore,
@@ -92,7 +115,7 @@ export function StoreModal({
       <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')}
+            {mergedTranslations.modalTitle}
           </h3>
           <button
             className="absolute right-[15px] md:right-[30px] top-5"
@@ -110,10 +133,10 @@ export function StoreModal({
               <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')}
+                  {mergedTranslations.storeName}
                 </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')}
+                  {mergedTranslations.quantity}
                 </th>
               </tr>
             </thead>
@@ -150,7 +173,7 @@ export function StoreModal({
           </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>
+            <p hidden>{mergedTranslations.validQuantity}</p>
 
             <button
               className={twMerge(
@@ -160,7 +183,7 @@ export function StoreModal({
               onClick={handleAddToBasket}
               disabled={isButtonDisabled}
             >
-              {t('product.store_select_modal.add_to_basket')}
+              {mergedTranslations.addToBasket}
             </button>
           </div>
         </div>