@akinon/next 1.45.0 → 1.47.0-rc.0

package/redux/reducers/checkout.ts

@@ -14,12 +14,13 @@ import {
   CheckoutCreditPaymentOption,
   PreOrder,
   RetailStore,
-  ShippingOption
+  ShippingOption,
+  DataSource,
+  AttributeBasedShippingOption
 } from '../../types';
 
 export interface CheckoutState {
-  // TODO: Add types
-  errors: any;
+  errors: Record<string, string[]>;
   hasGiftBox: boolean;
   canGuestPurchase: boolean;
   steps: {
@@ -37,6 +38,7 @@ export interface CheckoutState {
   addressList: Address[];
   deliveryOptions: DeliveryOption[];
   shippingOptions: ShippingOption[];
+  dataSourceShippingOptions: DataSource[];
   paymentOptions: PaymentOption[];
   creditPaymentOptions: CheckoutCreditPaymentOption[];
   selectedCreditPaymentPk: number;
@@ -47,6 +49,8 @@ export interface CheckoutState {
   selectedBankAccountPk: number;
   loyaltyBalance?: string;
   retailStores: RetailStore[];
+  attributeBasedShippingOptions: AttributeBasedShippingOption[];
+  selectedShippingOptions: Record<string, number>;
 }
 
 const initialState: CheckoutState = {
@@ -68,6 +72,7 @@ const initialState: CheckoutState = {
   addressList: [],
   deliveryOptions: [],
   shippingOptions: [],
+  dataSourceShippingOptions: [],
   paymentOptions: [],
   creditPaymentOptions: [],
   selectedCreditPaymentPk: null,
@@ -76,7 +81,9 @@ const initialState: CheckoutState = {
   installmentOptions: [],
   bankAccounts: [],
   selectedBankAccountPk: null,
-  retailStores: []
+  retailStores: [],
+  attributeBasedShippingOptions: [],
+  selectedShippingOptions: {}
 };
 
 const checkoutSlice = createSlice({
@@ -122,6 +129,9 @@ const checkoutSlice = createSlice({
     setShippingOptions(state, { payload }) {
       state.shippingOptions = payload;
     },
+    setDataSourceShippingOptions(state, { payload }) {
+      state.dataSourceShippingOptions = payload;
+    },
     setPaymentOptions(state, { payload }) {
       state.paymentOptions = payload;
     },
@@ -151,6 +161,12 @@ const checkoutSlice = createSlice({
     },
     setRetailStores(state, { payload }) {
       state.retailStores = payload;
+    },
+    setAttributeBasedShippingOptions(state, { payload }) {
+      state.attributeBasedShippingOptions = payload;
+    },
+    setSelectedShippingOptions: (state, { payload }) => {
+      state.selectedShippingOptions = payload;
     }
   }
 });
@@ -169,6 +185,7 @@ export const {
   setAddressList,
   setDeliveryOptions,
   setShippingOptions,
+  setDataSourceShippingOptions,
   setPaymentOptions,
   setCreditPaymentOptions,
   setSelectedCreditPaymentPk,
@@ -178,7 +195,9 @@ export const {
   setBankAccounts,
   setSelectedBankAccountPk,
   setLoyaltyBalance,
-  setRetailStores
+  setRetailStores,
+  setAttributeBasedShippingOptions,
+  setSelectedShippingOptions
 } = checkoutSlice.actions;
 
 export default checkoutSlice.reducer;

package/redux/reducers/config.ts

@@ -6,6 +6,8 @@ import { Config } from '../../types';
 const initialState: Config = {
   user_phone_regex: '^(05)\\d{9}$',
   user_phone_format: '05999999999',
+  user_post_code_regex: '^\\d{5}$',
+  user_post_code_format: '99999',
   country: {
     pk: 1,
     name: 'Türkiye',

package/routes/pretty-url.tsx

@@ -0,0 +1,194 @@
+import { URLS } from '@akinon/next/data/urls';
+import { Metadata, PageProps } from '@akinon/next/types';
+import logger from '@akinon/next/utils/log';
+import { notFound } from 'next/navigation';
+
+type PrettyUrlResult = {
+  matched: boolean;
+  path?: string;
+  pk?: number;
+};
+
+const resolvePrettyUrlHandler =
+  (pathname: string, ip: string | null) => async () => {
+    let results = [] as { old_path: string }[];
+    let prettyUrlResult: PrettyUrlResult = {
+      matched: false
+    };
+
+    try {
+      const requestUrl = URLS.misc.prettyUrls(`/${pathname}/`);
+
+      logger.debug(`Resolving pretty url`, { pathname, requestUrl, ip });
+
+      const start = Date.now();
+      const apiResponse = await fetch(requestUrl, {
+        next: {
+          revalidate: 0
+        }
+      });
+      const data = await apiResponse.json();
+      ({ results } = data);
+      const end = Date.now();
+      console.warn('Pretty url response time', end - start, requestUrl);
+
+      const matched = results.length > 0;
+      const [{ old_path: path } = { old_path: '' }] = results;
+      let pk;
+
+      if (matched) {
+        const pkRegex = /\/(\d+)\/$/;
+        const match = path.match(pkRegex);
+        pk = match ? parseInt(match[1]) : undefined;
+      }
+
+      prettyUrlResult = {
+        matched,
+        path,
+        pk
+      };
+
+      logger.trace('Pretty url result', { prettyUrlResult, ip });
+    } catch (error) {
+      logger.error('Error resolving pretty url', { error, pathname, ip });
+    }
+
+    return prettyUrlResult;
+  };
+
+export async function generateMetadata({ params }: PageProps) {
+  let result: Metadata = {};
+  const { prettyurl } = params;
+  const pageSlug = prettyurl
+    .filter((x) => !x.startsWith('searchparams'))
+    .join('/');
+
+  const searchParams = Object.fromEntries(
+    new URLSearchParams(
+      decodeURIComponent(
+        prettyurl
+          .find((x) => x.startsWith('searchparams'))
+          ?.replace('searchparams%7C', '')
+      ) ?? {}
+    ).entries()
+  );
+
+  const prettyUrlResult = await resolvePrettyUrlHandler(pageSlug, null)();
+
+  if (!prettyUrlResult.matched) {
+    return notFound();
+  }
+
+  const commonProps = {
+    params: {
+      ...params,
+      pk: prettyUrlResult.pk
+    },
+    searchParams
+  };
+
+  try {
+    if (prettyUrlResult.path.startsWith('/product/')) {
+      await import('@product/[pk]/page').then(async (module) => {
+        result = await module['generateMetadata']?.(commonProps);
+      });
+    }
+
+    if (prettyUrlResult.path.startsWith('/group-product/')) {
+      await import('@group-product/[pk]/page').then(async (module) => {
+        result = await module['generateMetadata']?.(commonProps);
+      });
+    }
+
+    if (prettyUrlResult.path.startsWith('/category/')) {
+      await import('@category/[pk]/page').then(async (module) => {
+        result = await module['generateMetadata']?.(commonProps);
+      });
+    }
+
+    if (prettyUrlResult.path.startsWith('/special-page/')) {
+      await import('@special-page/[pk]/page').then(async (module) => {
+        result = await module['generateMetadata']?.(commonProps);
+      });
+    }
+
+    if (prettyUrlResult.path.startsWith('/flat-page/')) {
+      await import('@flat-page/[pk]/page').then(async (module) => {
+        result = await module['generateMetadata']?.(commonProps);
+      });
+    }
+    // eslint-disable-next-line no-empty
+  } catch (error) {}
+
+  return result;
+}
+
+export const dynamic = 'force-static';
+export const revalidate = 300;
+
+export default async function Page({ params }) {
+  const { prettyurl } = params;
+  const pageSlug = prettyurl
+    .filter((x) => !x.startsWith('searchparams'))
+    .join('/');
+
+  const urlSearchParams = new URLSearchParams(
+    decodeURIComponent(
+      prettyurl
+        .find((x) => x.startsWith('searchparams'))
+        ?.replace('searchparams%7C', '')
+    ) ?? {}
+  );
+
+  const searchParams = {};
+
+  for (const [key, value] of urlSearchParams.entries() as unknown as Array<
+    [string, string]
+  >) {
+    if (!searchParams[key]) {
+      searchParams[key] = [];
+    }
+    searchParams[key].push(value);
+  }
+
+  const result = await resolvePrettyUrlHandler(pageSlug, null)();
+
+  if (!result.matched) {
+    return notFound();
+  }
+
+  const commonProps = {
+    params: {
+      ...params,
+      pk: result.pk
+    },
+    searchParams
+  };
+
+  if (result.path.startsWith('/category/')) {
+    const CategoryPage = (await import('@category/[pk]/page')).default;
+    return <CategoryPage {...commonProps} />;
+  }
+
+  if (result.path.startsWith('/product/')) {
+    const ProductPage = (await import('@product/[pk]/page')).default;
+    return <ProductPage {...commonProps} />;
+  }
+
+  if (result.path.startsWith('/group-product/')) {
+    const GroupProduct = (await import('@group-product/[pk]/page')).default;
+    return <GroupProduct {...commonProps} />;
+  }
+
+  if (result.path.startsWith('/special-page/')) {
+    const SpecialPage = (await import('@special-page/[pk]/page')).default;
+    return <SpecialPage {...commonProps} />;
+  }
+
+  if (result.path.startsWith('/flat-page/')) {
+    const FlatPage = (await import('@flat-page/[pk]/page')).default;
+    return <FlatPage {...commonProps} />;
+  }
+
+  return null;
+}

package/types/commerce/account.ts

@@ -61,4 +61,5 @@ export type ContactFormType = {
   order?: string;
   country_code?: string;
   order_needed?: boolean;
+  file?: FileList
 };

package/types/commerce/address.ts

@@ -17,7 +17,7 @@ export type AddressFormType = {
   line: string;
   postcode: string;
   company_name?: string;
-  tax_no?: number;
+  tax_no?: string;
   tax_office?: string;
   e_bill_taxpayer?: boolean;
   country_code?: string;

package/types/commerce/b2b.ts

@@ -72,7 +72,7 @@ export type BasketItemType = {
   divisions: BasketItemDivision[];
   product: ProductB2b;
   product_remote_id: number;
-}
+};
 
 export type BasketParams = {
   division: string;
@@ -91,7 +91,7 @@ export type CreateQuotationParams = {
 export type UpdateProductParams = {
   product_remote_id: number;
   division: number;
-  quantity: number
+  quantity: number;
 };
 
 export type DeleteProductParams = {
@@ -115,3 +115,13 @@ export type DraftResponse = {
   total_amount: number;
   total_quantity: number;
 };
+
+export type BasketStatusResponse = {
+  is_ready: boolean;
+  status: string;
+  url: string;
+};
+
+export type ExportBasketResponse = {
+  cache_key: string;
+};

package/types/commerce/checkout.ts

@@ -33,6 +33,23 @@ export interface ShippingOption {
   slug: string;
 }
 
+export interface DataSource {
+  pk: number;
+  name: string;
+  data_source_shipping_options: DataSourceShippingOption[];
+}
+
+export interface DataSourceShippingOption {
+  pk: number;
+  shipping_amount: string;
+  shipping_option_name: string;
+  shipping_option_logo: string | null;
+  data_source: {
+    pk: number;
+    title: string | null;
+  };
+}
+
 export interface CheckoutAddressType {
   label: string;
   text: string;
@@ -78,6 +95,8 @@ export interface PreOrder {
   retail_store?: RetailStore;
   gift_box?: GiftBox;
   credit_payment_option?: CheckoutCreditPaymentOption;
+  data_source_shipping_options: any;
+  attribute_based_shipping_options?: AttributeBasedShippingOption[];
 }
 
 export interface GuestLoginFormParams {
@@ -117,6 +136,7 @@ export interface CheckoutContext {
     redirect_url?: string;
     context_data?: any;
     balance?: string;
+    attribute_based_shipping_options?: AttributeBasedShippingOption[];
     [key: string]: any;
   };
 }
@@ -142,3 +162,13 @@ export interface BankAccount {
   pk: number;
   sort_order: number;
 }
+
+export interface AttributeBasedShippingOption {
+  pk: number;
+  shipping_amount: string | null;
+  shipping_option_name: string | null;
+  shipping_option_logo: string | null;
+  attribute_value: string | null;
+  attribute_key: string;
+  [key: string]: any;
+}

package/types/commerce/misc.ts

@@ -2,6 +2,8 @@ import { District } from './address';
 export interface Config {
   user_phone_regex: string;
   user_phone_format: string;
+  user_post_code_regex: string;
+  user_post_code_format: string;
   country: {
     pk: number;
     name: string;

package/types/commerce/order.ts

@@ -52,6 +52,10 @@ export interface OrderItem {
   quantity: string;
   unit_price: string;
   total_amount: string;
+  attributes: {
+    gift_note: string;
+    [key: string]: any;
+  };
 }
 
 export interface Order {
@@ -105,6 +109,14 @@ export interface Order {
   shipping_option: number;
   tracking_number: string;
   tracking_url: string;
+  [key: string]: any;
+  bank: {
+    pk: number;
+    name: string;
+    slug: string;
+    logo: string;
+    [key: string]: any;
+  };
 }
 
 export interface Quotations {

package/types/index.ts

@@ -2,7 +2,7 @@ import { LocaleUrlStrategy } from '../localization';
 import { PzNextRequest } from '../middlewares';
 import { Control, FieldError } from 'react-hook-form';
 import { ReactNode } from 'react';
-
+import { UsePaginationType } from '../hooks/use-pagination';
 declare global {
   interface Window {
     // we did it like this because declare types needs to be identical, if not it will fail
@@ -68,9 +68,17 @@ export interface Currency {
    * @see https://en.wikipedia.org/wiki/ISO_4217
    */
   code: string;
+  /**
+   * Number of decimal places to display.
+   *
+   * @example
+   * decimalScale: 3
+   */
+  decimalScale?: number;
 }
 
 export interface Settings {
+  usePrettyUrlRoute?: boolean;
   commerceUrl: string;
   redis: {
     defaultExpirationTime: number;
@@ -216,7 +224,7 @@ export type Translations = { [key: string]: object };
 
 export interface PageProps<T = any> {
   params: T;
-  searchParams: URLSearchParams;
+  searchParams: { [key: string]: string | string[] | undefined };
 }
 
 export interface LayoutProps<T = any> extends PageProps<T> {
@@ -250,6 +258,8 @@ export interface ButtonProps
   appearance?: 'filled' | 'outlined' | 'ghost';
 }
 
+export type FileInputProps = React.HTMLProps<HTMLInputElement>;
+
 export interface PriceProps {
   currencyCode?: string;
   useCurrencySymbol?: boolean;
@@ -283,3 +293,21 @@ export interface AccordionProps {
 export interface PluginModuleComponentProps {
   settings?: Record<string, any>;
 }
+
+export interface PaginationProps {
+  total: number | undefined;
+  limit?: number | undefined;
+  currentPage: number | undefined;
+  numberOfPages?: number | undefined;
+  containerClassName?: string;
+  moreButtonClassName?: string;
+  prevClassName?: string;
+  nextClassName?: string;
+  pageClassName?: string;
+  threshold?: number | undefined;
+  delta?: number | undefined;
+  render?: (pagination: UsePaginationType) => ReactNode;
+  type?: 'infinite' | 'list' | 'more';
+  onPageChange?: (page: number) => void;
+  direction?: 'next' | 'prev';
+}

package/utils/app-fetch.ts

@@ -41,7 +41,7 @@ const appFetch = async <T>(
     };
 
     init.next = {
-      revalidate: 60
+      revalidate: Settings.usePrettyUrlRoute ? 0 : 60
     };
 
     logger.debug(`FETCH START ${url}`, { requestURL, init, ip });

package/utils/generate-commerce-search-params.ts

@@ -1,11 +1,15 @@
 import logger from './log';
 
-export const generateCommerceSearchParams = (searchParams?: URLSearchParams) => {
+export const generateCommerceSearchParams = (searchParams?: {
+  [key: string]: string | string[] | undefined;
+}) => {
   if (!searchParams) {
     return null;
   }
 
-  const urlSerchParams = new URLSearchParams(searchParams);
+  const urlSerchParams = new URLSearchParams(
+    searchParams as Record<string, string>
+  );
 
   Object.entries(searchParams).forEach(([key, value]) => {
     if (typeof value === 'object') {

package/utils/index.ts

@@ -63,18 +63,33 @@ export function getTranslateFn(path: string, translations: any) {
 
 export function buildClientRequestUrl(
   path: string,
-  options?: ClientRequestOptions
+  options?: ClientRequestOptions & { cache?: boolean }
 ) {
   let url = `/api/client${path}`;
 
+  let hasQuery = url.includes('?');
+
   if (options) {
-    if (url.includes('?')) {
-      url += '&';
-    } else {
-      url += '?';
+    const { cache, ...otherOptions } = options;
+
+    if (Object.keys(otherOptions).length > 0) {
+      if (hasQuery) {
+        url += '&';
+      } else {
+        url += '?';
+        hasQuery = true;
+      }
+      url += `options=${encodeURIComponent(JSON.stringify(otherOptions))}`;
     }
 
-    url += `options=${encodeURIComponent(JSON.stringify(options))}`;
+    if (cache === false) {
+      if (hasQuery) {
+        url += '&';
+      } else {
+        url += '?';
+      }
+      url += `t=${Date.now()}`;
+    }
   }
 
   return url;
@@ -102,6 +117,12 @@ export function buildCDNUrl(url: string, config?: CDNOptions) {
     ''
   );
 
+  const noOptionFileExtension = url?.split('.').pop()?.toLowerCase() ?? '';
+
+  if (noOptionFileExtension === 'svg' || noOptionFileExtension === 'gif') {
+    return url;
+  }
+
   let options = '';
 
   if (config) {

package/utils/menu-generator.ts

@@ -13,8 +13,8 @@ export const menuGenerator = (arr: MenuItemType[]) => {
     });
 
     Object.values(data).forEach((item) => {
-      if (item.parent) {
-        data[item.parent.pk].children.push(item);
+      if (item.parent_pk) {
+        data[item.parent_pk].children.push(item);
       } else {
         tree.push(item);
       }

package/utils/redirection-iframe.ts

@@ -0,0 +1,85 @@
+const iframeURLChange = (iframe, callback) => {
+  iframe.addEventListener('load', () => {
+    setTimeout(() => {
+      if (iframe?.contentWindow?.location) {
+        callback(iframe.contentWindow.location);
+      }
+    }, 0);
+  });
+};
+
+const removeIframe = async () => {
+  const iframeSelector = document.querySelector(
+    '.checkout-payment-redirection-iframe-wrapper'
+  );
+
+  const redirectionPaymentWrapper = document.querySelector(
+    '.checkout-redirection-payment-wrapper'
+  );
+
+  const form = redirectionPaymentWrapper.querySelector('form') as HTMLElement;
+
+  if (!iframeSelector) {
+    return;
+  }
+
+  iframeSelector.remove();
+
+  if (form) {
+    form.style.display = 'block';
+  }
+
+  location.reload();
+};
+
+export const showRedirectionIframe = (redirectUrl: string) => {
+  const iframeWrapper = document.createElement('div');
+  const iframe = document.createElement('iframe');
+  const closeButton = document.createElement('div');
+  const redirectionPaymentWrapper = document.querySelector(
+    '.checkout-redirection-payment-wrapper'
+  );
+  const form = redirectionPaymentWrapper.querySelector('form') as HTMLElement;
+
+  iframeWrapper.className = 'checkout-payment-redirection-iframe-wrapper';
+  closeButton.className = 'close-button';
+
+  iframe.setAttribute('src', redirectUrl);
+  closeButton.innerHTML = '&#x2715';
+  closeButton.addEventListener('click', removeIframe);
+
+  iframeWrapper.append(iframe, closeButton);
+
+  if (form) {
+    form.style.display = 'none';
+  }
+
+  redirectionPaymentWrapper.appendChild(iframeWrapper);
+
+  iframeURLChange(iframe, (location) => {
+    if (location.origin !== window.location.origin) {
+      return false;
+    }
+
+    const searchParams = new URLSearchParams(location.search);
+    const isOrderCompleted = location.href.includes('/orders/completed');
+
+    if (isOrderCompleted) {
+      (window.parent as any)?.postMessage?.(
+        JSON.stringify({
+          url: location.pathname
+        })
+      );
+    }
+
+    if (
+      searchParams.has('success') ||
+      isOrderCompleted ||
+      location.href.includes('/orders/checkout')
+    ) {
+      setTimeout(() => {
+        removeIframe();
+      }, 0);
+    }
+  });
+};