@akinon/next 1.14.0 → 1.14.1

package/components/mobile-app-toggler.tsx

@@ -1,26 +1,26 @@
-'use client';
-
-import { useAppSelector } from '../redux/hooks';
-import { useState, useEffect } from 'react';
-import { useSearchParams } from 'next/navigation';
-
-export default function MobileAppToggler({
-  children
-}: {
-  children: React.ReactNode;
-}) {
-  const searchParams = useSearchParams();
-  const { isMobileApp } = useAppSelector((state) => state.root);
-  const [isInIframe, setIsInIframe] = useState(false);
-
-  useEffect(() => {
-    if (window.frameElement) {
-      setIsInIframe(true);
-    }
-  }, []);
-
-  if (isMobileApp || isInIframe || searchParams.get('iframe') === 'true')
-    return null;
-
-  return <>{children}</>;
-}
+'use client';
+
+import { useAppSelector } from '../redux/hooks';
+import { useState, useEffect } from 'react';
+import { useSearchParams } from 'next/navigation';
+
+export default function MobileAppToggler({
+  children
+}: {
+  children: React.ReactNode;
+}) {
+  const searchParams = useSearchParams();
+  const { isMobileApp } = useAppSelector((state) => state.root);
+  const [isInIframe, setIsInIframe] = useState(false);
+
+  useEffect(() => {
+    if (window.frameElement) {
+      setIsInIframe(true);
+    }
+  }, []);
+
+  if (isMobileApp || isInIframe || searchParams.get('iframe') === 'true')
+    return null;
+
+  return <>{children}</>;
+}

package/components/oauth-login.tsx

@@ -1,24 +1,24 @@
-'use client';
-
-import { signIn, useSession } from 'next-auth/react';
-import { useEffect } from 'react';
-import { useSearchParams } from 'next/navigation';
-
-export default function OauthLogin() {
-  const { status } = useSession();
-  const searchParams = useSearchParams();
-
-  useEffect(() => {
-    if (!searchParams) {
-      return;
-    }
-
-    if (status === 'unauthenticated') {
-      signIn('oauth', {
-        callbackUrl: searchParams.get('next') ?? '/'
-      });
-    }
-  }, [status, searchParams]);
-
-  return null;
-}
+'use client';
+
+import { signIn, useSession } from 'next-auth/react';
+import { useEffect } from 'react';
+import { useSearchParams } from 'next/navigation';
+
+export default function OauthLogin() {
+  const { status } = useSession();
+  const searchParams = useSearchParams();
+
+  useEffect(() => {
+    if (!searchParams) {
+      return;
+    }
+
+    if (status === 'unauthenticated') {
+      signIn('oauth', {
+        callbackUrl: searchParams.get('next') ?? '/'
+      });
+    }
+  }, [status, searchParams]);
+
+  return null;
+}

package/components/price.tsx

