@akinon/next 1.17.0 → 1.18.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @akinon/next
 
+## 1.18.0
+
+### Minor Changes
+
+- db017b2c: ZERO-2271: Fix showing currency code instead of label
+- db017b2c: ZERO-2389: Show card logo in credit card form
+- db017b2c: ZERO-2387: Add sorting by date in orders page
+- db017b2c: ZERO-2377: Add B2B plugin
+
+### Patch Changes
+
+- db017b2c: ZERO-2417: Update basket_offers type in Product interface
+
+## 1.17.1
+
 ## 1.17.0
 
 ## 1.16.3

package/components/index.ts

@@ -16,3 +16,5 @@ export * from './radio';
 export * from './react-portal';
 export * from './selected-payment-option-view';
 export * from './trans';
+export * from './link';
+export * from './pagination';

package/components/link.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { useLocalization } from '@akinon/next/hooks';
+import { LocaleUrlStrategy } from '@akinon/next/localization';
+import { urlLocaleMatcherRegex } from '@akinon/next/utils';
+import NextLink, { LinkProps as NextLinkProps } from 'next/link';
+import { useEffect, useState } from 'react';
+
+interface LinkProps extends NextLinkProps {
+  children: React.ReactNode;
+  className?: string;
+  target?: '_blank' | '_self' | '_parent' | '_top';
+}
+
+export const Link = ({
+  children,
+  target,
+  className,
+  href,
+  ...rest
+}: LinkProps) => {
+  const { locale, defaultLocaleValue, localeUrlStrategy } = useLocalization();
+  const [formattedHref, setFormattedHref] = useState(href ?? '#');
+
+  useEffect(() => {
+    if (typeof href !== 'string') return;
+    if (href.startsWith('http')) return;
+
+    const pathnameWithoutLocale = href.replace(urlLocaleMatcherRegex, '');
+    const hrefWithLocale = `/${locale}${pathnameWithoutLocale}`;
+
+    if (localeUrlStrategy === LocaleUrlStrategy.ShowAllLocales) {
+      setFormattedHref(hrefWithLocale);
+    } else if (
+      localeUrlStrategy === LocaleUrlStrategy.HideDefaultLocale &&
+      locale !== defaultLocaleValue
+    ) {
+      setFormattedHref(hrefWithLocale);
+    }
+  }, [href, defaultLocaleValue, locale, localeUrlStrategy]);
+
+  return (
+    <NextLink
+      href={formattedHref}
+      target={target}
+      className={className}
+      {...rest}
+    >
+      {children}
+    </NextLink>
+  );
+};

package/components/pagination.tsx

