@akinon/next 1.14.1 → 1.15.0

package/.editorconfig

@@ -1,7 +1,7 @@
-[*]
-indent_style = space
-indent_size = 2
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

package/.gitattributes

@@ -0,0 +1,15 @@
+*.js    text eol=lf
+*.jsx   text eol=lf
+*.ts    text eol=lf
+*.tsx   text eol=lf
+*.json  text eol=lf
+*.md    text eol=lf
+
+.eslintignore text eol=lf
+.eslintrc text eol=lf
+.gitignore text eol=lf
+.prettierrc text eol=lf
+.yarnrc text eol=lf
+
+* text=auto
+

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @akinon/next
 
+## 1.15.0
+
+### Minor Changes
+
+- 96dd05f: ZERO-2373: Add credit payment
+- 96dd05f: ZERO-2385: Add gitattributes file
+- 96dd05f: ZERO-2404: Add gpay middleware
+
 ## 1.14.1
 
 ### Patch Changes

package/components/index.ts

@@ -1,17 +1,18 @@
-export * from './accordion';
-export * from './button';
-export * from './client-root';
-export * from './icon';
-export * from './image';
-export * from './input';
-export * from './lazy-component';
-export * from './loader-spinner';
-export * from './mobile-app-toggler';
-export * from './oauth-login';
-export * from './plugin-module';
-export * from './price';
-export * from './pz-providers';
-export * from './radio';
-export * from './react-portal';
-export * from './selected-payment-option-view';
-export * from './trans';
+export * from './accordion';
+export * from './button';
+export * from './client-root';
+export * from './icon';
+export * from './image';
+export * from './input';
+export * from './lazy-component';
+export * from './loader-spinner';
+export * from './mobile-app-toggler';
+export * from './modal';
+export * from './oauth-login';
+export * from './plugin-module';
+export * from './price';
+export * from './pz-providers';
+export * from './radio';
+export * from './react-portal';
+export * from './selected-payment-option-view';
+export * from './trans';

package/components/modal.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { ReactPortal } from './react-portal';
+
+import { Icon } from './icon';
+import { twMerge } from 'tailwind-merge';
+import { useEffect } from 'react';
+export interface ModalProps {
+  portalId: string;
+  children?: React.ReactNode;
+  open?: boolean;
+  setOpen?: (open: boolean) => void;
+  title?: React.ReactNode;
+  showCloseButton?: React.ReactNode;
+  className?: string;
+}
+
+export const Modal = (props: ModalProps) => {
+  const {
+    children,
+    portalId,
+    open,
+    setOpen,
+    title = '',
+    showCloseButton = true,
+    className
+  } = props;
+
+  useEffect(() => {
+    if (open) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'auto';
+    }
+  }, [open]);
+
+  if (!open) return null;
+
+  return (
+    <ReactPortal wrapperId={portalId}>
+      <div className="fixed top-0 left-0 w-screen h-screen bg-primary bg-opacity-60 z-50" />
+      <section
+        className={twMerge(
+          'fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50 bg-white',
+          className
+        )}
+      >
+        {(showCloseButton || title) && (
+          <div className="flex px-6 py-4 border-b border-gray-400">
+            {title && <h3 className="text-lg font-light">{title}</h3>}
+            {showCloseButton && (
+              <button
+                type="button"
+                onClick={() => setOpen(false)}
+                className="ml-auto"
+              >
+                <Icon name="close" size={16} />
+              </button>
+            )}
+          </div>
+        )}
+        {children}
+      </section>
+    </ReactPortal>
+  );
+};

package/components/plugin-module.tsx

@@ -12,6 +12,7 @@ enum Plugin {
   GPay = 'pz-gpay',
   Otp = 'pz-otp',
   BKMExpress = 'pz-bkm',
+  CreditPayment = 'pz-credit-payment',
   Masterpass = 'pz-masterpass'
 }
 
@@ -24,6 +25,7 @@ export enum Component {
   GPay = 'GPayOption',
   Otp = 'Otp',
   BKMExpress = 'BKMOption',
+  CreditPayment = 'CreditPayment',
   MasterpassCardList = 'MasterpassCardList'
 }
 
@@ -36,6 +38,7 @@ const PluginComponents = new Map([
   [Plugin.GPay, [Component.GPay]],
   [Plugin.Otp, [Component.Otp]],
   [Plugin.BKMExpress, [Component.BKMExpress]],
+  [Plugin.CreditPayment, [Component.CreditPayment]],
   [Plugin.Masterpass, [Component.MasterpassCardList]]
 ]);
 