@@ -1,55 +1,55 @@
-import { useMemo } from 'react';
-import NumberFormat, { NumberFormatProps } from 'react-number-format';
-import { getCurrency } from '@akinon/next/utils';
-
-import { useLocalization } from '@akinon/next/hooks';
-import { PriceProps } from '../types';
-
-export const Price = (props: NumberFormatProps & PriceProps) => {
-  const {
-    value,
-    currencyCode,
-    displayType = 'text',
-    useCurrencySymbol = false,
-    useCurrencyAfterPrice = true,
-    useCurrencySpace = true,
-    useNegative = false,
-    useNegativeSpace = true,
-    thousandSeparator = '.',
-    decimalScale = 2,
-    decimalSeparator = ',',
-    fixedDecimalScale = true,
-    ...rest
-  } = props;
-  const { currency: selectedCurrencyCode } = useLocalization();
-  const currencyCode_ = currencyCode || selectedCurrencyCode;
-
-  // TODO: This is very bad practice. It broke decimalScale.
-  const _value = value?.toString().replace('.', ',');
-
-  const currency = useMemo(
-    () =>
-      getCurrency({
-        currencyCode: currencyCode_,
-        useCurrencySymbol,
-        useCurrencyAfterPrice,
-        useCurrencySpace
-      }),
-    [currencyCode_, useCurrencySymbol, useCurrencyAfterPrice, useCurrencySpace]
-  );
-
-  return (
-    <NumberFormat
-      value={useNegative ? `-${useNegativeSpace}${_value}` : _value}
-      {...{
-        [useCurrencyAfterPrice ? 'suffix' : 'prefix']: currency
-      }}
-      displayType={displayType}
-      thousandSeparator={thousandSeparator}
-      decimalScale={decimalScale}
-      decimalSeparator={decimalSeparator}
-      fixedDecimalScale={fixedDecimalScale}
-      {...rest}
-    />
-  );
-};
+import { useMemo } from 'react';
+import NumberFormat, { NumberFormatProps } from 'react-number-format';
+import { getCurrency } from '@akinon/next/utils';
+
+import { useLocalization } from '@akinon/next/hooks';
+import { PriceProps } from '../types';
+
+export const Price = (props: NumberFormatProps & PriceProps) => {
+  const {
+    value,
+    currencyCode,
+    displayType = 'text',
+    useCurrencySymbol = false,
+    useCurrencyAfterPrice = true,
+    useCurrencySpace = true,
+    useNegative = false,
+    useNegativeSpace = true,
+    thousandSeparator = '.',
+    decimalScale = 2,
+    decimalSeparator = ',',
+    fixedDecimalScale = true,
+    ...rest
+  } = props;
+  const { currency: selectedCurrencyCode } = useLocalization();
+  const currencyCode_ = currencyCode || selectedCurrencyCode;
+
+  // TODO: This is very bad practice. It broke decimalScale.
+  const _value = value?.toString().replace('.', ',');
+
+  const currency = useMemo(
+    () =>
+      getCurrency({
+        currencyCode: currencyCode_,
+        useCurrencySymbol,
+        useCurrencyAfterPrice,
+        useCurrencySpace
+      }),
+    [currencyCode_, useCurrencySymbol, useCurrencyAfterPrice, useCurrencySpace]
+  );
+
+  return (
+    <NumberFormat
+      value={useNegative ? `-${useNegativeSpace}${_value}` : _value}
+      {...{
+        [useCurrencyAfterPrice ? 'suffix' : 'prefix']: currency
+      }}
+      displayType={displayType}
+      thousandSeparator={thousandSeparator}
+      decimalScale={decimalScale}
+      decimalSeparator={decimalSeparator}
+      fixedDecimalScale={fixedDecimalScale}
+      {...rest}
+    />
+  );
+};

package/components/pz-providers.tsx

@@ -1,24 +1,24 @@
-'use client';
-
-import LocalizationProvider from '@akinon/next/localization/provider';
-import { SessionProvider } from 'next-auth/react';
-import { Provider } from 'react-redux';
-import { store } from 'redux/store';
-
-export default function PzProviders({
-  translations,
-  children
-}: {
-  translations: any;
-  children: React.ReactNode;
-}) {
-  return (
-    <Provider store={store}>
-      <SessionProvider refetchOnWindowFocus={false}>
-        <LocalizationProvider translations={translations}>
-          {children}
-        </LocalizationProvider>
-      </SessionProvider>
-    </Provider>
-  );
-}
+'use client';
+
+import LocalizationProvider from '@akinon/next/localization/provider';
+import { SessionProvider } from 'next-auth/react';
+import { Provider } from 'react-redux';
+import { store } from 'redux/store';
+
+export default function PzProviders({
+  translations,
+  children
+}: {
+  translations: any;
+  children: React.ReactNode;
+}) {
+  return (
+    <Provider store={store}>
+      <SessionProvider refetchOnWindowFocus={false}>
+        <LocalizationProvider translations={translations}>
+          {children}
+        </LocalizationProvider>
+      </SessionProvider>
+    </Provider>
+  );
+}

package/components/pz-root.tsx

@@ -1,21 +1,21 @@
-import 'server-only';
-import ClientRoot from './client-root';
-import { cookies } from 'next/headers';
-import PzProviders from './pz-providers';
-
-export default function PzRoot({
-  translations,
-  children
-}: {
-  translations: any;
-  children: React.ReactNode;
-}) {
-  const nextCookies = cookies();
-  const sessionid = nextCookies.get('osessionid')?.value;
-
-  return (
-    <PzProviders translations={translations}>
-      <ClientRoot sessionId={sessionid}>{children}</ClientRoot>
-    </PzProviders>
-  );
-}
+import 'server-only';
+import ClientRoot from './client-root';
+import { cookies } from 'next/headers';
+import PzProviders from './pz-providers';
+
+export default function PzRoot({
+  translations,
+  children
+}: {
+  translations: any;
+  children: React.ReactNode;
+}) {
+  const nextCookies = cookies();
+  const sessionid = nextCookies.get('osessionid')?.value;
+
+  return (
+    <PzProviders translations={translations}>
+      <ClientRoot sessionId={sessionid}>{children}</ClientRoot>
+    </PzProviders>
+  );
+}

package/components/radio.tsx

