@akinon/next 1.0.0

package/redux/middlewares/checkout.ts

@@ -0,0 +1,231 @@
+'use client';
+
+import { Middleware } from '@reduxjs/toolkit';
+import {
+  setAddressList,
+  setBankAccounts,
+  setCanGuestPurchase,
+  setCardType,
+  setDeliveryOptions,
+  setErrors,
+  setHasGiftBox,
+  setInstallmentOptions,
+  setLoyaltyBalance,
+  setPaymentChoices,
+  setPaymentOptions,
+  setPreOrder,
+  setShippingOptions,
+  setShippingStepCompleted
+} from '../../redux/reducers/checkout';
+import { RootState, TypedDispatch } from 'redux/store';
+import { checkoutApi } from '../../data/client/checkout';
+import { CheckoutContext, PreOrder } from '../../types';
+import { getCookie, setCookie } from '../../utils';
+import settings from 'settings';
+import { LocaleUrlStrategy } from '../../localization';
+import { showMobile3dIframe } from '../../utils/mobile-3d-iframe';
+
+interface CheckoutResult {
+  payload: {
+    errors?: any;
+    pre_order?: PreOrder;
+    context_list?: CheckoutContext[];
+  };
+}
+
+interface MiddlewareParams {
+  getState: () => RootState;
+  dispatch: TypedDispatch;
+}
+
+export const errorMiddleware: Middleware = ({ dispatch }: MiddlewareParams) => {
+  return (next) => (action) => {
+    const result: CheckoutResult = next(action);
+    const errors = result?.payload?.errors;
+
+    if (errors) {
+      dispatch(setErrors(errors));
+    }
+
+    return result;
+  };
+};
+
+export const preOrderMiddleware: Middleware = ({
+  getState,
+  dispatch
+}: MiddlewareParams) => {
+  return (next) => (action) => {
+    const result: CheckoutResult = next(action);
+    const preOrder = result?.payload?.pre_order;
+
+    if (
+      !preOrder ||
+      action?.meta?.arg?.endpointName === 'guestLogin' ||
+      action?.meta?.arg?.endpointName === 'getCheckoutLoyaltyBalance'
+    ) {
+      return result;
+    }
+
+    const {
+      deliveryOptions,
+      addressList: addresses,
+      shippingOptions,
+      paymentOptions,
+      installmentOptions
+    } = getState().checkout;
+    const { endpoints: apiEndpoints } = checkoutApi;
+
+    dispatch(setPreOrder(preOrder));
+
+    if (!preOrder.delivery_option && deliveryOptions.length > 0) {
+      dispatch(
+        apiEndpoints.setDeliveryOption.initiate(
+          deliveryOptions.find((opt) => opt.delivery_option_type === 'customer')
+            ?.pk
+        )
+      );
+    }
+
+    if (
+      (!preOrder.shipping_address || !preOrder.billing_address) &&
+      addresses.length > 0 &&
+      preOrder.delivery_option?.delivery_option_type === 'customer'
+    ) {
+      dispatch(
+        apiEndpoints.setAddresses.initiate({
+          shippingAddressPk: addresses[0].pk,
+          billingAddressPk: addresses[0].pk
+        })
+      );
+    }
+
+    if (
+      shippingOptions.length > 0 &&
+      (!preOrder.shipping_option ||
+        !shippingOptions.find((opt) => opt.pk === preOrder.shipping_option?.pk))
+    ) {
+      dispatch(apiEndpoints.setShippingOption.initiate(shippingOptions[0].pk));
+    }
+
+    if (!preOrder.payment_option && paymentOptions.length > 0) {
+      dispatch(apiEndpoints.setPaymentOption.initiate(paymentOptions[0].pk));
+    }
+
+    if (!preOrder.installment && installmentOptions.length > 0) {
+      dispatch(
+        apiEndpoints.setInstallmentOption.initiate(installmentOptions[0].pk)
+      );
+    }
+
+    dispatch(
+      setShippingStepCompleted(
+        [
+          preOrder.delivery_option?.delivery_option_type === 'retail_store'
+            ? true
+            : preOrder.shipping_address?.pk,
+          preOrder.billing_address?.pk,
+          preOrder.shipping_option?.pk,
+          addresses.length > 0
+        ].every(Boolean)
+      )
+    );
+
+    return result;
+  };
+};
+
+export const contextListMiddleware: Middleware = ({
+  dispatch,
+  getState
+}: MiddlewareParams) => {
+  return (next) => (action) => {
+    const { isMobileApp } = getState().root;
+    const result: CheckoutResult = next(action);
+
+    if (result?.payload?.context_list) {
+      result.payload.context_list.forEach((context) => {
+        const redirectUrl = context.page_context.redirect_url;
+
+        if (redirectUrl) {
+          const currentLocale = getCookie('pz-locale');
+
+          let url = redirectUrl;
+
+          if (currentLocale && !redirectUrl.includes('/orders/redirection')) {
+            const { defaultLocaleValue, localeUrlStrategy } =
+              settings.localization;
+
+            url =
+              currentLocale === defaultLocaleValue &&
+              localeUrlStrategy !== LocaleUrlStrategy.ShowAllLocales
+                ? redirectUrl
+                : `/${currentLocale}${redirectUrl}`;
+          }
+
+          if (isMobileApp) {
+            showMobile3dIframe(url);
+          } else {
+            window.location.href = url;
+          }
+
+          return;
+        }
+
+        if (context.page_context.has_gift_box) {
+          dispatch(setHasGiftBox(context.page_context.has_gift_box));
+        }
+
+        if (typeof context.page_context.can_guest_purchase === 'boolean') {
+          dispatch(
+            setCanGuestPurchase(context.page_context.can_guest_purchase)
+          );
+        }
+
+        if (context.page_context.delivery_options) {
+          dispatch(setDeliveryOptions(context.page_context.delivery_options));
+        }
+
+        if (context.page_context.addresses) {
+          dispatch(setAddressList(context.page_context.addresses));
+        }
+
+        if (context.page_context.shipping_options) {
+          dispatch(setShippingOptions(context.page_context.shipping_options));
+        }
+
+        if (context.page_context.payment_options) {
+          dispatch(setPaymentOptions(context.page_context.payment_options));
+        }
+
+        if (context.page_context.payment_choices) {
+          dispatch(setPaymentChoices(context.page_context.payment_choices));
+        }
+
+        if (context.page_context.bank_accounts) {
+          dispatch(setBankAccounts(context.page_context.bank_accounts));
+        }
+
+        if (
+          !result.payload.context_list.find(
+            (ctx) => ctx.page_name === 'DeliveryOptionSelectionPage'
+          )
+        ) {
+          if (context.page_context.card_type) {
+            dispatch(setCardType(context.page_context.card_type));
+          }
+
+          if (context.page_context.installments) {
+            dispatch(setInstallmentOptions(context.page_context.installments));
+          }
+        }
+
+        if (context.page_context.balance) {
+          dispatch(setLoyaltyBalance(context.page_context.balance));
+        }
+      });
+    }
+
+    return result;
+  };
+};