@@ -0,0 +1,194 @@
+'use client';
+
+import { MouseEvent, useCallback, useEffect, useState } from 'react';
+import { PaginationProps } from '@theme/components/types';
+import { twMerge } from 'tailwind-merge';
+import clsx from 'clsx';
+
+import usePagination from '@akinon/next/hooks/use-pagination';
+import { useLocalization } from '@akinon/next/hooks';
+import { useRouter } from '@akinon/next/hooks';
+import { Link } from './link';
+
+export const Pagination = (props: PaginationProps) => {
+  const { t } = useLocalization();
+  const router = useRouter();
+  const {
+    total,
+    limit,
+    currentPage,
+    numberOfPages,
+    containerClassName,
+    prevClassName,
+    pageClassName,
+    nextClassName,
+    threshold = 1,
+    render
+  } = props;
+
+  const pagination = usePagination(total, limit, currentPage, numberOfPages);
+  const {
+    total: paginationTotal,
+    limit: paginationLimit,
+    page,
+    pageList,
+    prev,
+    next,
+    setTotal,
+    setLimit
+  } = pagination;
+
+  const [paginationItems, setPaginationItems] = useState([]);
+  const showNext = currentPage * paginationLimit < total;
+
+  const createListItems = useCallback(() => {
+    setPaginationItems([]);
+    const delta = 2;
+    const startPage = Math.max(Number(page) - delta, 1);
+    const endPage = Math.min(Number(page) + delta, numberOfPages);
+
+    setPaginationItems((prev) => [
+      ...prev,
+      {
+        page: pageList[0].page,
+        url: pageList[0].url
+      }
+    ]);
+
+    if (delta < startPage) {
+      setPaginationItems((prev) => [...prev, { page: '...', url: '#' }]);
+    }
+
+    for (let i = startPage; i <= endPage; i++) {
+      if (i === 1) continue;
+
+      setPaginationItems((prev) => [
+        ...prev,
+        {
+          page: pageList[i - 1]?.page,
+          url: pageList[i - 1]?.url
+        }
+      ]);
+    }
+
+    if (endPage < numberOfPages - threshold) {
+      setPaginationItems((prev) => [...prev, { page: '...', url: '#' }]);
+    }
+
+    if (page < numberOfPages - delta) {
+      setPaginationItems((prev) => [
+        ...prev,
+        {
+          page: pageList[pageList.length - threshold].page,
+          url: pageList[pageList.length - threshold].url
+        }
+      ]);
+    }
+  }, [numberOfPages, page, pageList, threshold]);
+
+  const handleClick = (e: MouseEvent<HTMLAnchorElement>, url: string) => {
+    e.preventDefault();
+
+    const newUrl = new URL(url, window.location.origin);
+    const page = newUrl.searchParams.get('page');
+
+    if (page === '1') {
+      newUrl.searchParams.delete('page');
+    }
+
+    router.push(newUrl.pathname + newUrl.search, undefined);
+  };
+
+  useEffect(() => {
+    createListItems();
+  }, [createListItems, page]);
+
+  useEffect(() => {
+    if (total && total !== paginationTotal) {
+      setTotal(total);
+    }
+  }, [total, paginationTotal, setTotal]);
+
+  useEffect(() => {
+    if (limit && limit !== paginationLimit) {
+      setLimit(limit);
+    }
+  }, [limit, paginationLimit, setLimit]);
+
+  if (render) {
+    return <>{render(pagination)}</>;
+  }
+
+  return (
+    <ul
+      className={twMerge(
+        'flex mt-8 mb-4 justify-center items-center',
+        containerClassName
+      )}
+    >
+      {prev && (
+        <li>
+          <Link
+            onClick={(e) => handleClick(e, prev)}
+            href={prev}
+            className={twMerge(
+              'flex cursor-pointer text-sm px-2',
+              prevClassName
+            )}
+          >
+            <span>&lt;</span>
+            <span className="hidden lg:inline-block ms-4">
+              {t('category.pagination.previous')}
+            </span>
+          </Link>
+        </li>
+      )}
+
+      {paginationItems &&
+        paginationItems?.map((item, i) => (
+          <li key={i}>
+            {item?.url != '#' ? (
+              <Link
+                onClick={(e) => handleClick(e, item.url)}
+                href={item.url}
+                className={twMerge(
+                  clsx(
+                    'text-xs px-2 cursor-pointer',
+                    { 'pointer-events-none': item.url === null },
+                    Number(page) === Number(item?.page)
+                      ? 'font-semibold text-black-800'
+                      : 'text-gray-400'
+                  ),
+                  pageClassName
+                )}
+              >
+                {item?.page}
+              </Link>
+            ) : (
+              <span className="cursor-default text-xs flex items-center justify-center">
+                {item?.page}
+              </span>
+            )}
+          </li>
+        ))}
+
+      {showNext && (
+        <li>
+          <Link
+            onClick={(e) => handleClick(e, next)}
+            href={next}
+            className={twMerge(
+              'flex cursor-pointer text-xs px-2',
+              nextClassName
+            )}
+          >
+            <span className="hidden lg:inline-block me-4">
+              {t('category.pagination.next')}
+            </span>
+            <span>&gt;</span>
+          </Link>
+        </li>
+      )}
+    </ul>
+  );
+};

package/components/plugin-module.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import dynamic from 'next/dynamic';
 import plugins from 'plugins';
 import logger from '../utils/log';
