@akinon/next 1.13.1 → 1.14.0

package/components/plugin-module.tsx

@@ -11,7 +11,8 @@ enum Plugin {
   CheckoutGiftPack = 'pz-checkout-gift-pack',
   GPay = 'pz-gpay',
   Otp = 'pz-otp',
-  BKMExpress = 'pz-bkm'
+  BKMExpress = 'pz-bkm',
+  Masterpass = 'pz-masterpass'
 }
 
 export enum Component {
@@ -22,7 +23,8 @@ export enum Component {
   CheckoutGiftPack = 'CheckoutGiftPack',
   GPay = 'GPayOption',
   Otp = 'Otp',
-  BKMExpress = 'BKMOption'
+  BKMExpress = 'BKMOption',
+  MasterpassCardList = 'MasterpassCardList'
 }
 
 const PluginComponents = new Map([
@@ -33,7 +35,8 @@ const PluginComponents = new Map([
   [Plugin.CheckoutGiftPack, [Component.CheckoutGiftPack]],
   [Plugin.GPay, [Component.GPay]],
   [Plugin.Otp, [Component.Otp]],
-  [Plugin.BKMExpress, [Component.BKMExpress]]
+  [Plugin.BKMExpress, [Component.BKMExpress]],
+  [Plugin.Masterpass, [Component.MasterpassCardList]]
 ]);
 
 const getPlugin = (component: Component) => {
@@ -53,10 +56,6 @@ export default function PluginModule({
 }) {
   const plugin = getPlugin(component);
 
-  if (!(plugins as string[]).includes(plugin)) {
-    return null;
-  }
-
   const Component = useMemo(
     () =>
       dynamic(
@@ -91,8 +90,12 @@ export default function PluginModule({
         },
         { ssr: false }
       ),
-    [plugin]
+    [plugin, component]
   );
 
+  if (!(plugins as string[]).includes(plugin)) {
+    return null;
+  }
+
   return <Component {...props} />;
 }

package/components/price.tsx

@@ -0,0 +1,55 @@
+import { useMemo } from 'react';
+import NumberFormat, { NumberFormatProps } from 'react-number-format';
+import { getCurrency } from '@akinon/next/utils';
+
+import { useLocalization } from '@akinon/next/hooks';
+import { PriceProps } from '../types';
+
+export const Price = (props: NumberFormatProps & PriceProps) => {
+  const {
+    value,
+    currencyCode,
+    displayType = 'text',
+    useCurrencySymbol = false,
+    useCurrencyAfterPrice = true,
+    useCurrencySpace = true,
+    useNegative = false,
+    useNegativeSpace = true,
+    thousandSeparator = '.',
+    decimalScale = 2,
+    decimalSeparator = ',',
+    fixedDecimalScale = true,
+    ...rest
+  } = props;
+  const { currency: selectedCurrencyCode } = useLocalization();
+  const currencyCode_ = currencyCode || selectedCurrencyCode;
+
+  // TODO: This is very bad practice. It broke decimalScale.
+  const _value = value?.toString().replace('.', ',');
+
+  const currency = useMemo(
+    () =>
+      getCurrency({
+        currencyCode: currencyCode_,
+        useCurrencySymbol,
+        useCurrencyAfterPrice,
+        useCurrencySpace
+      }),
+    [currencyCode_, useCurrencySymbol, useCurrencyAfterPrice, useCurrencySpace]
+  );
+
+  return (
+    <NumberFormat
+      value={useNegative ? `-${useNegativeSpace}${_value}` : _value}
+      {...{
+        [useCurrencyAfterPrice ? 'suffix' : 'prefix']: currency
+      }}
+      displayType={displayType}
+      thousandSeparator={thousandSeparator}
+      decimalScale={decimalScale}
+      decimalSeparator={decimalSeparator}
+      fixedDecimalScale={fixedDecimalScale}
+      {...rest}
+    />
+  );
+};

package/components/pz-providers.tsx

@@ -1,24 +1,24 @@
-'use client';
-
-import LocalizationProvider from '@akinon/next/localization/provider';
-import { SessionProvider } from 'next-auth/react';
-import { Provider } from 'react-redux';
-import { store } from 'redux/store';
-
-export default function PzProviders({
-  translations,
-  children
-}: {
-  translations: any;
-  children: React.ReactNode;
-}) {
-  return (
-    <Provider store={store}>
-      <SessionProvider refetchOnWindowFocus={false}>
-        <LocalizationProvider translations={translations}>
-          {children}
-        </LocalizationProvider>
-      </SessionProvider>
-    </Provider>
-  );
-}
+'use client';
+
+import LocalizationProvider from '@akinon/next/localization/provider';
+import { SessionProvider } from 'next-auth/react';
+import { Provider } from 'react-redux';
+import { store } from 'redux/store';
+
+export default function PzProviders({
+  translations,
+  children
+}: {
+  translations: any;
+  children: React.ReactNode;
+}) {
+  return (
+    <Provider store={store}>
+      <SessionProvider refetchOnWindowFocus={false}>
+        <LocalizationProvider translations={translations}>
+          {children}
+        </LocalizationProvider>
+      </SessionProvider>
+    </Provider>
+  );
+}

package/components/pz-root.tsx

@@ -1,21 +1,21 @@
-import 'server-only';
-import ClientRoot from './client-root';
-import { cookies } from 'next/headers';
-import PzProviders from './pz-providers';
-
-export default function PzRoot({
-  translations,
-  children
-}: {
-  translations: any;
-  children: React.ReactNode;
-}) {
-  const nextCookies = cookies();
-  const sessionid = nextCookies.get('osessionid')?.value;
-
-  return (
-    <PzProviders translations={translations}>
-      <ClientRoot sessionId={sessionid}>{children}</ClientRoot>
-    </PzProviders>
-  );
-}
+import 'server-only';
+import ClientRoot from './client-root';
+import { cookies } from 'next/headers';
+import PzProviders from './pz-providers';
+
+export default function PzRoot({
+  translations,
+  children
+}: {
+  translations: any;
+  children: React.ReactNode;
+}) {
+  const nextCookies = cookies();
+  const sessionid = nextCookies.get('osessionid')?.value;
+
+  return (
+    <PzProviders translations={translations}>
+      <ClientRoot sessionId={sessionid}>{children}</ClientRoot>
+    </PzProviders>
+  );
+}

package/components/radio.tsx

@@ -1,18 +1,18 @@
-import { forwardRef } from 'react';
-import { RadioProps } from '../types/index';
-import { twMerge } from 'tailwind-merge';
-
-const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
-  const { children, ...rest } = props;
-
-  return (
-    <label className={twMerge('flex items-center text-xs', props.className)}>
-      <input type="radio" {...rest} ref={ref} className="w-4 h-4" />
-      {children && <span className="text-xs ml-2">{children}</span>}
-    </label>
-  );
-});
-
-Radio.displayName = 'Radio';
-
-export { Radio };
+import { forwardRef } from 'react';
+import { RadioProps } from '../types/index';
+import { twMerge } from 'tailwind-merge';
+
+const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
+  const { children, ...rest } = props;
+
+  return (
+    <label className={twMerge('flex items-center text-xs', props.className)}>
+      <input type="radio" {...rest} ref={ref} className="w-4 h-4" />
+      {children && <span className="text-xs ml-2">{children}</span>}
+    </label>
+  );
+});
+
+Radio.displayName = 'Radio';
+
+export { Radio };

package/components/react-portal.tsx

@@ -1,45 +1,45 @@
-import { useState, useEffect } from 'react';
-import { createPortal } from 'react-dom';
-
-function createWrapperAndAppendToBody(wrapperId: string) {
-  const wrapperElement = document.createElement('div');
-  wrapperElement.setAttribute('id', wrapperId);
-  document.body.appendChild(wrapperElement);
-  return wrapperElement;
-}
-
-type Props = {
-  children: React.ReactNode;
-  wrapperId: string;
-};
-
-export const ReactPortal: React.FC<Props> = ({
-  children,
-  wrapperId = 'react-portal-wrapper'
-}) => {
-  const [wrapperElement, setWrapperElement] = useState<HTMLElement | null>(
-    null
-  );
-
-  useEffect(() => {
-    let element = document.getElementById(wrapperId) as HTMLElement;
-    let modalCreated = false;
-
-    if (!element) {
-      modalCreated = true;
-      element = createWrapperAndAppendToBody(wrapperId);
-    }
-    setWrapperElement(element);
-
-    return () => {
-      // delete the programatically created element if it was created
-      if (modalCreated && element.parentNode) {
-        element.parentNode.removeChild(element);
-      }
-    };
-  }, [wrapperId]);
-
-  if (wrapperElement === null) return null;
-
-  return createPortal(children, wrapperElement);
-};
+import { useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+
+function createWrapperAndAppendToBody(wrapperId: string) {
+  const wrapperElement = document.createElement('div');
+  wrapperElement.setAttribute('id', wrapperId);
+  document.body.appendChild(wrapperElement);
+  return wrapperElement;
+}
+
+type Props = {
+  children: React.ReactNode;
+  wrapperId: string;
+};
+
+export const ReactPortal: React.FC<Props> = ({
+  children,
+  wrapperId = 'react-portal-wrapper'
+}) => {
+  const [wrapperElement, setWrapperElement] = useState<HTMLElement | null>(
+    null
+  );
+
+  useEffect(() => {
+    let element = document.getElementById(wrapperId) as HTMLElement;
+    let modalCreated = false;
+
+    if (!element) {
+      modalCreated = true;
+      element = createWrapperAndAppendToBody(wrapperId);
+    }
+    setWrapperElement(element);
+
+    return () => {
+      // delete the programatically created element if it was created
+      if (modalCreated && element.parentNode) {
+        element.parentNode.removeChild(element);
+      }
+    };
+  }, [wrapperId]);
+
+  if (wrapperElement === null) return null;
+
+  return createPortal(children, wrapperElement);
+};

package/components/redirect-three-d/content/index.tsx

@@ -1,74 +1,74 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import { ROUTES } from 'routes';
-import { useGet3dRedirectFormQuery } from '@akinon/next/data/client/checkout';
-import { LoaderSpinner } from 'components';
-import { useLocalization } from '../../../hooks/use-localization';
-import { getUrlPathWithLocale } from '../../../utils/localization';
-import { useSearchParams } from 'next/navigation';
-
-interface RedirectThreeDContentProps {
-  sessionId: string;
-}
-
-export default function RedirectThreeDContent({
-  sessionId
-}: RedirectThreeDContentProps) {
-  const searchParams = useSearchParams();
-  const { data } = useGet3dRedirectFormQuery();
-  const [error, setError] = useState(null);
-  const { locale } = useLocalization();
-
-  useEffect(() => {
-    if (data) {
-      const fragment = document.createElement('fragment');
-      fragment.innerHTML = data.result;
-
-      const form = fragment.querySelector('form');
-
-      // a way to determine if response includes a redirection form or not
-      if (fragment.querySelector('link[rel="canonical"]') || !form) {
-        setError('Redirecting to checkout page. Please wait...');
-
-        setTimeout(() => {
-          let checkoutUrl = `${ROUTES.CHECKOUT}`;
-
-          // iframe param is used to prevent header and footer rendering
-          if (searchParams.get('iframe') === 'true') {
-            checkoutUrl = `${checkoutUrl}?iframe=true`;
-          }
-
-          // Use `window.location.href` instead of `router.push`
-          // to capture the url change event in iframe
-          location.href = getUrlPathWithLocale(checkoutUrl, locale);
-        }, 3000);
-        return;
-      }
-
-      const pzParamsInput = document.createElement('input');
-      pzParamsInput.setAttribute('type', 'hidden');
-      pzParamsInput.setAttribute('name', 'pzparams');
-      pzParamsInput.setAttribute(
-        'value',
-        encodeURIComponent(
-          JSON.stringify({
-            session: sessionId,
-            locale
-          })
-        )
-      );
-      form.appendChild(pzParamsInput);
-
-      form.style.display = 'none';
-      document.body.appendChild(form);
-      form.submit();
-    }
-  }, [data]);
-
-  return (
-    <div className="flex items-center justify-center py-20">
-      {error ?? <LoaderSpinner />}
-    </div>
-  );
-}
+'use client';
+
+import { useEffect, useState } from 'react';
+import { ROUTES } from 'routes';
+import { useGet3dRedirectFormQuery } from '@akinon/next/data/client/checkout';
+import { LoaderSpinner } from 'components';
+import { useLocalization } from '../../../hooks/use-localization';
+import { getUrlPathWithLocale } from '../../../utils/localization';
+import { useSearchParams } from 'next/navigation';
+
+interface RedirectThreeDContentProps {
+  sessionId: string;
+}
+
+export default function RedirectThreeDContent({
+  sessionId
+}: RedirectThreeDContentProps) {
+  const searchParams = useSearchParams();
+  const { data } = useGet3dRedirectFormQuery();
+  const [error, setError] = useState(null);
+  const { locale } = useLocalization();
+
+  useEffect(() => {
+    if (data) {
+      const fragment = document.createElement('fragment');
+      fragment.innerHTML = data.result;
+
+      const form = fragment.querySelector('form');
+
+      // a way to determine if response includes a redirection form or not
+      if (fragment.querySelector('link[rel="canonical"]') || !form) {
+        setError('Redirecting to checkout page. Please wait...');
+
+        setTimeout(() => {
+          let checkoutUrl = `${ROUTES.CHECKOUT}`;
+
+          // iframe param is used to prevent header and footer rendering
+          if (searchParams.get('iframe') === 'true') {
+            checkoutUrl = `${checkoutUrl}?iframe=true`;
+          }
+
+          // Use `window.location.href` instead of `router.push`
+          // to capture the url change event in iframe
+          location.href = getUrlPathWithLocale(checkoutUrl, locale);
+        }, 3000);
+        return;
+      }
+
+      const pzParamsInput = document.createElement('input');
+      pzParamsInput.setAttribute('type', 'hidden');
+      pzParamsInput.setAttribute('name', 'pzparams');
+      pzParamsInput.setAttribute(
+        'value',
+        encodeURIComponent(
+          JSON.stringify({
+            session: sessionId,
+            locale
+          })
+        )
+      );
+      form.appendChild(pzParamsInput);
+
+      form.style.display = 'none';
+      document.body.appendChild(form);
+      form.submit();
+    }
+  }, [data]);
+
+  return (
+    <div className="flex items-center justify-center py-20">
+      {error ?? <LoaderSpinner />}
+    </div>
+  );
+}

package/components/redirect-three-d/index.tsx

@@ -1,17 +1,17 @@
-import { cookies } from 'next/headers';
-import { redirect } from 'next/navigation';
-import RedirectThreeDContent from './content';
-import { ROUTES } from 'routes';
-
-const RedirectThreeD = async () => {
-  const nextCookies = cookies();
-  const sessionId = await nextCookies.get('osessionid')?.value;
-
-  if (!sessionId) {
-    return redirect(ROUTES.CHECKOUT);
-  }
-
-  return <RedirectThreeDContent sessionId={sessionId} />;
-};
-
-export default RedirectThreeD;
+import { cookies } from 'next/headers';
+import { redirect } from 'next/navigation';
+import RedirectThreeDContent from './content';
+import { ROUTES } from 'routes';
+
+const RedirectThreeD = async () => {
+  const nextCookies = cookies();
+  const sessionId = await nextCookies.get('osessionid')?.value;
+
+  if (!sessionId) {
+    return redirect(ROUTES.CHECKOUT);
+  }
+
+  return <RedirectThreeDContent sessionId={sessionId} />;
+};
+
+export default RedirectThreeD;

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

@@ -50,7 +50,14 @@ 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`);
+            // }
             // else if (payment_option.payment_type === 'gpay') {
             //   promise = import(`views/checkout/steps/payment/options/gpay`);
             // }

package/components/trans.tsx

@@ -1,39 +1,39 @@
-'use client';
-
-import { Fragment, useMemo } from 'react';
-import reactStringReplace from 'react-string-replace';
-import { useLocalization } from '@akinon/next/hooks';
-
-interface TransProps {
-  i18nKey: string;
-  components?: {
-    [key: string]: React.ReactElement;
-  };
-}
-
-export const Trans = ({ i18nKey, components }: TransProps) => {
-  const { t } = useLocalization();
-  const value = t(i18nKey);
-
-  const replacedValue = useMemo(() => {
-    if (!components) {
-      return value;
-    }
-
-    let text;
-
-    for (const [k] of Object.entries(components)) {
-      text = reactStringReplace(
-        text ?? value,
-        new RegExp(`(<${k}/>|<${k} />)`),
-        (_match, i) => (
-          <Fragment key={`trans-${k}-${i}`}>{components[k]}</Fragment>
-        )
-      );
-    }
-
-    return text;
-  }, [value, components]);
-
-  return <>{replacedValue}</>;
-};
+'use client';
+
+import { Fragment, useMemo } from 'react';
+import reactStringReplace from 'react-string-replace';
+import { useLocalization } from '@akinon/next/hooks';
+
+interface TransProps {
+  i18nKey: string;
+  components?: {
+    [key: string]: React.ReactElement;
+  };
+}
+
+export const Trans = ({ i18nKey, components }: TransProps) => {
+  const { t } = useLocalization();
+  const value = t(i18nKey);
+
+  const replacedValue = useMemo(() => {
+    if (!components) {
+      return value;
+    }
+
+    let text;
+
+    for (const [k] of Object.entries(components)) {
+      text = reactStringReplace(
+        text ?? value,
+        new RegExp(`(<${k}/>|<${k} />)`),
+        (_match, i) => (
+          <Fragment key={`trans-${k}-${i}`}>{components[k]}</Fragment>
+        )
+      );
+    }
+
+    return text;
+  }, [value, components]);
+
+  return <>{replacedValue}</>;
+};