package/redux/middlewares/index.ts

@@ -0,0 +1,50 @@
+'use client';
+
+import { signOut } from 'next-auth/react';
+import { ROUTES } from 'routes';
+import type { Middleware } from '@reduxjs/toolkit';
+import {
+  errorMiddleware,
+  contextListMiddleware,
+  preOrderMiddleware
+} from './checkout';
+import { api } from '../../data/client/api';
+import logger from '@akinon/next/utils/log';
+
+export const rtkQueryResponseHandler: Middleware =
+  ({ dispatch }) =>
+  (next) =>
+  (action) => {
+    return next(action);
+  };
+
+export const rtkQueryErrorHandler: Middleware =
+  () => (next) => async (action) => {
+    if (action?.payload?.status === 401) {
+      await signOut({
+        callbackUrl: `${ROUTES.AUTH}?callbackUrl=${window.location.pathname}`
+      });
+      logger.debug('Session expired: 401');
+
+      return;
+    }
+
+    if (action?.payload?.status === 404) {
+      logger.warn(
+        `404 - Not Found. Endpoint: ${action.meta.arg.endpointName}, url: ${action.meta.baseQueryMeta.request.url}`
+      );
+    }
+
+    return next(action);
+  };
+
+const middlewares = [
+  api.middleware,
+  rtkQueryResponseHandler,
+  rtkQueryErrorHandler,
+  errorMiddleware,
+  preOrderMiddleware,
+  contextListMiddleware
+];
+
+export default middlewares;

package/redux/reducers/checkout.ts