@@ -79,6 +82,8 @@ export default function PluginModule({
               promise = import(`${'pz-otp'}`);
             } else if (plugin === Plugin.BKMExpress) {
               promise = import(`${'pz-bkm'}`);
+            } else if (plugin === Plugin.CreditPayment) {
+              promise = import(`${'pz-credit-payment'}`);
             }
           } catch (error) {
             logger.error(error);

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

@@ -59,7 +59,7 @@ export default function SelectedPaymentOptionView() {
             //   promise = import(`views/checkout/steps/payment/options/credit-payment`);
             // }
             // else if (payment_option.payment_type === 'gpay') {
-            //   promise = import(`views/checkout/steps/payment/options/gpay`);
+              //   promise = import(`views/checkout/steps/payment/options/gpay`);
             // }
             // else if (payment_option.payment_type === 'bkm_express') {
             //   promise = import(`views/checkout/steps/payment/options/bkm`);

package/data/server/form.ts

@@ -1,8 +1,8 @@
-import { Cache, CacheKey } from '../../lib/cache';
-import { FormType } from '../../types/commerce/form';
+import { Cache, CacheKey } from "../../lib/cache";
+import { FormType } from "../../types/commerce/form";
 
-import appFetch from '../../utils/app-fetch';
-import { form } from '../urls';
+import appFetch from "../../utils/app-fetch";
+import { form } from "../urls";
 
 const getFormDataHandler = (pk: number) => {
   return async function () {

package/hooks/use-payment-options.ts

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

package/middlewares/complete-gpay.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-gpay',
+        error
+      });
+    }
+
+    return result;
+  }
+  return null;
+};
+
+const withCompleteGpay =
+  (middleware: NextMiddleware) =>
+  async (req: PzNextRequest, event: NextFetchEvent) => {
+    const url = req.nextUrl.clone();
+    const ip = req.headers.get('x-forwarded-for') ?? '';
+
+    if (url.search.indexOf('GPayCompletePage') === -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 GPay 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 GPay payment', {
+          middleware: 'complete-gpay',
+          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-gpay',
+        contextList,
+        ip
+      });
+
+      if (!redirectUrl) {
+        logger.warn(
+          'No redirection url for order success page found in page_context. Redirecting to checkout page.',
+          {
+            middleware: 'complete-gpay',
+            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-gpay',
+        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 GPay payment', {
+        middleware: 'complete-gpay',
+        error,
+        requestHeaders,
+        ip
+      });
+
+      return NextResponse.redirect(
+        `${url.origin}${getUrlPathWithLocale(
+          '/orders/checkout/',
+          req.cookies.get('pz-locale')?.value
+        )}`,
+        303
+      );
+    }
+  };
+
+export default withCompleteGpay;

package/middlewares/default.ts

@@ -2,6 +2,7 @@ import { NextFetchEvent, NextMiddleware, NextResponse } from 'next/server';
 import Settings from 'settings';
 import {
   PzNextRequest,
+  withCompleteGpay,
   withOauthLogin,
   withPrettyUrl,
   withRedirectionPayment,
@@ -122,128 +123,130 @@ const withPzDefault =
             withRedirectionPayment(
               withThreeDRedirection(
                 withUrlRedirection(
-                  async (req: PzNextRequest, event: NextFetchEvent) => {
-                    let middlewareResult: NextResponse | void =
-                      NextResponse.next();
+                  withCompleteGpay(
+                    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`)) {
-                        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
+                        // 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
+                            );
                           }
-                        );
-                      }
-                      middlewareResult.cookies.set('pz-currency', currency, {
-                        sameSite: 'none',
-                        secure: true,
-                        expires: new Date(Date.now() + 1000 * 60 * 60 * 24 * 7) // 7 days
-                      });
+                        } else {
+                          // if middleware.ts doesn't have a return value.
+                          // e.g. NextResponse.next() doesn't exist in middleware.ts
 
-                      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 = NextResponse.rewrite(url);
+                        }
 
-                      middlewareResult.headers.set(
-                        'pz-url',
-                        req.nextUrl.toString()
-                      );
+                        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-currency', currency, {
+                          sameSite: 'none',
+                          secure: true,
+                          expires: new Date(Date.now() + 1000 * 60 * 60 * 24 * 7) // 7 days
+                        });
 
-                      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

@@ -5,6 +5,7 @@ import withRedirectionPayment from './redirection-payment';
 import withLocale from './locale';
 import withOauthLogin from './oauth-login';
 import withUrlRedirection from './url-redirection';
+import withCompleteGpay from './complete-gpay';
 import { NextRequest } from 'next/server';
 
 export {
@@ -14,7 +15,8 @@ export {
   withRedirectionPayment,
   withLocale,
   withOauthLogin,
-  withUrlRedirection
+  withUrlRedirection,
+  withCompleteGpay
 };
 
 export interface PzNextRequest extends NextRequest {

package/package.json

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

package/plugins.js

@@ -7,5 +7,6 @@ module.exports = [
   'pz-gpay',
   'pz-otp',
   'pz-bkm',
+  'pz-credit-payment',
   'pz-masterpass'
 ];