@akinon/next 1.13.0 → 1.14.0

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

@@ -1,85 +1,85 @@
-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 (
-      <>
-        <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) &&
-    process.env.NODE_ENV === 'production'
-  ) {
-    logger.warn('Redis cache variables are not set', {
-      requiredVariables: ['CACHE_HOST', 'CACHE_PORT', 'CACHE_SECRET'],
-      values: requiredVariableValues
-    });
-  }
-};
+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 (
+      <>
+        <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) &&
+    process.env.NODE_ENV === 'production'
+  ) {
+    logger.warn('Redis cache variables are not set', {
+      requiredVariables: ['CACHE_HOST', 'CACHE_PORT', 'CACHE_SECRET'],
+      values: requiredVariableValues
+    });
+  }
+};

package/hooks/index.ts

@@ -1,10 +1,10 @@
-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';
-export * from './use-mobile-iframe-handler';
-export * from './use-payment-options';
+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';
+export * from './use-mobile-iframe-handler';
+export * from './use-payment-options';

package/hooks/use-captcha.tsx

@@ -1,76 +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
-  };
-};
+'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

@@ -1,36 +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;
-};
+'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

@@ -1,20 +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;
-}
+// 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

@@ -1,78 +1,78 @@
-'use client';
-
-import { LocalizationContext } from '../localization/provider';
-import { useContext } from 'react';
-import { setCookie, 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 is not used because reloading the page also clears the client side cache.
-    location.href = `${localePath}${pathnameWithoutLocale}${location.search}`;
-  };
-
-  /**
-   * Sets the currency.
-   *
-   * If the currency is linked to the locale by using `getActiveCurrencyCode` function in the settings,
-   * you need to use `setLocale` instead of this.
-   * @param currency Currency code defined in the settings.
-   */
-  const setCurrency = (currency: string) => {
-    // It is a temp cookie to set currency in `currency` middleware.
-    setCookie('pz-set-currency', currency);
-    location.reload();
-  };
-
-  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,
-    setCurrency,
-    locale,
-    currency,
-    locales,
-    currencies,
-    defaultLocaleValue,
-    defaultCurrencyCode,
-    localeUrlStrategy
-  };
-};
+'use client';
+
+import { LocalizationContext } from '../localization/provider';
+import { useContext } from 'react';
+import { setCookie, 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 is not used because reloading the page also clears the client side cache.
+    location.href = `${localePath}${pathnameWithoutLocale}${location.search}`;
+  };
+
+  /**
+   * Sets the currency.
+   *
+   * If the currency is linked to the locale by using `getActiveCurrencyCode` function in the settings,
+   * you need to use `setLocale` instead of this.
+   * @param currency Currency code defined in the settings.
+   */
+  const setCurrency = (currency: string) => {
+    // It is a temp cookie to set currency in `currency` middleware.
+    setCookie('pz-set-currency', currency);
+    location.reload();
+  };
+
+  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,
+    setCurrency,
+    locale,
+    currency,
+    locales,
+    currencies,
+    defaultLocaleValue,
+    defaultCurrencyCode,
+    localeUrlStrategy
+  };
+};