@@ -12,7 +14,8 @@ enum Plugin {
   GPay = 'pz-gpay',
   Otp = 'pz-otp',
   BKMExpress = 'pz-bkm',
-  CreditPayment = 'pz-credit-payment'
+  CreditPayment = 'pz-credit-payment',
+  B2B = 'pz-b2b'
 }
 
 export enum Component {
@@ -24,7 +27,9 @@ export enum Component {
   GPay = 'GPayOption',
   Otp = 'Otp',
   BKMExpress = 'BKMOption',
-  CreditPayment = 'CreditPayment'
+  CreditPayment = 'CreditPayment',
+  MyQuotationsB2B = 'AccountMyQuotations',
+  BasketB2B = 'BasketB2b'
 }
 
 const PluginComponents = new Map([
@@ -36,7 +41,8 @@ const PluginComponents = new Map([
   [Plugin.GPay, [Component.GPay]],
   [Plugin.Otp, [Component.Otp]],
   [Plugin.BKMExpress, [Component.BKMExpress]],
-  [Plugin.CreditPayment, [Component.CreditPayment]]
+  [Plugin.CreditPayment, [Component.CreditPayment]],
+  [Plugin.B2B, [Component.MyQuotationsB2B, Component.BasketB2B]],
 ]);
 
 const getPlugin = (component: Component) => {
@@ -81,6 +87,8 @@ export default function PluginModule({
               promise = import(`${'@akinon/pz-bkm'}`);
             } else if (plugin === Plugin.CreditPayment) {
               promise = import(`${'@akinon/pz-credit-payment'}`);
+            } else if (plugin === Plugin.B2B) {
+              promise = import(`${'@akinon/pz-b2b'}`);
             }
           } catch (error) {
             logger.error(error);

package/data/client/account.ts

@@ -20,6 +20,7 @@ interface GetOrdersParams {
   limit?: number;
   page?: number;
   createdDate?: string;
+  endDate?: string;
 }
 
 export interface GetQuotationsResponse {
@@ -105,8 +106,10 @@ const accountApi = api.injectEndpoints({
       query: (id) => buildClientRequestUrl(account.orderId(id))
     }),
     getOrders: builder.query<GetOrdersResponse, GetOrdersParams>({
-      query: ({ page, limit, createdDate } = {}) =>
-        buildClientRequestUrl(account.getOrders({ page, limit, createdDate }))
+      query: ({ page, limit, createdDate, endDate } = {}) =>
+        buildClientRequestUrl(
+          account.getOrders({ page, limit, createdDate, endDate })
+        )
     }),
     getQuotations: builder.query<GetQuotationsResponse, void>({
       query: () => buildClientRequestUrl(account.getQuotations)

package/data/client/checkout.ts

@@ -4,7 +4,8 @@ import {
   setPaymentStepBusy,
   setSelectedBankAccountPk,
   setSelectedCreditPaymentPk,
-  setShippingStepBusy
+  setShippingStepBusy,
+  setCardType
 } from '../../redux/reducers/checkout';
 import {
   CheckoutContext,
@@ -231,6 +232,7 @@ export const checkoutApi = api.injectEndpoints({
         dispatch(setInstallmentOptions([]));
         dispatch(setBankAccounts([]));
         dispatch(setSelectedBankAccountPk(null));
+        dispatch(setCardType(null));
         await queryFulfilled;
         dispatch(setPaymentStepBusy(false));
       }
@@ -256,6 +258,7 @@ export const checkoutApi = api.injectEndpoints({
       },
       async onQueryStarted(arg, { dispatch, queryFulfilled }) {
         dispatch(setPaymentStepBusy(true));
+        dispatch(setCardType(arg));
         await queryFulfilled;
         dispatch(setPaymentStepBusy(false));
       }

package/data/urls.ts

@@ -16,15 +16,17 @@ export const account = {
   getOrders: ({
     page,
     limit,
-    createdDate
+    createdDate,
+    endDate
   }: {
     page?: number;
     limit?: number;
     createdDate?: string;
+    endDate?: string;
   }) =>
     `/users/orders/?page=${page || 1}&limit=${limit || 12} ${
       createdDate ? `&created_date__gte=${createdDate}` : ''
-    }`,
+    } ${endDate ? `&created_date__lte=${endDate}` : ''}`,
   getQuotations: '/b2b/my-quotations',
   sendContact: '/users/contact-us',
   passwordReset: (slug: string) => `/users/reset/${slug}`,

package/hooks/index.ts

@@ -8,3 +8,4 @@ export * from './use-media-query';
 export * from './use-on-click-outside';
 export * from './use-mobile-iframe-handler';
 export * from './use-payment-options';
+export * from './use-pagination';

package/hooks/use-pagination.ts

@@ -0,0 +1,136 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useReducer } from 'react';
+import { usePathname, useSearchParams } from 'next/navigation';
+
+export type UsePaginationType = ReturnType<typeof usePagination>;
+
+type InitialState = {
+  page: number;
+  last: number;
+  limit: number;
+  total: number;
+};
+
+type ACTIONTYPE =
+  | { type: 'setPage'; payload: number }
+  | { type: 'setTotal'; payload: number }
+  | { type: 'setLimit'; payload: number };
+
+function reducer(state: InitialState, action: ACTIONTYPE) {
+  switch (action.type) {
+    case 'setTotal':
+      return {
+        ...state,
+        total: action.payload,
+        last: Math.ceil(action.payload / state.limit)
+      };
+    case 'setPage':
+      return { ...state, page: action.payload };
+    case 'setLimit':
+      return { ...state, limit: action.payload };
+    default:
+      throw new Error();
+  }
+}
+
+export default function usePagination(
+  _total = 0,
+  _limit = 12,
+  _page: number | undefined,
+  _last: number | undefined
+) {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const urlSearchParams = useMemo(
+    () => new URLSearchParams(searchParams.toString()),
+    [searchParams]
+  );
+  const { page, limit } = useMemo(
+    () => ({
+      page: _page || Number(searchParams.get('page')) || 1,
+      limit: _limit || Number(searchParams.get('limit'))
+    }),
+    [searchParams, _page, _limit]
+  );
+
+  const initialState: InitialState = {
+    page,
+    limit,
+    last: _last || Math.ceil(_total / limit) || 1,
+    total: _total
+  };
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  useEffect(() => {
+    dispatch({ type: 'setPage', payload: page });
+  }, [page]);
+
+  useEffect(() => {
+    dispatch({ type: 'setLimit', payload: limit });
+  }, [limit]);
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [state.page, state.limit]);
+
+  const setTotal = useCallback(
+    (total: number) => {
+      dispatch({ type: 'setTotal', payload: total });
+    },
+    [dispatch]
+  );
+
+  const setPage = useCallback(
+    (page: number) => {
+      if (page > 0 && page <= state.total) {
+        dispatch({ type: 'setPage', payload: page });
+      }
+    },
+    [dispatch, state.total]
+  );
+
+  const setLimit = useCallback(
+    (limit: number) => {
+      dispatch({ type: 'setLimit', payload: limit });
+    },
+    [dispatch]
+  );
+
+  const pageList = useMemo(() => {
+    return Array.from({ length: state.last }, (_, i) => {
+      urlSearchParams.set('page', (i + 1).toString());
+
+      return {
+        page: i + 1,
+        url: `${pathname}?${urlSearchParams.toString()}`
+      };
+    });
+  }, [state.last, pathname, urlSearchParams]);
+
+  const prev = useMemo(() => {
+    if (state.page > 1) {
+      urlSearchParams.set('page', (Number(state.page) - 1).toString());
+      return `${pathname}?${urlSearchParams.toString()}`;
+    }
+    return null;
+  }, [state.page, pathname, urlSearchParams]);
+
+  const next = useMemo(() => {
+    if (Number(state.page) < Number(state.last)) {
+      urlSearchParams.set('page', (Number(state.page) + 1).toString());
+      return `${pathname}?${urlSearchParams.toString()}`;
+    }
+    return null;
+  }, [state.page, state.last, pathname, urlSearchParams]);
+
+  return {
+    ...state,
+    setTotal,
+    setPage,
+    setLimit,
+    pageList,
+    prev,
+    next
+  };
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@akinon/next",
   "description": "Core package for Project Zero Next",
-  "version": "1.17.0",
+  "version": "1.18.0",
   "private": false,
   "license": "MIT",
   "bin": {
@@ -31,7 +31,7 @@
     "@typescript-eslint/eslint-plugin": "6.7.4",
     "@typescript-eslint/parser": "6.7.4",
     "eslint": "^8.14.0",
-    "@akinon/eslint-plugin-projectzero": "1.17.0",
+    "@akinon/eslint-plugin-projectzero": "1.18.0",
     "eslint-config-prettier": "8.5.0"
   }
 }

package/plugins.js

@@ -8,4 +8,5 @@ module.exports = [
   'pz-otp',
   'pz-bkm',
   'pz-credit-payment',
+  'pz-b2b'
 ];

package/types/commerce/product.ts

@@ -10,14 +10,14 @@ export interface Product {
   };
   attributes_kwargs: any;
   base_code: string;
-  basket_offers: {
+  basket_offers: Array<{
     kwargs: { show_benefit_products: boolean };
     label: string;
     listing_kwargs: {
       [key: string]: any;
     };
     pk: number;
-  };
+  }>;
   currency_type: string;
   data_source: null;
   extra_attributes: {

package/utils/get-currency-label.ts

@@ -0,0 +1,9 @@
+import settings from 'settings';
+
+export const getCurrencyLabel = (currencyCode: string) => {
+  const currencyLabel = settings.localization.currencies.find(
+    (item) => item.code === currencyCode
+  )?.label;
+
+  return currencyLabel ?? currencyCode;
+};

package/utils/get-currency.ts

@@ -1,6 +1,7 @@
 'use client'
 
 import getSymbolFromCurrency from 'currency-symbol-map';
+import { getCurrencyLabel } from './get-currency-label';
 
 type GetCurrencyType = {
   currencyCode: string;
@@ -17,10 +18,11 @@ export const getCurrency = (args: GetCurrencyType) => {
     useCurrencySpace = true
   } = args;
 
+  const currencyLabel =  getCurrencyLabel(currencyCode);
   const currencySpace = useCurrencySpace ? ' ' : '';
   const currency = useCurrencySymbol
-    ? `${getSymbolFromCurrency(currencyCode)}`
-    : currencyCode;
+    ? `${getSymbolFromCurrency(currencyLabel)}`
+    : currencyLabel;
   const currencyAfterPrice = useCurrencyAfterPrice
     ? `${currencySpace}${currency}`
     : `${currency}${currencySpace}`;

package/utils/index.ts

@@ -5,6 +5,7 @@ import { CDNOptions, ClientRequestOptions } from '../types';
 export * from './get-currency';
 export * from './menu-generator';
 export * from './generate-commerce-search-params';
+export * from './get-currency-label';
 
 export function getCookie(name: string) {
   if (typeof document === 'undefined') {