@akinon/next 1.17.1 → 1.19.0

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/hooks/use-payment-options.ts

@@ -18,6 +18,7 @@ export const usePaymentOptions = () => {
     pay_on_delivery: 'pz-pay-on-delivery',
     bkm_express: 'pz-bkm',
     credit_payment: 'pz-credit-payment',
+    masterpass: 'pz-masterpass'
   };
 
   const isInitialTypeIncluded = (type: string) => initialTypes.has(type);

package/middlewares/complete-masterpass.ts

@@ -0,0 +1,159 @@
+import { NextFetchEvent, NextMiddleware, NextResponse } from 'next/server';
+import Settings from 'settings';
+import { Buffer } from 'buffer';
+import logger from '../utils/log';
+import { getUrlPathWithLocale } from '../utils/localization';
+import { PzNextRequest } from '.';
+
+const streamToString = async (stream: ReadableStream<Uint8Array> | null) => {
+  if (stream) {
+    const chunks = [];
+    let result = '';
+
+    try {
+      for await (const chunk of stream as any) {
+        chunks.push(Buffer.from(chunk));
+      }
+
+      result = Buffer.concat(chunks).toString('utf-8');
+    } catch (error) {
+      logger.error('Error while reading body stream', {
+        middleware: 'complete-masterpass',
+        error
+      });
+    }
+
+    return result;
+  }
+  return null;
+};
+
+const withCompleteMasterpass =
+  (middleware: NextMiddleware) =>
+  async (req: PzNextRequest, event: NextFetchEvent) => {
+    const url = req.nextUrl.clone();
+    const ip = req.headers.get('x-forwarded-for') ?? '';
+
+    if (url.search.indexOf('MasterpassCompletePage') === -1) {
+      return middleware(req, event);
+    }
+
+    const requestUrl = `${Settings.commerceUrl}/orders/checkout/${url.search}`;
+    const requestHeaders = {
+      'X-Requested-With': 'XMLHttpRequest',
+      'Content-Type': 'application/x-www-form-urlencoded',
+      Cookie: `osessionid=${req.cookies.get('osessionid')?.value ?? ''}`,
+      'x-currency': req.cookies.get('pz-currency')?.value ?? ''
+    };
+
+    try {
+      const body = await streamToString(req.body);
+
+      const request = await fetch(requestUrl, {
+        method: 'POST',
+        headers: requestHeaders,
+        body
+      });
+
+      logger.info('Complete Masterpass payment request', {
+        requestUrl,
+        status: request.status,
+        requestHeaders,
+        ip
+      });
+
+      const response = await request.json();
+
+      const { context_list: contextList, errors } = response;
+      const redirectionContext = contextList?.find(
+        (context) => context.page_context?.redirect_url
+      );
+      const redirectUrl = redirectionContext?.page_context?.redirect_url;
+
+      if (errors && Object.keys(errors).length) {
+        logger.error('Error while completing Masterpass payment', {
+          middleware: 'complete-masterpass',
+          errors,
+          requestHeaders,
+          ip
+        });
+
+        return NextResponse.redirect(
+          `${url.origin}${getUrlPathWithLocale(
+            '/orders/checkout/',
+            req.cookies.get('pz-locale')?.value
+          )}`,
+          {
+            status: 303,
+            headers: {
+              'Set-Cookie': `pz-pos-error=${JSON.stringify(errors)}; path=/;`
+            }
+          }
+        );
+      }
+
+      logger.info('Order success page context list', {
+        middleware: 'complete-masterpass',
+        contextList,
+        ip
+      });
+
+      if (!redirectUrl) {
+        logger.warn(
+          'No redirection url for order success page found in page_context. Redirecting to checkout page.',
+          {
+            middleware: 'complete-masterpass',
+            requestHeaders,
+            response: JSON.stringify(response),
+            ip
+          }
+        );
+
+        const redirectUrlWithLocale = `${url.origin}${getUrlPathWithLocale(
+          '/orders/checkout/',
+          req.cookies.get('pz-locale')?.value
+        )}`;
+
+        return NextResponse.redirect(redirectUrlWithLocale, 303);
+      }
+
+      const redirectUrlWithLocale = `${url.origin}${getUrlPathWithLocale(
+        redirectUrl,
+        req.cookies.get('pz-locale')?.value
+      )}`;
+
+      logger.info('Redirecting to order success page', {
+        middleware: 'complete-masterpass',
+        redirectUrlWithLocale,
+        ip
+      });
+
+      // Using POST method while redirecting causes an error,
+      // So we use 303 status code to change the method to GET
+      const nextResponse = NextResponse.redirect(redirectUrlWithLocale, 303);
+
+      nextResponse.headers.set(
+        'Set-Cookie',
+        request.headers.get('set-cookie') ?? ''
+      );
+
+      return nextResponse;
+    } catch (error) {
+      logger.error('Error while completing Masterpass payment', {
+        middleware: 'complete-masterpass',
+        error,
+        requestHeaders,
+        ip
+      });
+
+      return NextResponse.redirect(
+        `${url.origin}${getUrlPathWithLocale(
+          '/orders/checkout/',
+          req.cookies.get('pz-locale')?.value
+        )}`,
+        303
+      );
+    }
+  };
+
+export default withCompleteMasterpass;