@@ -0,0 +1,164 @@
+'use client';
+
+import { createSlice } from '@reduxjs/toolkit';
+
+import {
+  Address,
+  BankAccount,
+  CheckoutStep,
+  CreditCardType,
+  DeliveryOption,
+  InstallmentOption,
+  PaymentChoice,
+  PaymentOption,
+  PreOrder,
+  ShippingOption
+} from '../../types';
+
+export interface CheckoutState {
+  // TODO: Add types
+  errors: any;
+  hasGiftBox: boolean;
+  canGuestPurchase: boolean;
+  steps: {
+    current: CheckoutStep;
+    shipping: {
+      completed: boolean;
+      busy: boolean;
+    };
+    payment: {
+      completed: boolean;
+      busy: boolean;
+    };
+  };
+  preOrder: PreOrder;
+  addressList: Address[];
+  deliveryOptions: DeliveryOption[];
+  shippingOptions: ShippingOption[];
+  paymentOptions: PaymentOption[];
+  paymentChoices: PaymentChoice[];
+  cardType: CreditCardType;
+  installmentOptions: InstallmentOption[];
+  bankAccounts: BankAccount[];
+  selectedBankAccountPk: number;
+  loyaltyBalance?: string;
+}
+
+const initialState: CheckoutState = {
+  errors: null,
+  hasGiftBox: false,
+  canGuestPurchase: false,
+  steps: {
+    current: CheckoutStep.Shipping,
+    shipping: {
+      completed: false,
+      busy: false
+    },
+    payment: {
+      completed: false,
+      busy: false
+    }
+  },
+  preOrder: null,
+  addressList: [],
+  deliveryOptions: [],
+  shippingOptions: [],
+  paymentOptions: [],
+  paymentChoices: [],
+  cardType: null,
+  installmentOptions: [],
+  bankAccounts: [],
+  selectedBankAccountPk: null
+};
+
+const checkoutSlice = createSlice({
+  name: 'checkout',
+  initialState,
+  reducers: {
+    resetCheckoutState() {
+      return initialState;
+    },
+    setErrors(state, { payload }) {
+      state.errors = payload;
+    },
+    setHasGiftBox(state, { payload }) {
+      state.hasGiftBox = payload;
+    },
+    setCanGuestPurchase(state, { payload }) {
+      state.canGuestPurchase = payload;
+    },
+    setCurrentStep(state, { payload }) {
+      state.steps.current = payload;
+    },
+    setShippingStepCompleted(state, { payload }) {
+      state.steps.shipping.completed = payload;
+    },
+    setShippingStepBusy(state, { payload }) {
+      state.steps.shipping.busy = payload;
+    },
+    setPaymentStepCompleted(state, { payload }) {
+      state.steps.payment.completed = payload;
+    },
+    setPaymentStepBusy(state, { payload }) {
+      state.steps.payment.busy = payload;
+    },
+    setPreOrder(state, { payload }) {
+      state.preOrder = payload;
+    },
+    setAddressList(state, { payload }) {
+      state.addressList = payload;
+    },
+    setDeliveryOptions(state, { payload }) {
+      state.deliveryOptions = payload;
+    },
+    setShippingOptions(state, { payload }) {
+      state.shippingOptions = payload;
+    },
+    setPaymentOptions(state, { payload }) {
+      state.paymentOptions = payload;
+    },
+    setPaymentChoices(state, { payload }) {
+      state.paymentChoices = payload;
+    },
+    setCardType(state, { payload }) {
+      state.cardType = payload;
+    },
+    setInstallmentOptions(state, { payload }) {
+      state.installmentOptions = payload;
+    },
+    setBankAccounts(state, { payload }) {
+      state.bankAccounts = payload;
+    },
+    setSelectedBankAccountPk(state, { payload }) {
+      state.selectedBankAccountPk = payload;
+    },
+    setLoyaltyBalance(state, { payload }) {
+      state.loyaltyBalance = payload;
+    }
+  }
+});
+
+export const {
+  resetCheckoutState,
+  setErrors,
+  setHasGiftBox,
+  setCanGuestPurchase,
+  setCurrentStep,
+  setShippingStepCompleted,
+  setShippingStepBusy,
+  setPaymentStepCompleted,
+  setPaymentStepBusy,
+  setPreOrder,
+  setAddressList,
+  setDeliveryOptions,
+  setShippingOptions,
+  setPaymentOptions,
+  setPaymentChoices,
+  setCardType,
+  setInstallmentOptions,
+  setBankAccounts,
+  setSelectedBankAccountPk,
+  setLoyaltyBalance
+} = checkoutSlice.actions;
+
+export default checkoutSlice.reducer;

package/redux/reducers/config.ts

