@akinon/next 1.0.0

package/data/server/seo.ts

@@ -0,0 +1,48 @@
+import appFetch from '../../utils/app-fetch';
+import { Cache, CacheKey } from '../../lib/cache';
+import { misc } from '../../data/urls';
+import logger from '../../utils/log';
+
+function getRootSeoDataHandler() {
+  return async function () {
+    let data = {};
+
+    try {
+      data = await appFetch<{ [key: string]: string }>(misc.cmsSeo('/'));
+    } catch (error) {
+      logger.error('Error while fetching root seo data', error);
+    }
+
+    return data;
+  };
+}
+
+function getSeoDataHandler(url: string) {
+  return async function () {
+    let data = {} as {
+      title: string;
+      description: string;
+      keywords: string;
+      [key: string]: string;
+    };
+
+    try {
+      data = await appFetch(misc.cmsSeo(url));
+    } catch (error) {
+      logger.error('Error while fetching seo data', { url, error });
+    }
+
+    return data;
+  };
+}
+
+/**
+ * @deprecated Use getSeoData instead
+ */
+export const getRootSeo = async () => {
+  return Cache.wrap(CacheKey.RootSeo, getRootSeoDataHandler());
+};
+
+export const getSeoData = async (url: string) => {
+  return Cache.wrap(CacheKey.Seo(url), getSeoDataHandler(url));
+};

package/data/server/special-page.ts

@@ -0,0 +1,42 @@
+import { Cache, CacheKey } from '../../lib/cache';
+import { category } from '../urls';
+import { GetCategoryResponse } from '../../types';
+import { generateCommerceSearchParams } from '../../utils';
+import appFetch from '../../utils/app-fetch';
+
+const getSpecialPageDataHandler = (
+  pk: number,
+  searchParams: URLSearchParams
+) => {
+  return async function () {
+    const params = generateCommerceSearchParams(searchParams);
+
+    const data: GetCategoryResponse = await appFetch(
+      `${category.getSpecialPageByPk(pk)}${params}`,
+      {
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json'
+        }
+      }
+    );
+
+    return data;
+  };
+};
+
+export const getSpecialPageData = async ({
+  pk,
+  searchParams
+}: {
+  pk: number;
+  searchParams: URLSearchParams;
+}) => {
+  return Cache.wrap(
+    CacheKey.SpecialPage(pk, searchParams),
+    getSpecialPageDataHandler(pk, searchParams),
+    {
+      expire: 300
+    }
+  );
+};

package/data/server/widget.ts

@@ -0,0 +1,27 @@
+import { Cache, CacheKey } from '../../lib/cache';
+import 'server-only';
+import { CacheOptions, WidgetResultType } from '../../types';
+import appFetch from '../../utils/app-fetch';
+import { widgets } from '../urls';
+
+const getWidgetDataHandler = (slug: string) => async () => {
+  if (!slug) {
+    return null;
+  }
+
+  return await appFetch(widgets.getWidgets(slug));
+};
+
+export const getWidgetData = async <T>({
+  slug,
+  cacheOptions
+}: {
+  slug: string;
+  cacheOptions?: CacheOptions;
+}): Promise<WidgetResultType<T>> => {
+  return Cache.wrap(
+    CacheKey.Widget(slug),
+    getWidgetDataHandler(slug),
+    cacheOptions
+  );
+};

package/data/urls.ts