package/middlewares/default.ts

@@ -3,6 +3,7 @@ import Settings from 'settings';
 import {
   PzNextRequest,
   withCompleteGpay,
+  withCompleteMasterpass,
   withOauthLogin,
   withPrettyUrl,
   withRedirectionPayment,
@@ -124,61 +125,74 @@ const withPzDefault =
               withThreeDRedirection(
                 withUrlRedirection(
                   withCompleteGpay(
-                    async (req: PzNextRequest, event: NextFetchEvent) => {
-                      let middlewareResult: NextResponse | void =
-                        NextResponse.next();
+                    withCompleteMasterpass(
+                      async (req: PzNextRequest, event: NextFetchEvent) => {
+                        let middlewareResult: NextResponse | void =
+                          NextResponse.next();
 
-                      try {
-                        const { locale, prettyUrl, currency } =
-                          req.middlewareParams.rewrites;
-                        const { defaultLocaleValue } = Settings.localization;
-                        const url = req.nextUrl.clone();
-                        const pathnameWithoutLocale = url.pathname.replace(
-                          urlLocaleMatcherRegex,
-                          ''
-                        );
-
-                        url.basePath = `/${commerceUrl}`;
-                        url.pathname = `/${
-                          locale.length ? `${locale}/` : ''
-                        }${currency}${prettyUrl ?? pathnameWithoutLocale}`;
-
-                        Settings.rewrites.forEach((rewrite) => {
-                          url.pathname = url.pathname.replace(
-                            rewrite.source,
-                            rewrite.destination
+                        try {
+                          const { locale, prettyUrl, currency } =
+                            req.middlewareParams.rewrites;
+                          const { defaultLocaleValue } = Settings.localization;
+                          const url = req.nextUrl.clone();
+                          const pathnameWithoutLocale = url.pathname.replace(
+                            urlLocaleMatcherRegex,
+                            ''
                           );
-                        });
 
-                        middlewareResult = (await middleware(
-                          req,
-                          event
-                        )) as NextResponse | void;
+                          url.basePath = `/${commerceUrl}`;
+                          url.pathname = `/${
+                            locale.length ? `${locale}/` : ''
+                          }${currency}${prettyUrl ?? pathnameWithoutLocale}`;
 
-                        // if middleware.ts has a return value for current url
-                        if (middlewareResult instanceof NextResponse) {
-                          // pz-override-response header is used to prevent 404 page for custom responses.
-                          if (
-                            middlewareResult.headers.get(
-                              'pz-override-response'
-                            ) !== 'true'
-                          ) {
-                            middlewareResult.headers.set(
-                              'x-middleware-rewrite',
-                              url.href
+                          Settings.rewrites.forEach((rewrite) => {
+                            url.pathname = url.pathname.replace(
+                              rewrite.source,
+                              rewrite.destination
                             );
-                          }
-                        } else {
-                          // if middleware.ts doesn't have a return value.
-                          // e.g. NextResponse.next() doesn't exist in middleware.ts
+                          });
 
-                          middlewareResult = NextResponse.rewrite(url);
-                        }
+                          middlewareResult = (await middleware(
+                            req,
+                            event
+                          )) as NextResponse | void;
 
-                        if (!url.pathname.startsWith(`/${currency}/orders`)) {
+                          // if middleware.ts has a return value for current url
+                          if (middlewareResult instanceof NextResponse) {
+                            // pz-override-response header is used to prevent 404 page for custom responses.
+                            if (
+                              middlewareResult.headers.get(
+                                'pz-override-response'
+                              ) !== 'true'
+                            ) {
+                              middlewareResult.headers.set(
+                                'x-middleware-rewrite',
+                                url.href
+                              );
+                            }
+                          } else {
+                            // if middleware.ts doesn't have a return value.
+                            // e.g. NextResponse.next() doesn't exist in middleware.ts
+
+                            middlewareResult = NextResponse.rewrite(url);
+                          }
+
+                          if (!url.pathname.startsWith(`/${currency}/orders`)) {
+                            middlewareResult.cookies.set(
+                              'pz-locale',
+                              locale?.length > 0 ? locale : defaultLocaleValue,
+                              {
+                                sameSite: 'none',
+                                secure: true,
+                                expires: new Date(
+                                  Date.now() + 1000 * 60 * 60 * 24 * 7
+                                ) // 7 days
+                              }
+                            );
+                          }
                           middlewareResult.cookies.set(
-                            'pz-locale',
-                            locale?.length > 0 ? locale : defaultLocaleValue,
+                            'pz-currency',
+                            currency,
                             {
                               sameSite: 'none',
                               secure: true,
@@ -187,65 +201,63 @@ const withPzDefault =
                               ) // 7 days
                             }
                           );
-                        }
-                        middlewareResult.cookies.set('pz-currency', currency, {
-                          sameSite: 'none',
-                          secure: true,
-                          expires: new Date(Date.now() + 1000 * 60 * 60 * 24 * 7) // 7 days
-                        });
-
-                        if (
-                          req.cookies.get('pz-locale') &&
-                          req.cookies.get('pz-locale').value !== locale
-                        ) {
-                          logger.debug('Locale changed', {
-                            locale,
-                            oldLocale: req.cookies.get('pz-locale')?.value,
-                            ip
-                          });
-                        }
-
-                        middlewareResult.headers.set(
-                          'pz-url',
-                          req.nextUrl.toString()
-                        );
 
-                        if (req.cookies.get('pz-set-currency')) {
-                          middlewareResult.cookies.delete('pz-set-currency');
-                        }
+                          if (
+                            req.cookies.get('pz-locale') &&
+                            req.cookies.get('pz-locale').value !== locale
+                          ) {
+                            logger.debug('Locale changed', {
+                              locale,
+                              oldLocale: req.cookies.get('pz-locale')?.value,
+                              ip
+                            });
+                          }
 
-                        if (process.env.ACC_APP_VERSION) {
                           middlewareResult.headers.set(
-                            'acc-app-version',
-                            process.env.ACC_APP_VERSION
+                            'pz-url',
+                            req.nextUrl.toString()
                           );
-                        }
 
-                        // Set CSRF token if not set
-                        try {
-                          const url = `${Settings.commerceUrl}${user.csrfToken}`;
+                          if (req.cookies.get('pz-set-currency')) {
+                            middlewareResult.cookies.delete('pz-set-currency');
+                          }
 
-                          if (!req.cookies.get('csrftoken')) {
-                            const { csrf_token } = await (
-                              await fetch(url)
-                            ).json();
-                            middlewareResult.cookies.set('csrftoken', csrf_token);
+                          if (process.env.ACC_APP_VERSION) {
+                            middlewareResult.headers.set(
+                              'acc-app-version',
+                              process.env.ACC_APP_VERSION
+                            );
+                          }
+
+                          // Set CSRF token if not set
+                          try {
+                            const url = `${Settings.commerceUrl}${user.csrfToken}`;
+
+                            if (!req.cookies.get('csrftoken')) {
+                              const { csrf_token } = await (
+                                await fetch(url)
+                              ).json();
+                              middlewareResult.cookies.set(
+                                'csrftoken',
+                                csrf_token
+                              );
+                            }
+                          } catch (error) {
+                            logger.error('CSRF Error', {
+                              error,
+                              ip
+                            });
                           }
                         } catch (error) {
-                          logger.error('CSRF Error', {
+                          logger.error('withPzDefault Error', {
                             error,
                             ip
                           });
                         }
-                      } catch (error) {
-                        logger.error('withPzDefault Error', {
-                          error,
-                          ip
-                        });
-                      }
 
-                      return middlewareResult;
-                    }
+                        return middlewareResult;
+                      }
+                    )
                   )
                 )
               )

package/middlewares/index.ts

@@ -6,6 +6,7 @@ import withLocale from './locale';
 import withOauthLogin from './oauth-login';
 import withUrlRedirection from './url-redirection';
 import withCompleteGpay from './complete-gpay';
+import withCompleteMasterpass from './complete-masterpass';
 import { NextRequest } from 'next/server';
 
 export {
@@ -16,7 +17,8 @@ export {
   withLocale,
   withOauthLogin,
   withUrlRedirection,
-  withCompleteGpay
+  withCompleteGpay,
+  withCompleteMasterpass
 };
 
 export interface PzNextRequest extends NextRequest {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@akinon/next",
   "description": "Core package for Project Zero Next",
-  "version": "1.17.1",
+  "version": "1.19.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.1",
+    "@akinon/eslint-plugin-projectzero": "1.19.0",
     "eslint-config-prettier": "8.5.0"
   }
 }

package/plugins.d.ts

@@ -0,0 +1,3 @@
+declare module '@akinon/pz-masterpass' {
+  export const masterpassReducer: unknown;
+}

package/plugins.js

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

package/redux/reducers/index.ts

@@ -4,12 +4,16 @@ import configReducer from './config';
 import headerReducer from './header';
 import { api } from '../../data/client/api';
 
+// Plugin reducers
+import { masterpassReducer } from '@akinon/pz-masterpass';
+
 const reducers = {
   [api.reducerPath]: api.reducer,
   root: rootReducer,
   checkout: checkoutReducer,
   config: configReducer,
-  header: headerReducer
+  header: headerReducer,
+  masterpass: masterpassReducer
 };
 
-export default reducers;
+export default reducers;

package/types/commerce/checkout.ts

@@ -117,6 +117,7 @@ export interface CheckoutContext {
     redirect_url?: string;
     context_data?: any;
     balance?: string;
+    [key: string]: any;
   };
 }
 

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') {