@@ -1,18 +1,18 @@
-import { forwardRef } from 'react';
-import { RadioProps } from '../types/index';
-import { twMerge } from 'tailwind-merge';
-
-const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
-  const { children, ...rest } = props;
-
-  return (
-    <label className={twMerge('flex items-center text-xs', props.className)}>
-      <input type="radio" {...rest} ref={ref} className="w-4 h-4" />
-      {children && <span className="text-xs ml-2">{children}</span>}
-    </label>
-  );
-});
-
-Radio.displayName = 'Radio';
-
-export { Radio };
+import { forwardRef } from 'react';
+import { RadioProps } from '../types/index';
+import { twMerge } from 'tailwind-merge';
+
+const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
+  const { children, ...rest } = props;
+
+  return (
+    <label className={twMerge('flex items-center text-xs', props.className)}>
+      <input type="radio" {...rest} ref={ref} className="w-4 h-4" />
+      {children && <span className="text-xs ml-2">{children}</span>}
+    </label>
+  );
+});
+
+Radio.displayName = 'Radio';
+
+export { Radio };

package/components/react-portal.tsx

@@ -1,45 +1,45 @@
-import { useState, useEffect } from 'react';
-import { createPortal } from 'react-dom';
-
-function createWrapperAndAppendToBody(wrapperId: string) {
-  const wrapperElement = document.createElement('div');
-  wrapperElement.setAttribute('id', wrapperId);
-  document.body.appendChild(wrapperElement);
-  return wrapperElement;
-}
-
-type Props = {
-  children: React.ReactNode;
-  wrapperId: string;
-};
-
-export const ReactPortal: React.FC<Props> = ({
-  children,
-  wrapperId = 'react-portal-wrapper'
-}) => {
-  const [wrapperElement, setWrapperElement] = useState<HTMLElement | null>(
-    null
-  );
-
-  useEffect(() => {
-    let element = document.getElementById(wrapperId) as HTMLElement;
-    let modalCreated = false;
-
-    if (!element) {
-      modalCreated = true;
-      element = createWrapperAndAppendToBody(wrapperId);
-    }
-    setWrapperElement(element);
-
-    return () => {
-      // delete the programatically created element if it was created
-      if (modalCreated && element.parentNode) {
-        element.parentNode.removeChild(element);
-      }
-    };
-  }, [wrapperId]);
-
-  if (wrapperElement === null) return null;
-
-  return createPortal(children, wrapperElement);
-};
+import { useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+
+function createWrapperAndAppendToBody(wrapperId: string) {
+  const wrapperElement = document.createElement('div');
+  wrapperElement.setAttribute('id', wrapperId);
+  document.body.appendChild(wrapperElement);
+  return wrapperElement;
+}
+
+type Props = {
+  children: React.ReactNode;
+  wrapperId: string;
+};
+
+export const ReactPortal: React.FC<Props> = ({
+  children,
+  wrapperId = 'react-portal-wrapper'
+}) => {
+  const [wrapperElement, setWrapperElement] = useState<HTMLElement | null>(
+    null
+  );
+
+  useEffect(() => {
+    let element = document.getElementById(wrapperId) as HTMLElement;
+    let modalCreated = false;
+
+    if (!element) {
+      modalCreated = true;
+      element = createWrapperAndAppendToBody(wrapperId);
+    }
+    setWrapperElement(element);
+
+    return () => {
+      // delete the programatically created element if it was created
+      if (modalCreated && element.parentNode) {
+        element.parentNode.removeChild(element);
+      }
+    };
+  }, [wrapperId]);
+
+  if (wrapperElement === null) return null;
+
+  return createPortal(children, wrapperElement);
+};

package/components/redirect-three-d/content/index.tsx

@@ -1,74 +1,74 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import { ROUTES } from 'routes';
-import { useGet3dRedirectFormQuery } from '@akinon/next/data/client/checkout';
-import { LoaderSpinner } from 'components';
-import { useLocalization } from '../../../hooks/use-localization';
-import { getUrlPathWithLocale } from '../../../utils/localization';
-import { useSearchParams } from 'next/navigation';
-
-interface RedirectThreeDContentProps {
-  sessionId: string;
-}
-
-export default function RedirectThreeDContent({
-  sessionId
-}: RedirectThreeDContentProps) {
-  const searchParams = useSearchParams();
-  const { data } = useGet3dRedirectFormQuery();
-  const [error, setError] = useState(null);
-  const { locale } = useLocalization();
-
-  useEffect(() => {
-    if (data) {
-      const fragment = document.createElement('fragment');
-      fragment.innerHTML = data.result;
-
-      const form = fragment.querySelector('form');
-
-      // a way to determine if response includes a redirection form or not
-      if (fragment.querySelector('link[rel="canonical"]') || !form) {
-        setError('Redirecting to checkout page. Please wait...');
-
-        setTimeout(() => {
-          let checkoutUrl = `${ROUTES.CHECKOUT}`;
-
-          // iframe param is used to prevent header and footer rendering
-          if (searchParams.get('iframe') === 'true') {
-            checkoutUrl = `${checkoutUrl}?iframe=true`;
-          }
-
-          // Use `window.location.href` instead of `router.push`
-          // to capture the url change event in iframe
-          location.href = getUrlPathWithLocale(checkoutUrl, locale);
-        }, 3000);
-        return;
-      }
-
-      const pzParamsInput = document.createElement('input');
-      pzParamsInput.setAttribute('type', 'hidden');
-      pzParamsInput.setAttribute('name', 'pzparams');
-      pzParamsInput.setAttribute(
-        'value',
-        encodeURIComponent(
-          JSON.stringify({
-            session: sessionId,
-            locale
-          })
-        )
-      );
-      form.appendChild(pzParamsInput);
-
-      form.style.display = 'none';
-      document.body.appendChild(form);
-      form.submit();
-    }
-  }, [data]);
-
-  return (
-    <div className="flex items-center justify-center py-20">
-      {error ?? <LoaderSpinner />}
-    </div>
-  );
-}
+'use client';
+
+import { useEffect, useState } from 'react';
+import { ROUTES } from 'routes';
+import { useGet3dRedirectFormQuery } from '@akinon/next/data/client/checkout';
+import { LoaderSpinner } from 'components';
+import { useLocalization } from '../../../hooks/use-localization';
+import { getUrlPathWithLocale } from '../../../utils/localization';
+import { useSearchParams } from 'next/navigation';
+
+interface RedirectThreeDContentProps {
+  sessionId: string;
+}
+
+export default function RedirectThreeDContent({
+  sessionId
+}: RedirectThreeDContentProps) {
+  const searchParams = useSearchParams();
+  const { data } = useGet3dRedirectFormQuery();
+  const [error, setError] = useState(null);
+  const { locale } = useLocalization();
+
+  useEffect(() => {
+    if (data) {
+      const fragment = document.createElement('fragment');
+      fragment.innerHTML = data.result;
+
+      const form = fragment.querySelector('form');
+
+      // a way to determine if response includes a redirection form or not
+      if (fragment.querySelector('link[rel="canonical"]') || !form) {
+        setError('Redirecting to checkout page. Please wait...');
+
+        setTimeout(() => {
+          let checkoutUrl = `${ROUTES.CHECKOUT}`;
+
+          // iframe param is used to prevent header and footer rendering
+          if (searchParams.get('iframe') === 'true') {
+            checkoutUrl = `${checkoutUrl}?iframe=true`;
+          }
+
+          // Use `window.location.href` instead of `router.push`
+          // to capture the url change event in iframe
+          location.href = getUrlPathWithLocale(checkoutUrl, locale);
+        }, 3000);
+        return;
+      }
+
+      const pzParamsInput = document.createElement('input');
+      pzParamsInput.setAttribute('type', 'hidden');
+      pzParamsInput.setAttribute('name', 'pzparams');
+      pzParamsInput.setAttribute(
+        'value',
+        encodeURIComponent(
+          JSON.stringify({
+            session: sessionId,
+            locale
+          })
+        )
+      );
+      form.appendChild(pzParamsInput);
+
+      form.style.display = 'none';
+      document.body.appendChild(form);
+      form.submit();
+    }
+  }, [data]);
+
+  return (
+    <div className="flex items-center justify-center py-20">
+      {error ?? <LoaderSpinner />}
+    </div>
+  );
+}

package/components/redirect-three-d/index.tsx

@@ -1,17 +1,17 @@
-import { cookies } from 'next/headers';
-import { redirect } from 'next/navigation';
-import RedirectThreeDContent from './content';
-import { ROUTES } from 'routes';
-
-const RedirectThreeD = async () => {
-  const nextCookies = cookies();
-  const sessionId = await nextCookies.get('osessionid')?.value;
-
-  if (!sessionId) {
-    return redirect(ROUTES.CHECKOUT);
-  }
-
-  return <RedirectThreeDContent sessionId={sessionId} />;
-};
-
-export default RedirectThreeD;
+import { cookies } from 'next/headers';
+import { redirect } from 'next/navigation';
+import RedirectThreeDContent from './content';
+import { ROUTES } from 'routes';
+
+const RedirectThreeD = async () => {
+  const nextCookies = cookies();
+  const sessionId = await nextCookies.get('osessionid')?.value;
+
+  if (!sessionId) {
+    return redirect(ROUTES.CHECKOUT);
+  }
+
+  return <RedirectThreeDContent sessionId={sessionId} />;
+};
+
+export default RedirectThreeD;