@@ -0,0 +1,184 @@
+import Settings from 'settings';
+
+const API_URL = Settings.commerceUrl;
+
+export const account = {
+  order: '/users/orders',
+  orderId: (id: string | string[]) => `/users/orders/${id}`,
+  cancelOrder: (id: string) => `/orders/${id}/cancel`,
+  cancellationReasons: '/users/orders/cancellation_reasons',
+  updatePassword: '/users/password/change',
+  updateEmail: '/users/email-change',
+  updateProfile: '/users/profile',
+  getContactSubjects: '/users/contact-us-subjects',
+  getOrders: ({
+    page,
+    limit,
+    createdDate
+  }: {
+    page?: number;
+    limit?: number;
+    createdDate?: string;
+  }) =>
+    `/users/orders?page=${page || 1}&limit=${limit || 12} ${
+      createdDate ? `&created_date__gte=${createdDate}` : ''
+    }`,
+  sendContact: '/users/contact-us',
+  passwordReset: (slug: string) => `/users/reset/${slug}`,
+  anonymize: '/users/anonymize/',
+  loyaltyBalance: '/account/loyalty-account-balance/',
+  loyaltyTransactions: '/account/loyalty/'
+};
+
+export const address = {
+  base: '/address',
+  countries: '/address/country',
+  getAddresses: '/address/detailed',
+  getCities: (country: string) => `/address/city?country=${country}`,
+  getTownships: (city: string) => `/address/township?city=${city}`,
+  getDistricts: (township: string) => `/address/district?township=${township}`,
+  getRetailStore: '/address/city?retailstore__isnull=false',
+  getRetailStoreCities: (country: string) =>
+    `/address/city?retailstore__isnull=false&country=${country}`,
+  getRetailStoreTownships: (city: string) =>
+    `/address/township?retailstore__isnull=false&city=${city}`,
+  editAddress: (pk: number) => `/address/${pk}`,
+  removeAddress: (id: number) => `/address/${id}`,
+  setDefaultAddress: (pk: number) => `/address/${pk}`
+};
+
+export const basket = {
+  getBasket: '/baskets/basket'
+};
+
+export const category = {
+  // eslint-disable-next-line projectzero/client-url
+  list: '/list/',
+  getCategoryByPk: (pk: number) => `/category/${pk}/`,
+  getCategoryBySlug: (slug: string) => `/${slug}`,
+  getSpecialPageByPk: (pk: number) => `/special-page/${pk}/`
+};
+
+export const checkout = {
+  get3dRedirectForm: '/orders/redirect-three-d',
+  fetchCheckout: '/orders/checkout',
+  fetchCheckoutResult: (token: string) =>
+    `/orders/completed/${token}?format=json`,
+  getContract: (slug: string) => `/orders/contract?contract_name=${slug}`,
+  completeCreditCardPayment: '/orders/checkout?page=CreditCardConfirmationPage',
+  completeFundsTransfer: '/orders/checkout?page=FundsTransferPage',
+  guestLogin: '/orders/checkout?page=IndexPage',
+  setDeliveryOption: '/orders/checkout?page=DeliveryOptionSelectionPage',
+  setAddresses: '/orders/checkout?page=AddressSelectionPage',
+  setShippingOption: '/orders/checkout?page=ShippingOptionSelectionPage',
+  setPaymentOption: '/orders/checkout?page=PaymentOptionSelectionPage',
+  setBinNumber: '/orders/checkout?page=BinNumberPage',
+  setMasterpassBinNumber: '/orders/checkout?page=MasterpassBinNumberPage',
+  setInstallmentOption: '/orders/checkout?page=InstallmentSelectionPage',
+  setMasterPassInstallmentOption:
+    '/orders/checkout?page=MasterpassInstallmentPage',
+  setFundsTransferOption: '/orders/checkout?page=FundsTransferChoicePage',
+  getCheckoutProviders: '/orders/checkout?page=CheckoutProviderIndexPage',
+  setCheckoutProvider: '/orders/checkout?page=CheckoutProviderSelectionPage',
+  completeRedirectionPayment:
+    '/orders/checkout?page=RedirectionPaymentSelectedPage',
+  confirmationPaymentSelect:
+    '/orders/checkout?page=ConfirmationPaymentSelectedPage',
+  confirmationQuery: '/orders/checkout?page=ConfirmationPaymentQueryPage',
+  confirmationComplete: '/orders/checkout?page=ConfirmationPaymentCompletePage',
+  completeLoyaltyPayment: '/orders/checkout?page=LoyaltyPaymentSelectedPage',
+  loyaltyMoneyUsage: '/orders/checkout?page=LoyaltyMoneyUsagePage',
+  setOrderNote: '/orders/checkout?page=OrderNotePage'
+};
+
+export const flatpage = {
+  getFlatPageByPk: (pk: number) => `/shop-flat-page/${pk}/`
+};
+
+export const misc = {
+  autocomplete: '/autocomplete',
+  stores: '/stores',
+  menu: '/misc/menus/generate',
+  prettyUrl: (pathname: string) => `/misc/pretty-url${pathname}/`,
+  prettyUrls: (pathname: string) => `/pretty_urls/?new_path__exact=${pathname}`,
+  emailSubscription: '/email-subscription',
+  menus: (depthHeight: number, parent?: string) =>
+    `/menus/generate/?depth_height=${depthHeight}${
+      parent ? `&parent=${parent}` : ''
+    }`,
+  // eslint-disable-next-line projectzero/client-url
+  cmsSeo: (slug: string | string[]) => `/cms/seo/?url=${slug ? slug : '/'}`,
+  setCurrency: '/users/activate-currency'
+};
+
+export const product = {
+  category: (productId: number) => `/product/${productId}/category/`,
+  installments: (productId: number) => `/payments/cards/product/${productId}`,
+  getProductByPk: (pk: number) => `/product/${pk}`,
+  getGroupProductByPk: (pk: number) => `/group-product/${pk}`,
+  getRetailStoreStock: (productPk: string, store: string, hasVariant: string) =>
+    `/retail_store_stock/${productPk}?city_id=${store}${hasVariant}`,
+  addProduct: '/baskets/basket',
+  slug: (slug: string) => `/${slug}`,
+  categoryUrl: (pk: number) => `/products/${pk}/category_nodes/?limit=1`,
+  breadcrumbUrl: (menuitemmodel: string) =>
+    `/menus/generate_breadcrumb/?item=${menuitemmodel}&generator_name=menu_item`
+};
+
+export const wishlist = {
+  getFavorites: ({ page, limit }: { page?: number; limit?: number }) =>
+    `/wishlists/favourite-products?limit=${limit || 12}&page=${page || 1}`,
+  addFavorite: '/wishlists/favourite-products',
+  removeFavorite: (favPk: number) => `/wishlists/favourite-products/${favPk}`,
+  addStockAlert: '/wishlists/product-alerts'
+};
+
+export const user = {
+  currentUser: '/current_user',
+  login: '/users/login',
+  // eslint-disable-next-line projectzero/client-url
+  register: '/users/registration/',
+  logout: '/users/logout',
+  captcha: '/users/pz-captcha',
+  profiles: '/users/profile',
+  forgotPassword: '/users/password/reset',
+  csrfToken: '/csrf_token'
+};
+
+export const widgets = {
+  getWidgets: (slug: string) => `/widgets/${slug}`
+};
+
+const URLS = {
+  account,
+  address,
+  basket,
+  category,
+  checkout,
+  flatpage,
+  misc,
+  product,
+  wishlist,
+  user,
+  widgets
+};
+
+const UrlProxyHandler = {
+  get(target, prop, receiver) {
+    if (typeof target[prop] === 'function') {
+      return new Proxy(target[prop], {
+        apply(target, thisArgs, argumentList) {
+          return `${API_URL}${target(...argumentList)}`;
+        }
+      });
+    }
+
+    return `${API_URL}${target[prop]}`;
+  }
+};
+
+Object.keys(URLS).forEach((key) => {
+  URLS[key] = new Proxy(URLS[key], UrlProxyHandler);
+});
+
+export { URLS };

