@akinon/next 2.0.0-beta.1 → 2.0.0-beta.10

package/.eslintrc.js

@@ -24,6 +24,18 @@ module.exports = {
       parserOptions: {
         sourceType: 'script'
       }
+    },
+    {
+      env: {
+        node: true
+      },
+      files: ['redux/middlewares/pre-order/index.ts'],
+      rules: {
+        '@akinon/projectzero/check-pre-order-middleware-order': 'error'
+      },
+      parserOptions: {
+        sourceType: 'script'
+      }
     }
   ],
   parser: '@typescript-eslint/parser',

package/CHANGELOG.md

@@ -1,5 +1,55 @@
 # @akinon/next
 
+## 2.0.0-beta.10
+
+### Minor Changes
+
+- 2806320: ZERO-3390: Update version tailwindcss, autoprefixer, tailwind-merge, postcss
+
+## 2.0.0-beta.9
+
+### Minor Changes
+
+- 0fe7711: ZERO-3387: Upgrade nextjs, eslint-config-next
+
+## 2.0.0-beta.8
+
+### Minor Changes
+
+- 071d0f5: ZERO-3352: Resolve Single item size exceeds maxSize error and upgrade dependencies
+
+## 2.0.0-beta.7
+
+## 2.0.0-beta.6
+
+### Minor Changes
+
+- 8f05f9b: ZERO-3250: Beta branch synchronized with Main branch
+
+## 2.0.0-beta.5
+
+### Minor Changes
+
+- e791eab: ZERO-3133: Add fallbackReducer for handling missing plugin reducers
+
+## 2.0.0-beta.4
+
+## 2.0.0-beta.3
+
+### Minor Changes
+
+- 5536b80: ZERO-3104: Add optional headers parameter
+
+## 2.0.0-beta.2
+
+### Minor Changes
+
+- a006015: ZERO-3116: Add not-found page and update default middleware.
+- 999168d: ZERO-3104: Remove local cache handler from CacheHandler initialization
+- 1eeb3d8: ZERO-3116: Add not found page
+- 86a5a62: ZERO-3104: Add optional headers parameter to data fetching functions
+- dd69cc6: ZERO-3079: Modularize pre-order middleware
+
 ## 2.0.0-beta.1
 
 ### Minor Changes

package/api/auth.ts

@@ -92,11 +92,28 @@ const nextAuthOptions = (req: NextApiRequest, res: NextApiResponse) => {
             req.headers['x-app-device']?.toString() ?? ''
           );
 
+          headers.set('x-frontend-id', req.cookies['pz-frontend-id'] || '');
+
           logger.debug('Trying to login/register', {
             formType: credentials.formType,
             userIp
           });
 
