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

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 }) => ({

package/data/server/flatpage.ts

@@ -7,7 +7,8 @@ import { ServerVariables } from '../../utils/server-variables';
 const getFlatPageDataHandler = (
   pk: number,
   locale: string,
-  currency: string
+  currency: string,
+  headers?: Record<string, string>
 ) => {
   return async function () {
     const data = await appFetch<FlatPage>({
@@ -17,7 +18,8 @@ const getFlatPageDataHandler = (
       init: {
         headers: {
           Accept: 'application/json',
-          'Content-Type': 'application/json'
+          'Content-Type': 'application/json',
+          ...(headers ?? {})
         }
       }
     });
@@ -29,15 +31,17 @@ const getFlatPageDataHandler = (
 export const getFlatPageData = ({
   pk,
   locale = ServerVariables.locale,
-  currency = ServerVariables.currency
+  currency = ServerVariables.currency,
+  headers
 }: {
   pk: number;
   locale?: string;
   currency?: string;
+  headers?: Record<string, string>;
 }) => {
   return Cache.wrap(
     CacheKey.FlatPage(pk),
     locale,
-    getFlatPageDataHandler(pk, locale, currency)
+    getFlatPageDataHandler(pk, locale, currency, headers)
   );
 };

package/data/server/form.ts

@@ -5,7 +5,12 @@ import appFetch from '../../utils/app-fetch';
 import { ServerVariables } from '../../utils/server-variables';
 import { form } from '../urls';
 
-const getFormDataHandler = (pk: number, locale: string, currency: string) => {
+const getFormDataHandler = (
+  pk: number,
+  locale: string,
+  currency: string,
+  headers?: Record<string, string>
+) => {
   return async function () {
     const data = await appFetch<FormType>({
       url: form.getForm(pk),
@@ -14,7 +19,8 @@ const getFormDataHandler = (pk: number, locale: string, currency: string) => {
       init: {
         headers: {
           Accept: 'application/json',
-          'Content-Type': 'application/json'
+          'Content-Type': 'application/json',
+          ...(headers ?? {})
         }
       }
     });
@@ -26,15 +32,17 @@ const getFormDataHandler = (pk: number, locale: string, currency: string) => {
 export const getFormData = ({
   pk,
   locale = ServerVariables.locale,
-  currency = ServerVariables.currency
+  currency = ServerVariables.currency,
+  headers
 }: {
   pk: number;
   locale?: string;
   currency?: string;
+  headers?: Record<string, string>;
 }) => {
   return Cache.wrap(
     CacheKey.Form(pk),
     locale,
-    getFormDataHandler(pk, locale, currency)
+    getFormDataHandler(pk, locale, currency, headers)
   );
 };

package/data/server/landingpage.ts

@@ -7,7 +7,8 @@ import { ServerVariables } from '../../utils/server-variables';
 const getLandingPageHandler = (
   pk: number,
   locale: string,
-  currency: string
+  currency: string,
+  headers?: Record<string, string>
 ) => {
   return async function () {
     const data = await appFetch<LandingPage>({
@@ -17,7 +18,8 @@ const getLandingPageHandler = (
       init: {
         headers: {
           Accept: 'application/json',
-          'Content-Type': 'application/json'
+          'Content-Type': 'application/json',
+          ...(headers ?? {})
         }
       }
     });
@@ -29,15 +31,17 @@ const getLandingPageHandler = (
 export const getLandingPageData = ({
   pk,
   locale = ServerVariables.locale,
-  currency = ServerVariables.currency
+  currency = ServerVariables.currency,
+  headers
 }: {
   pk: number;
   locale?: string;
   currency?: string;
+  headers?: Record<string, string>;
 }) => {
   return Cache.wrap(
     CacheKey.LandingPage(pk),
     locale,
-    getLandingPageHandler(pk, locale, currency)
+    getLandingPageHandler(pk, locale, currency, headers)
   );
 };

package/data/server/menu.ts

@@ -13,6 +13,7 @@ interface MenuHandlerParams {
   currency?: string;
   depth?: number;
   parent?: string;
+  headers?: Record<string, string>;
 }
 
 const DEFAULT_DEPTH = 3;
@@ -22,13 +23,17 @@ const getMenuHandler =
     locale = ServerVariables.locale,
     currency = ServerVariables.currency,
     depth,
-    parent
+    parent,
+    headers
   }: MenuHandlerParams = {}) =>
   async () => {
     const response = await appFetch<MenuResponse>({
       url: misc.menus(depth ?? DEFAULT_DEPTH, parent),
       locale,
-      currency
+      currency,
+      init: {
+        headers
+      }
     });
 
     return response?.menu;

package/data/server/product.ts

@@ -11,6 +11,7 @@ type GetProduct = {
   currency?: string;
   searchParams?: URLSearchParams;
   groupProduct?: boolean;
+  headers?: Record<string, string>;
 };
 
 const getProductDataHandler = ({
@@ -18,7 +19,8 @@ const getProductDataHandler = ({
   locale,
   currency,
   searchParams,
-  groupProduct
+  groupProduct,
+  headers
 }: GetProduct) => {
   return async function () {
     let url = groupProduct
@@ -29,7 +31,7 @@ const getProductDataHandler = ({
       url +=
         '?' +
         Object.keys(searchParams)
-          .map((key) => `${key}=${searchParams[key]}`)
+          .map((key) => `${key}=${encodeURIComponent(searchParams[key])}`)
           .join('&');
     }
 
@@ -40,7 +42,8 @@ const getProductDataHandler = ({
       init: {
         headers: {
           Accept: 'application/json',
-          'Content-Type': 'application/json'
+          'Content-Type': 'application/json',
+          ...(headers ?? {})
         }
       }
     });
@@ -95,7 +98,8 @@ export const getProductData = async ({
   locale = ServerVariables.locale,
   currency = ServerVariables.currency,
   searchParams,
-  groupProduct
+  groupProduct,
+  headers
 }: GetProduct) => {
   return Cache.wrap(
     CacheKey[groupProduct ? 'GroupProduct' : 'Product'](
@@ -103,7 +107,14 @@ export const getProductData = async ({
       searchParams ?? new URLSearchParams()
     ),
     locale,
-    getProductDataHandler({ pk, locale, currency, searchParams, groupProduct }),
+    getProductDataHandler({
+      pk,
+      locale,
+      currency,
+      searchParams,
+      groupProduct,
+      headers
+    }),
     {
       expire: 300
     }

package/data/server/seo.ts

@@ -7,9 +7,10 @@ interface SeoDataParams {
   url: string;
   locale?: string;
   currency?: string;
+  headers?: Record<string, string>;
 }
 
-function getSeoDataHandler({ url, locale, currency }: SeoDataParams) {
+function getSeoDataHandler({ url, locale, currency, headers }: SeoDataParams) {
   return async function () {
     let data = {} as {
       title: string;
@@ -19,7 +20,12 @@ function getSeoDataHandler({ url, locale, currency }: SeoDataParams) {
     };
 
     try {
-      data = await appFetch({ url: misc.cmsSeo(url), locale, currency });
+      data = await appFetch({
+        url: misc.cmsSeo(url),
+        locale,
+        currency,
+        init: { headers }
+      });
     } catch (error) {
       // logger.error('Error while fetching seo data', { url, error });
     }
@@ -31,11 +37,12 @@ function getSeoDataHandler({ url, locale, currency }: SeoDataParams) {
 export const getSeoData = async (
   url,
   locale = ServerVariables.locale,
-  currency = ServerVariables.currency
+  currency = ServerVariables.currency,
+  headers?: Record<string, string>
 ) => {
   return Cache.wrap(
     CacheKey.Seo(url),
     locale,
-    getSeoDataHandler({ url, locale, currency })
+    getSeoDataHandler({ url, locale, currency, headers })
   );
 };

package/data/server/widget.ts

@@ -6,29 +6,44 @@ import { widgets } from '../urls';
 import { ServerVariables } from '../../utils/server-variables';
 
 const getWidgetDataHandler =
-  (slug: string, locale: string, currency: string) => async () => {
+  (
+    slug: string,
+    locale: string,
+    currency: string,
+    headers?: Record<string, string>
+  ) =>
+  async () => {
     if (!slug) {
       return null;
     }
 
-    return await appFetch({ url: widgets.getWidget(slug), locale, currency });
+    return await appFetch({
+      url: widgets.getWidget(slug),
+      locale,
+      currency,
+      init: {
+        headers
+      }
+    });
   };
 
 export const getWidgetData = async <T>({
   slug,
   locale = ServerVariables.locale,
   currency = ServerVariables.currency,
-  cacheOptions
+  cacheOptions,
+  headers
 }: {
   slug: string;
   locale?: string;
   currency?: string;
   cacheOptions?: CacheOptions;
+  headers?: Record<string, string>;
 }): Promise<WidgetResultType<T>> => {
   return Cache.wrap(
     CacheKey.Widget(slug),
     locale,
-    getWidgetDataHandler(slug, locale, currency),
+    getWidgetDataHandler(slug, locale, currency, headers),
     cacheOptions
   );
 };