@@ -0,0 +1,28 @@
+'use client';
+
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { Config } from '../../types';
+
+const initialState: Config = {
+  user_phone_regex: '^(05)\\d{9}$',
+  user_phone_format: '05999999999',
+  country: {
+    pk: 1,
+    name: 'Türkiye',
+    code: 'tr'
+  }
+};
+
+const configSlice = createSlice({
+  name: 'config',
+  initialState,
+  reducers: {
+    setConfig: (state, action: PayloadAction<Config>) => {
+      return action.payload;
+    }
+  }
+});
+
+export const { setConfig } = configSlice.actions;
+
+export default configSlice.reducer;

package/redux/reducers/header.ts

@@ -0,0 +1,59 @@
+'use client';
+
+import { createSlice } from '@reduxjs/toolkit';
+
+export interface HeaderState {
+  isMobileMenuOpen: boolean;
+  isSearchOpen: boolean;
+  openedMenu: string | null;
+}
+
+const initialState: HeaderState = {
+  isMobileMenuOpen: false,
+  isSearchOpen: false,
+  openedMenu: null
+};
+
+const headerSlice = createSlice({
+  name: 'header',
+  initialState,
+  reducers: {
+    openMobileMenu(state) {
+      state.isMobileMenuOpen = true;
+    },
+    closeMobileMenu(state) {
+      state.isMobileMenuOpen = false;
+    },
+    toggleMobileMenu(state) {
+      state.isMobileMenuOpen = !state.isMobileMenuOpen;
+    },
+    openSearch(state) {
+      state.isSearchOpen = true;
+    },
+    closeSearch(state) {
+      state.isSearchOpen = false;
+    },
+    toggleSearch(state) {
+      state.isSearchOpen = !state.isSearchOpen;
+    },
+    setOpenedMenu(state, action) {
+      state.openedMenu = action.payload;
+    },
+    resetHeaderState() {
+      return initialState;
+    }
+  }
+});
+
+export const {
+  openMobileMenu,
+  closeMobileMenu,
+  toggleMobileMenu,
+  openSearch,
+  closeSearch,
+  toggleSearch,
+  setOpenedMenu,
+  resetHeaderState
+} = headerSlice.actions;
+
+export default headerSlice.reducer;

package/redux/reducers/index.ts

@@ -0,0 +1,15 @@
+import rootReducer from './root';
+import checkoutReducer from './checkout';
+import configReducer from './config';
+import headerReducer from './header';
+import { api } from '../../data/client/api';
+
+const reducers = {
+  [api.reducerPath]: api.reducer,
+  root: rootReducer,
+  checkout: checkoutReducer,
+  config: configReducer,
+  header: headerReducer
+};
+
+export default reducers;

package/redux/reducers/root.ts

@@ -0,0 +1,61 @@
+import { createSlice } from '@reduxjs/toolkit';
+import Settings from 'settings';
+
+const initialState = {
+  commerceUrl: Settings.commerceUrl,
+  isMobileApp:
+    typeof window !== 'undefined' &&
+    localStorage.getItem('isMobileApp') === 'true',
+  miniBasket: {
+    open: false,
+    highlightedItem: null
+  },
+  rootModal: {
+    open: false,
+    title: null,
+    content: null
+  }
+};
+
+const rootSlice = createSlice({
+  name: 'root',
+  initialState,
+  reducers: {
+    openMiniBasket: (state) => {
+      state.miniBasket.open = true;
+    },
+    closeMiniBasket: (state) => {
+      state.miniBasket.open = false;
+    },
+    toggleMiniBasket: (state) => {
+      state.miniBasket.open = !state.miniBasket.open;
+    },
+    setHighlightedItem: (state, action: { payload: number | null }) => {
+      state.miniBasket.highlightedItem = action.payload;
+    },
+    openRootModal: (
+      state,
+      action: { payload: { title?: string; content?: string } }
+    ) => {
+      state.rootModal.open = true;
+      state.rootModal.title = action.payload.title;
+      state.rootModal.content = action.payload.content;
+    },
+    closeRootModal: (state) => {
+      state.rootModal.open = false;
+      state.rootModal.title = null;
+      state.rootModal.content = null;
+    }
+  }
+});
+
+export const {
+  openMiniBasket,
+  closeMiniBasket,
+  toggleMiniBasket,
+  setHighlightedItem,
+  openRootModal,
+  closeRootModal
+} = rootSlice.actions;
+
+export default rootSlice.reducer;