package/hocs/client/index.ts

@@ -0,0 +1 @@
+export * from './with-segment-defaults';

package/hocs/client/with-segment-defaults.tsx

@@ -0,0 +1,26 @@
+import { LayoutProps, PageProps, RootLayoutProps } from '../../types';
+import React from 'react';
+
+type SegmentType = 'client-root' | 'layout' | 'page';
+
+interface SegmentDefaultsOptions {
+  segmentType: SegmentType;
+}
+
+export const withSegmentDefaults =
+  <T extends PageProps | LayoutProps | RootLayoutProps>(
+    Component: (
+      props?: T
+    ) => null | JSX.Element | Promise<JSX.Element> | Promise<JSX.Element[]>,
+    options: SegmentDefaultsOptions
+  ) =>
+  (props: T) => {
+    let componentProps = { ...props };
+
+    return (
+      <>
+        {/* @ts-expect-error Server Component */}
+        <Component {...componentProps} />
+      </>
+    );
+  };

package/hocs/server/index.ts

@@ -0,0 +1 @@
+export * from './with-segment-defaults';

package/hocs/server/with-segment-defaults.tsx

@@ -0,0 +1,83 @@
+import settings from 'settings';
+import { LayoutProps, PageProps, RootLayoutProps } from '../../types';
+import { redirect } from 'next/navigation';
+import { ServerVariables } from '../../utils/server-variables';
+import { getTranslations } from '../../utils/server-translation';
+import { ROUTES } from 'routes';
+import logger from '../../utils/log';
+
+type SegmentType = 'root-layout' | 'layout' | 'page';
+
+interface SegmentDefaultsOptions {
+  segmentType: SegmentType;
+}
+
+export const withSegmentDefaults =
+  <T extends PageProps | LayoutProps | RootLayoutProps>(
+    Component: (
+      props?: T
+    ) => null | JSX.Element | Promise<JSX.Element> | Promise<JSX.Element[]>,
+    options: SegmentDefaultsOptions
+  ) =>
+  async (props: T) => {
+    let componentProps = { ...props };
+
+    if (options.segmentType === 'root-layout') {
+      componentProps = (await addRootLayoutProps(
+        componentProps as RootLayoutProps
+      )) as T;
+
+      checkRedisVariables();
+    }
+
+    ServerVariables.locale = props.params.locale;
+    ServerVariables.currency = props.params.currency;
+
+    return await (
+      <>
+        {/* @ts-expect-error Server Component */}
+        <Component {...componentProps} />
+      </>
+    );
+  };
+
+const addRootLayoutProps = async (componentProps: RootLayoutProps) => {
+  const params = componentProps.params;
+
+  if (
+    params.commerce !== encodeURIComponent(decodeURI(settings.commerceUrl)) ||
+    !settings.localization.locales.find((l) => l.value === params.locale)
+  ) {
+    return redirect(ROUTES.HOME);
+  }
+
+  const translations = await getTranslations(params.locale);
+  componentProps.translations = translations;
+
+  const locale = settings.localization.locales.find(
+    (l) => l.value === params.locale
+  );
+  const [isoCode] = locale.value.split('-');
+
+  componentProps.locale = {
+    ...locale,
+    isoCode
+  };
+
+  return componentProps;
+};
+
+const checkRedisVariables = () => {
+  const requiredVariableValues = [
+    process.env.CACHE_HOST,
+    process.env.CACHE_PORT,
+    process.env.CACHE_SECRET
+  ];
+
+  if (!requiredVariableValues.every((v) => v)) {
+    logger.warn('Redis cache variables are not set', {
+      requiredVariables: ['CACHE_HOST', 'CACHE_PORT', 'CACHE_SECRET'],
+      values: requiredVariableValues
+    });
+  }
+};

