@akinon/next 1.17.1 → 1.19.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @akinon/next
 
+## 1.19.0
+
+### Minor Changes
+
+- 846e3200: ZERO-2287: Add pz-masterpass plugin
+
+## 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

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,9 @@ enum Plugin {
   GPay = 'pz-gpay',
   Otp = 'pz-otp',
   BKMExpress = 'pz-bkm',
-  CreditPayment = 'pz-credit-payment'
+  CreditPayment = 'pz-credit-payment',
+  Masterpass = 'pz-masterpass',
+  B2B = 'pz-b2b'
 }
 
 export enum Component {
@@ -24,7 +28,15 @@ export enum Component {
   GPay = 'GPayOption',
   Otp = 'Otp',
   BKMExpress = 'BKMOption',
-  CreditPayment = 'CreditPayment'
+  CreditPayment = 'CreditPayment',
+  MasterpassProvider = 'MasterpassProvider',
+  MasterpassCardList = 'MasterpassCardList',
+  MasterpassCardRegistration = 'MasterpassCardRegistration',
+  MasterpassDeleteConfirmationModal = 'MasterpassDeleteConfirmationModal',
+  MasterpassOtpModal = 'MasterpassOtpModal',
+  MasterpassLinkModal = 'MasterpassLinkModal',
+  MyQuotationsB2B = 'AccountMyQuotations',
+  BasketB2B = 'BasketB2b'
 }
 
 const PluginComponents = new Map([
@@ -36,7 +48,19 @@ 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.Masterpass,
+    [
+      Component.MasterpassCardList,
+      Component.MasterpassProvider,
+      Component.MasterpassCardRegistration,
+      Component.MasterpassDeleteConfirmationModal,
+      Component.MasterpassOtpModal,
+      Component.MasterpassLinkModal
+    ]
+  ],
+  [Plugin.B2B, [Component.MyQuotationsB2B, Component.BasketB2B]]
 ]);
 
 const getPlugin = (component: Component) => {
@@ -49,10 +73,12 @@ const getPlugin = (component: Component) => {
 
 export default function PluginModule({
   component,
-  props
+  props,
+  children
 }: {
   component: Component;
   props?: any;
+  children?: React.ReactNode;
 }) {
   const plugin = getPlugin(component);
 
@@ -81,6 +107,10 @@ export default function PluginModule({
               promise = import(`${'@akinon/pz-bkm'}`);
             } else if (plugin === Plugin.CreditPayment) {
               promise = import(`${'@akinon/pz-credit-payment'}`);
+            } else if (plugin === Plugin.Masterpass) {
+              promise = import(`${'@akinon/pz-masterpass'}`);
+            } else if (plugin === Plugin.B2B) {
+              promise = import(`${'@akinon/pz-b2b'}`);
             }
           } catch (error) {
             logger.error(error);
@@ -92,11 +122,15 @@ export default function PluginModule({
         },
         { ssr: false }
       ),
-    [plugin]
+    [plugin, component]
   );
 
   if (!(plugins as string[]).includes(plugin)) {
-    return null;
+    return <>{children}</>;
+  }
+
+  if (children) {
+    return <Component {...props}>{children}</Component>;
   }
 
   return <Component {...props} />;

package/components/selected-payment-option-view.tsx

@@ -50,6 +50,10 @@ export default function SelectedPaymentOptionView() {
               );
             } else if (payment_option.payment_type === 'loyalty_money') {
               promise = import(`views/checkout/steps/payment/options/loyalty`);
+            } else if (payment_option.payment_type === 'masterpass') {
+              promise = import(
+                `views/checkout/steps/payment/options/credit-card`
+              );
             }
             // else if (payment_option.payment_type === 'credit_payment') {
             //   promise = import(`views/checkout/steps/payment/options/credit-payment`);

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,
@@ -15,7 +16,17 @@ import {
 import { buildClientRequestUrl } from '../../utils';
 import { api } from './api';
 import { checkout } from '../urls';
-import { store } from 'redux/store';
+import { AppDispatch, AppStore, store } from 'redux/store';
+import settings from '@theme/settings';
+import { showMobile3dIframe } from '../../utils/mobile-3d-iframe';
+import {
+  setError,
+  setOtpModalVisible
+} from '@akinon/pz-masterpass/src/redux/reducer';
+import {
+  buildDirectPurchaseForm,
+  buildPurchaseForm
+} from '@akinon/pz-masterpass/src/utils';
 
 interface CheckoutResponse {
   pre_order?: PreOrder;
@@ -37,7 +48,7 @@ interface SetRetailStoreParams {
   billingAddressPk: number;
 }
 
-interface CompleteCreditCardParams {
+export interface CompleteCreditCardParams {
   card_holder: string;
   card_cvv: string;
   card_number: string;
@@ -65,6 +76,83 @@ export interface PayOnDeliveryParams {
   paymentType: string;
 }
 
+const completeMasterpassPayment = async (
+  params: CompleteCreditCardParams,
+  dispatch: AppDispatch,
+  context: CheckoutContext,
+  reduxStore: AppStore
+) => {
+  const state = reduxStore.getState();
+  const { token, order_no } = context.page_context;
+  const { endpoints: apiEndpoints } = checkoutApi;
+  const { preOrder } = state.checkout ?? {};
+
+  const { isDirectPurchase, referenceNo, credentials, msisdn, selectedCard } =
+    state.masterpass ?? {};
+
+  const commonFormValues = {
+    token,
+    orderNo: order_no,
+    referenceNo,
+    merchantId: credentials?.merchant_id ?? null,
+    msisdn,
+    amount: preOrder?.unpaid_amount?.replace('.', '') ?? ''
+  };
+
+  const form = isDirectPurchase
+    ? await buildDirectPurchaseForm(commonFormValues, params)
+    : await buildPurchaseForm({ ...commonFormValues, selectedCard });
+
+  window.MFS?.[
+    state.masterpass.isDirectPurchase ? 'directPurchase' : 'purchase'
+  ]($(form), async (statusCode, response) => {
+    if (response.responseCode == '5009') {
+      // TODO: Handle Digital Loan
+    }
+
+    if (response.responseCode == '5010') {
+      const { isMobileApp } = state.root;
+      const returnUrl = state.masterpass.credentials?.s3d_return_url;
+      const url =
+        response.url3D + '&returnUrl=' + encodeURIComponent(returnUrl);
+      const urlObj = new URL(url, window.location.origin);
+      urlObj.searchParams.set('t', new Date().getTime().toString());
+
+      if (
+        (isMobileApp ||
+          /iPad|iPhone|iPod|Android/i.test(navigator.userAgent)) &&
+        !settings.checkout?.iframeExcludedPaymentOptions?.includes(
+          preOrder?.payment_option?.slug
+        )
+      ) {
+        showMobile3dIframe(urlObj.toString());
+      } else {
+        window.location.href = urlObj.toString();
+      }
+
+      return;
+    }
+
+    if (response.responseCode == '5001') {
+      dispatch(setOtpModalVisible(true));
+      return;
+    }
+
+    if (
+      response.token &&
+      (response.responseCode == '0000' || response.responseCode == '')
+    ) {
+      dispatch(
+        apiEndpoints.completeMasterpassPayment.initiate({ token }) as any
+      );
+    }
+
+    if (response.responseDescription.length) {
+      dispatch(setError(response.responseDescription));
+    }
+  });
+};
+
 export const checkoutApi = api.injectEndpoints({
   endpoints: (build) => ({
     fetchCheckout: build.query<CheckoutResponse, void>({
@@ -100,19 +188,69 @@ export const checkoutApi = api.injectEndpoints({
         card_month,
         card_year,
         use_three_d = true
-      }) => ({
-        url: buildClientRequestUrl(checkout.completeCreditCardPayment, {
+      }) => {
+        const paymentOption =
+          store.getState().checkout?.preOrder?.payment_option;
+
+        if (paymentOption?.payment_type === 'masterpass') {
+          return {
+            url: buildClientRequestUrl(checkout.getMasterpassOrderNo, {
+              useFormData: true
+            }),
+            method: 'POST'
+          };
+        }
+
+        return {
+          url: buildClientRequestUrl(checkout.completeCreditCardPayment, {
+            useFormData: true
+          }),
+          method: 'POST',
+          body: {
+            agreement: '1',
+            use_three_d: use_three_d ? '1' : '0',
+            card_cvv,
+            card_holder,
+            card_month,
+            card_number,
+            card_year
+          }
+        };
+      },
+      async onQueryStarted(args, { dispatch, queryFulfilled }) {
+        dispatch(setPaymentStepBusy(true));
+        const { data } = await queryFulfilled;
+        const reduxStore = (await import('redux/store')).store;
+        const completePaymentContext = data?.context_list?.find(
+          (context) => context?.page_name === 'MasterpassCompletePage'
+        );
+
+        if (completePaymentContext) {
+          await completeMasterpassPayment(
+            args,
+            dispatch,
+            completePaymentContext,
+            reduxStore
+          );
+        }
+
+        dispatch(setPaymentStepBusy(false));
+      },
+      invalidatesTags: ['Basket']
+    }),
+    completeMasterpassPayment: build.mutation<
+      CheckoutResponse,
+      {
+        token: string;
+      }
+    >({
+      query: ({ token }) => ({
+        url: buildClientRequestUrl(checkout.completeMasterpassPayment, {
           useFormData: true
         }),
         method: 'POST',
         body: {
-          agreement: '1',
-          use_three_d: use_three_d ? '1' : '0',
-          card_cvv,
-          card_holder,
-          card_month,
-          card_number,
-          card_year
+          token
         }
       }),
       async onQueryStarted(arg, { dispatch, queryFulfilled }) {
@@ -231,6 +369,7 @@ export const checkoutApi = api.injectEndpoints({
         dispatch(setInstallmentOptions([]));
         dispatch(setBankAccounts([]));
         dispatch(setSelectedBankAccountPk(null));
+        dispatch(setCardType(null));
         await queryFulfilled;
         dispatch(setPaymentStepBusy(false));
       }
@@ -256,6 +395,7 @@ export const checkoutApi = api.injectEndpoints({
       },
       async onQueryStarted(arg, { dispatch, queryFulfilled }) {
         dispatch(setPaymentStepBusy(true));
+        dispatch(setCardType(arg));
         await queryFulfilled;
         dispatch(setPaymentStepBusy(false));
       }
@@ -325,7 +465,7 @@ export const checkoutApi = api.injectEndpoints({
         }),
         method: 'POST',
         body: {
-          agreement: true,
+          agreement: true
         }
       }),
       async onQueryStarted(arg, { dispatch, queryFulfilled }) {

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}`,
@@ -77,6 +79,8 @@ export const checkout = {
   setPaymentOption: '/orders/checkout/?page=PaymentOptionSelectionPage',
   setBinNumber: '/orders/checkout/?page=BinNumberPage',
   setMasterpassBinNumber: '/orders/checkout/?page=MasterpassBinNumberPage',
+  getMasterpassOrderNo: '/orders/checkout/?page=MasterpassOrderNoPage',
+  completeMasterpassPayment: '/orders/checkout/?page=MasterpassCompletePage',
   setInstallmentOption: '/orders/checkout/?page=InstallmentSelectionPage',
   setMasterPassInstallmentOption:
     '/orders/checkout/?page=MasterpassInstallmentPage',

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';