+          const checkCurrentUser = await getCurrentUser(
+            req.cookies['osessionid'] ?? '',
+            req.cookies['pz-currency'] ?? ''
+          );
+
+          if (checkCurrentUser?.pk) {
+            const sessionCookie = headers
+              .get('cookie')
+              ?.match(/osessionid=\w+/)?.[0]
+              .replace(/osessionid=/, '');
+            if (sessionCookie) {
+              headers.set('cookie', sessionCookie);
+            }
+          }
+
           const apiRequest = await fetch(
             `${Settings.commerceUrl}${user[credentials.formType]}`,
             {

package/bin/run-prebuild-tests.js

@@ -0,0 +1,46 @@
+const path = require('path')
+const fs = require('fs')
+
+function runPrebuildTests() {
+  const workspaceRoot = process.cwd()
+  const configPath = path.join(workspaceRoot, 'config/prebuild-tests.json')
+
+  try {
+    const config = JSON.parse(fs.readFileSync(configPath, 'utf8'))
+
+    if (config.tests && Array.isArray(config.tests)) {
+      for (const testScript of config.tests) {
+        console.log(`🧪 Running test script: ${testScript}`)
+        const result = require('child_process').spawnSync('yarn', [testScript], {
+          stdio: 'inherit',
+          shell: true
+        })
+
+        if (result.status !== 0) {
+          console.error(`❌ Test script '${testScript}' failed`)
+          process.exit(1)
+        }
+      }
+      console.log('✅ All prebuild tests passed successfully!')
+    }
+  } catch (error) {
+    if (error.code === 'ENOENT') {
+      console.log('🧪 Running default test: test:middleware')
+      const result = require('child_process').spawnSync('yarn', ['test:middleware'], {
+        stdio: 'inherit',
+        shell: true
+      })
+
+      if (result.status !== 0) {
+        console.error('❌ Middleware test failed')
+        process.exit(1)
+      }
+      console.log('✅ Default test passed successfully!')
+    } else {
+      console.error('❌ Error reading test configuration:', error)
+      process.exit(1)
+    }
+  }
+}
+
+module.exports = runPrebuildTests

package/components/accordion.tsx

@@ -22,7 +22,7 @@ export const Accordion = ({
   return (
     <div
       className={twMerge(
-        'flex flex-col justify-center border-b pb-4 mb-4 last:border-none',
+        'flex flex-col justify-center border-b border-gray-200 pb-4 mb-4 last:border-none',
         className
       )}
     >

package/components/button.tsx

@@ -1,46 +1,61 @@
 'use client';
 
-import { ButtonProps } from '../types/index';
+import { ButtonProps } from '../types';
 import clsx from 'clsx';
 import { twMerge } from 'tailwind-merge';
+import { Link } from './link';
 
 export const Button = (props: ButtonProps) => {
-  return (
-    <button
-      {...props}
-      className={twMerge(
-        clsx(
-          [
-            'px-4',
-            'h-10',
-            'text-xs',
-            'bg-primary',
-            'text-primary-foreground',
-            'border',
-            'border-primary',
-            'transition-all',
-            'hover:bg-white',
-            'hover:border-primary',
-            'hover:text-primary'
-          ],
-          props.appearance === 'outlined' && [
-            'bg-transparent ',
-            'text-primary ',
-            'hover:bg-primary ',
-            'hover:text-primary-foreground'
-          ],
-          props.appearance === 'ghost' && [
-            'bg-transparent',
-            'border-transparent',
-            'text-primary',
-            'hover:bg-primary',
-            'hover:text-primary-foreground'
-          ]
-        ),
-        props.className
-      )}
+  const {
+    appearance = 'filled',
+    size = 'md',
+    href,
+    target,
+    children,
+    className,
+    ...rest
+  } = props;
+
+  const variants = {
+    filled:
+      'bg-primary text-primary-foreground border border-primary hover:bg-white hover:border-primary hover:text-primary',
+    outlined:
+      'bg-transparent text-primary hover:bg-primary hover:text-primary-foreground',
+    ghost:
+      'bg-transparent border-transparent text-primary hover:bg-primary hover:text-primary-foreground',
+    link: 'px-0 h-auto underline underline-offset-2'
+  };
+
+  const sizes = {
+    sm: 'h-8',
+    md: 'h-10',
+    lg: 'h-12',
+    xl: 'h-14'
+  };
+
+  const buttonClasses = twMerge(
+    clsx(
+      'px-4 text-xs transition-all duration-200',
+      'inline-flex gap-2 justify-center items-center',
+      variants[appearance],
+      sizes[size],
+      className
+    ),
+    className
+  );
+
+  return props.href ? (
+    <Link
+      prefetch={false}
+      target={target}
+      href={href}
+      className={buttonClasses}
     >
-      {props.children}
+      {children}
+    </Link>
+  ) : (
+    <button {...rest} className={buttonClasses}>
+      {children}
     </button>
   );
 };

package/components/client-root.tsx

@@ -1,6 +1,9 @@
 'use client';
 
 import { useMobileIframeHandler } from '../hooks';
+import * as Sentry from '@sentry/nextjs';
+import { initSentry } from '../sentry';
+import { useEffect } from 'react';
 
 export default function ClientRoot({
   children,
@@ -11,6 +14,23 @@ export default function ClientRoot({
 }) {
   const { preventPageRender } = useMobileIframeHandler({ sessionId });
 
+  const initializeSentry = async () => {
+    const response = await fetch('/api/sentry', { next: { revalidate: 0 } });
+    const data = await response.json();
+
+    const options = {
+      dsn: data.dsn
+    };
+
+    initSentry('Client', options);
+  };
+
+  useEffect(() => {
+    if (!Sentry.isInitialized()) {
+      initializeSentry();
+    }
+  }, []);
+
   if (preventPageRender) {
     return null;
   }

package/components/input.tsx

@@ -40,7 +40,7 @@ export const Input = forwardRef<
   const inputClass = twMerge(
     clsx(
       'text-xs border px-2.5 h-10 placeholder:text-gray-600 peer',
-      'focus-visible:outline-none', // disable outline on focus
+      'focus-visible:outline-hidden', // disable outline on focus
       error
         ? 'border-error focus:border-error'
         : 'border-gray-500 hover:border-black focus:border-black'

package/components/modal.tsx

@@ -38,7 +38,7 @@ export const Modal = (props: ModalProps) => {
 
   return (
     <ReactPortal wrapperId={portalId}>
-      <div className="fixed top-0 left-0 w-screen h-screen bg-primary bg-opacity-60 z-50" />
+      <div className="fixed top-0 left-0 w-screen h-screen bg-primary/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',

package/components/select.tsx

@@ -41,7 +41,7 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>((props, ref) => {
         ref={ref}
         className={twMerge(
           clsx(
-            'cursor-pointer truncate h-10 w-40 px-2.5 shrink-0 outline-none',
+            'cursor-pointer truncate h-10 w-40 px-2.5 shrink-0 outline-hidden',
             !borderless &&
               'border border-gray-200 transition-all duration-150 hover:border-primary'
           ),

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

@@ -4,7 +4,7 @@ import { RootState } from 'redux/store';
 import { useAppSelector } from '../redux/hooks';
 import dynamic, { DynamicOptionsLoadingProps } from 'next/dynamic';
 import { PaymentOptionViews } from 'views/checkout/steps/payment';
-import { useMemo } from 'react';
+import { JSX, useMemo } from 'react';
 
 const fallbackView = () => <></>;
 

package/data/client/api.ts

@@ -68,10 +68,12 @@ export const api = createApi({
   tagTypes: [
     'Basket',
     'MultiBasket',
+    'MiniBasket',
     'BasketB2b',
     'DraftsB2b',
     'Product',
     'Checkout',
+    'PaymentOptions',
     'Favorite',
     'Addresses',
     'Profile',

package/data/client/basket.ts

@@ -24,6 +24,26 @@ export const basketApi = api.injectEndpoints({
       transformResponse: (response: { basket: Basket }) => response.basket,
       providesTags: ['Basket']
     }),
+    getMiniBasket: build.query<
+      { pk: number | null; total_quantity: number },
+      void
+    >({
+      query: () =>
+        buildClientRequestUrl(basket.getMiniBasket, {
+          contentType: 'application/json'
+        }),
+      providesTags: ['MiniBasket']
+    }),
+    getMiniBasketDetail: build.query<
+      { pk: number | null; total_quantity: number },
+      { namespace: string }
+    >({
+      query: ({ namespace }) =>
+        buildClientRequestUrl(basket.getMiniBasketDetail(namespace), {
+          contentType: 'application/json'
+        }),
+      providesTags: ['MiniBasket']
+    }),
     getBasketDetail: build.query<Basket, { namespace: string }>({
       query: ({ namespace }) =>
         buildClientRequestUrl(basket.getBasketDetail(namespace)),
@@ -46,7 +66,7 @@ export const basketApi = api.injectEndpoints({
         method: 'DELETE',
         body: { pk }
       }),
-      invalidatesTags: ['MultiBasket', 'Basket']
+      invalidatesTags: ['MultiBasket', 'Basket', 'MiniBasket']
     }),
     selectMainBasket: build.mutation<Basket, { pk: number }>({
       query: ({ pk }) => ({
@@ -57,7 +77,7 @@ export const basketApi = api.injectEndpoints({
         body: { pk }
       }),
       transformResponse: (response: { baskets: Basket }) => response.baskets,
-      invalidatesTags: ['MultiBasket', 'Basket']
+      invalidatesTags: ['MultiBasket', 'Basket', 'MiniBasket']
     }),
     selectNameSpaceMainBasket: build.mutation<Basket, { namespace: string }>({
       query: ({ namespace }) => ({
@@ -71,7 +91,7 @@ export const basketApi = api.injectEndpoints({
         body: { namespace }
       }),
       transformResponse: (response: { baskets: Basket }) => response.baskets,
-      invalidatesTags: ['MultiBasket', 'Basket']
+      invalidatesTags: ['MultiBasket', 'Basket', 'MiniBasket']
     }),
     updateQuantity: build.mutation<
       UpdateQuantityResponse,
@@ -84,7 +104,7 @@ export const basketApi = api.injectEndpoints({
         method: 'PUT',
         body
       }),
-      invalidatesTags: ['MultiBasket', 'Basket']
+      invalidatesTags: ['MultiBasket', 'Basket', 'MiniBasket']
     }),
     clearBasket: build.mutation<Basket, void>({
       query: (body) => ({
@@ -95,7 +115,7 @@ export const basketApi = api.injectEndpoints({
         body
       }),
       transformResponse: (response: { basket: Basket }) => response.basket,
-      invalidatesTags: ['Basket']
+      invalidatesTags: ['Basket', 'MiniBasket', 'MiniBasket']
     }),
     applyVoucherCode: build.mutation<Basket, { voucher_code: string }>({
       query: (body) => ({
@@ -125,6 +145,8 @@ export const basketApi = api.injectEndpoints({
 
 export const {
   useGetBasketQuery,
+  useGetMiniBasketQuery,
+  useGetMiniBasketDetailQuery,
   useLazyGetBasketDetailQuery,
   useGetAllBasketsQuery,
   useRemoveBasketMutation,

package/data/client/checkout.ts

@@ -2,6 +2,7 @@ import {
   setBankAccounts,
   setCardType,
   setInstallmentOptions,
+  setPaymentOptions,
   setPaymentStepBusy,
   setSelectedBankAccountPk,
   setSelectedCreditPaymentPk,
@@ -12,7 +13,9 @@ import {
   ExtraField,
   GuestLoginFormParams,
   Order,
-  PreOrder
+  PreOrder,
+  SendSmsType,
+  VerifySmsType
 } from '../../types';
 import { buildClientRequestUrl } from '../../utils';
 import { api } from './api';
@@ -182,6 +185,11 @@ export const checkoutApi = api.injectEndpoints({
       }),
       providesTags: ['Checkout']
     }),
+    resetCheckoutState: build.query<CheckoutResponse, void>({
+      query: () => ({
+        url: buildClientRequestUrl(checkout.guestLogin, {})
+      })
+    }),
     fetchCheckoutResult: build.query<{ order: Order }, string>({
       query: (token: string) =>
         buildClientRequestUrl(checkout.fetchCheckoutResult(token))
@@ -419,6 +427,12 @@ export const checkoutApi = api.injectEndpoints({
         }
       })
     }),
+    fetchPaymentOptions: build.query<CheckoutResponse, void>({
+      query: () => ({
+        url: buildClientRequestUrl(checkout.setPaymentOption)
+      }),
+      providesTags: ['PaymentOptions']
+    }),
     setPaymentOption: build.mutation<CheckoutResponse, number>({
       query: (pk: number) => ({
         url: buildClientRequestUrl(checkout.setPaymentOption, {
@@ -467,16 +481,15 @@ export const checkoutApi = api.injectEndpoints({
       CheckoutResponse,
       {
         payment_token?: string;
+        [key: string]: any;
       }
     >({
-      query: ({ payment_token }) => ({
+      query: (requestBody) => ({
         url: buildClientRequestUrl(checkout.setWalletPaymentPage, {
           useFormData: true
         }),
         method: 'POST',
-        body: {
-          payment_token
-        }
+        body: requestBody
       }),
       async onQueryStarted(arg, { dispatch, queryFulfilled }) {
         dispatch(setPaymentStepBusy(true));
@@ -732,7 +745,27 @@ export const checkoutApi = api.injectEndpoints({
         body: {
           loyalty_amount_to_use: amount
         }
-      })
+      }),
+      async onQueryStarted(arg, { dispatch, queryFulfilled }) {
+        dispatch(setPaymentStepBusy(true));
+        dispatch(setPaymentOptions([]));
+        await queryFulfilled;
+
+        const paymentOptionsData = await dispatch(
+          checkoutApi.endpoints.fetchPaymentOptions.initiate()
+        ).unwrap();
+
+        const paymentOptions = paymentOptionsData?.context_list?.find(
+          (context) => context?.page_name === 'PaymentOptionSelectionPage'
+        )?.page_context?.payment_options;
+
+        if (paymentOptions) {
+          dispatch(setPaymentOptions(paymentOptions));
+        }
+
+        dispatch(setPaymentStepBusy(false));
+      },
+      invalidatesTags: ['PaymentOptions']
     }),
     setOrderNote: build.mutation<CheckoutResponse, string>({
       query: (notes) => ({
@@ -816,6 +849,24 @@ export const checkoutApi = api.injectEndpoints({
           selected_loyalty_amount: amount
         }
       })
+    }),
+    sendSms: build.mutation<CheckoutResponse, SendSmsType>({
+      query: (body) => ({
+        url: buildClientRequestUrl(checkout.sendSmsPage, {
+          useFormData: true
+        }),
+        method: 'POST',
+        body
+      })
+    }),
+    verifySms: build.mutation<CheckoutResponse, VerifySmsType>({
+      query: (body) => ({
+        url: buildClientRequestUrl(checkout.verifySmsPage, {
+          useFormData: true
+        }),
+        method: 'POST',
+        body
+      })
     })
   }),
   overrideExisting: false
@@ -835,6 +886,7 @@ export const {
   useSetAddressesMutation,
   useSetShippingOptionMutation,
   useSetDataSourceShippingOptionsMutation,
+  useFetchPaymentOptionsQuery,
   useSetPaymentOptionMutation,
   useSetBinNumberMutation,
   useSetInstallmentOptionMutation,
@@ -859,5 +911,8 @@ export const {
   useSetLoyaltyDataMutation,
   useSetWalletSelectionPageMutation,
   useSetWalletPaymentPageMutation,
-  useSetWalletCompletePageMutation
+  useSetWalletCompletePageMutation,
+  useSendSmsMutation,
+  useVerifySmsMutation,
+  useResetCheckoutStateQuery
 } = checkoutApi;

package/data/client/misc.ts

@@ -92,6 +92,29 @@ export const miscApi = api.injectEndpoints({
       transformResponse: (response: { menu: MenuItemType[] }) => {
         return response.menu;
       }
+    }),
+    getBukalemunImageUrl: builder.query<
+      any,
+      { current_chapter: string; sku: string; selected_attributes: any }
+    >({
+      query: ({ current_chapter, sku, selected_attributes }) => {
+        const data = {
+          ...selected_attributes,
+          current_chapter,
+          sku
+        };
+
+        const params = new URLSearchParams(data);
+
+        return {
+          url: buildClientRequestUrl(
+            misc.bukalemunImageUrl(params.toString()),
+            {
+              responseType: 'json'
+            }
+          )
+        };
+      }
     })
   }),
   overrideExisting: true
@@ -102,5 +125,6 @@ export const {
   useEmailSubscriptionMutation,
   useSetLanguageMutation,
   useGetWidgetQuery,
-  useGetMenuQuery
+  useGetMenuQuery,
+  useGetBukalemunImageUrlQuery
 } = miscApi;

package/data/client/product.ts

@@ -69,12 +69,28 @@ export const productApi = api.injectEndpoints({
         }),
         method: 'POST',
         body
-      })
+      }),
+      invalidatesTags: ['MiniBasket']
     }),
     getInstallments: build.query<any, any>({
       query: (productPk) => ({
         url: buildClientRequestUrl(product.installments(productPk))
       })
+    }),
+    getBundleProductData: build.query<
+      any,
+      { productPk: string; queryString: string }
+    >({
+      query: ({ productPk, queryString }) => {
+        return {
+          url: buildClientRequestUrl(
+            product.bundleProduct(productPk, queryString),
+            {
+              responseType: 'json'
+            }
+          )
+        };
+      }
     })
   }),
   overrideExisting: true
@@ -85,5 +101,6 @@ export const {
   useGetProductByPkQuery,
   useGetRetailStoreStockMutation,
   useGetInstallmentsQuery,
-  useGetProductByParamsQuery
+  useGetProductByParamsQuery,
+  useGetBundleProductDataQuery
 } = productApi;

package/data/client/user.ts

@@ -1,7 +1,7 @@
 import { api } from './api';
 import { user } from '../urls';
 import { ForgotPasswordFormType, Order } from '../../types';
-import { buildClientRequestUrl } from '../../utils';
+import { buildClientRequestUrl, getCookie } from '../../utils';
 
 interface GetCaptchaResponse {
   siteKey: string;
@@ -64,13 +64,21 @@ const userApi = api.injectEndpoints({
       })
     }),
     forgotPassword: build.mutation<void, ForgotPasswordFormType>({
-      query: (body) => ({
-        url: buildClientRequestUrl(user.forgotPassword, {
-          contentType: 'application/json'
-        }),
-        method: 'POST',
-        body
-      })
+      query: (body) => {
+        const frontendId = getCookie('pz-frontend-id');
+        const headers = frontendId
+          ? { 'x-frontend-id': frontendId }
+          : undefined;
+
+        return {
+          url: buildClientRequestUrl(user.forgotPassword, {
+            contentType: 'application/json'
+          }),
+          method: 'POST',
+          body,
+          headers
+        };
+      }
     }),
     otpLogin: build.mutation<void, { phone: string }>({
       query: ({ phone }) => ({