package/hooks/index.ts

@@ -0,0 +1,8 @@
+export * from './use-router';
+export * from './use-localization';
+export * from './use-translation';
+export * from './use-captcha';
+export * from './use-common-product-attributes';
+export * from './use-debounce';
+export * from './use-media-query';
+export * from './use-on-click-outside';

package/hooks/use-captcha.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import ReCAPTCHA from 'react-google-recaptcha';
+import {
+  useGetCaptchaQuery,
+  useValidateCaptchaMutation
+} from '../data/client/user';
+import { setCookie } from '../utils';
+
+interface CaptchaViewProps {
+  className?: string;
+}
+
+export const useCaptcha = () => {
+  const { data } = useGetCaptchaQuery();
+  const { siteKey, csrfToken } = data ?? {};
+  const [validateCaptchaMutation] = useValidateCaptchaMutation();
+  const [validated, setValidated] = useState<boolean>(false);
+  const [isVisible, setIsVisible] = useState<boolean>(false);
+  const [captchaResponse, setCaptchaResponse] = useState<string>(null);
+
+  const validate = async () => {
+    if (!captchaResponse) {
+      setIsVisible(true);
+      return false;
+    }
+
+    setValidated(false);
+
+    const response = await validateCaptchaMutation({
+      captchaResponse,
+      csrfToken
+    }).unwrap();
+
+    setValidated(response.success);
+
+    return response.success;
+  };
+
+  if (csrfToken) {
+    setCookie('csrftoken', csrfToken);
+  }
+
+  const onCaptchaChange = useCallback(async (response) => {
+    setTimeout(() => {
+      setCaptchaResponse(response);
+    }, 500);
+  }, []);
+
+  useEffect(() => {
+    if (captchaResponse) {
+      validate();
+    }
+  }, [captchaResponse]);
+
+  const CaptchaView = useMemo(() => {
+    const View = (props: CaptchaViewProps) =>
+      isVisible && !captchaResponse ? (
+        <ReCAPTCHA
+          sitekey={siteKey}
+          onChange={onCaptchaChange}
+          className={props.className}
+        />
+      ) : null;
+
+    return View;
+  }, [siteKey, onCaptchaChange, isVisible, captchaResponse]);
+
+  return {
+    CaptchaView,
+    validated,
+    isVisible,
+    validate
+  };
+};

package/hooks/use-common-product-attributes.ts

@@ -0,0 +1,36 @@
+'use client';
+
+import Settings from 'settings';
+import { useLocalization } from './use-localization';
+
+type UseCommonProductAttributesArgs = {
+  attributes: { [key: string]: { value: string } };
+};
+
+type CommonProductAttributes = { name: string; value: string }[];
+
+export const useCommonProductAttributes = (
+  args: UseCommonProductAttributesArgs
+) => {
+  const { attributes } = args;
+  const commonProductAttributes: CommonProductAttributes = [];
+  const { t } = useLocalization();
+
+  Settings.commonProductAttributes.forEach((commonProductAttribute) => {
+    const attribute = Object.entries(attributes).find(
+      // Object.entries gives us an array of [key, value] pairs.
+      ([key]) => key === commonProductAttribute.key
+    )?.[1]; // We only want the value, so we get the second item in the array.
+
+    if (attribute) {
+      commonProductAttributes.push({
+        name: t(
+          `common.common_product_attributes.${commonProductAttribute.translationKey}`
+        ),
+        value: attribute.value
+      });
+    }
+  });
+
+  return commonProductAttributes;
+};

package/hooks/use-debounce.ts

@@ -0,0 +1,20 @@
+// https://usehooks.com/useDebounce/
+'use client';
+
+import { useEffect, useState } from 'react';
+
+export function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}

package/hooks/use-localization.ts

@@ -0,0 +1,63 @@
+'use client';
+
+import { LocalizationContext } from '../localization/provider';
+import { useContext } from 'react';
+import { urlLocaleMatcherRegex } from '../utils';
+import { LocaleUrlStrategy } from '../localization';
+import { useRouter } from 'next/navigation';
+
+export const useLocalization = () => {
+  const {
+    translate,
+    locale,
+    currency,
+    locales,
+    currencies,
+    defaultLocaleValue,
+    defaultCurrencyCode,
+    localeUrlStrategy
+  } = useContext(LocalizationContext);
+
+  const router = useRouter();
+
+  /**
+   * Sets the locale in the URL.
+   * @param locale Locale value defined in the settings.
+   */
+  const setLocale = (locale: string) => {
+    const localePath =
+      locale === defaultLocaleValue &&
+      localeUrlStrategy !== LocaleUrlStrategy.ShowAllLocales
+        ? ''
+        : `/${locale}`;
+
+    const pathnameWithoutLocale = location.pathname.replace(
+      urlLocaleMatcherRegex,
+      ''
+    );
+
+    router.push(`${localePath}${pathnameWithoutLocale}${location.search}`);
+  };
+
+  return {
+    /**
+     * Translate function
+     * @param path
+     * Path of the translation.
+     * It is a dot separated string e.g. "common.header.title".
+     * "common" is the file name in the translations folder.
+     * "header" is the key in the file.
+     * "title" is the value of the key.
+     * @returns {string} Translated value
+     */
+    t: (path: string) => translate(path),
+    setLocale,
+    locale,
+    currency,
+    locales,
+    currencies,
+    defaultLocaleValue,
+    defaultCurrencyCode,
+    localeUrlStrategy,
+  };
+};

package/hooks/use-media-query.ts

@@ -0,0 +1,36 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+export function useMediaQuery(query: string): boolean {
+  const getMatches = (query: string): boolean => {
+    if (typeof window !== 'undefined') {
+      return window.matchMedia(query).matches;
+    }
+    return false;
+  };
+
+  const [matches, setMatches] = useState<boolean>(getMatches(query));
+
+  const handleChange = () => {
+    setMatches(getMatches(query));
+  };
+
+  useEffect(() => {
+    const matchMedia = window.matchMedia(query);
+
+    handleChange();
+
+    if (matchMedia.addEventListener) {
+      matchMedia.addEventListener('change', handleChange);
+    }
+
+    return () => {
+      if (matchMedia.removeEventListener) {
+        matchMedia.removeEventListener('change', handleChange);
+      }
+    };
+  }, []);
+
+  return matches;
+}

package/hooks/use-on-click-outside.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { useEffect, RefObject } from 'react';
+
+type Event = MouseEvent | TouchEvent;
+
+export function useOnClickOutside<T extends HTMLElement = HTMLElement>(
+  ref: RefObject<T>,
+  callback: (event: Event) => void,
+  mouseEvent: 'mousedown' | 'mouseup' | 'click' = 'click'
+): void {
+  useEffect(() => {
+    const onClickHandler = (event: Event) => {
+      const el = ref?.current;
+
+      if (!el || el.contains((event?.target as Node) || null)) {
+        return;
+      }
+
+      callback(event);
+    };
+
+    document.addEventListener(mouseEvent, onClickHandler);
+    return () => {
+      document.removeEventListener(mouseEvent, onClickHandler);
+    };
+  }, [callback, mouseEvent, ref]);
+}