@akinon/next 1.14.0 → 1.15.0

package/components/lazy-component.tsx

@@ -1,33 +1,33 @@
-'use client';
-
-import clsx from 'clsx';
-import { useEffect, useState } from 'react';
-import { useInView } from 'react-intersection-observer';
-
-interface LazyComponentProps {
-  children: React.ReactNode;
-  className?: string;
-}
-
-export default function LazyComponent({
-  children,
-  className
-}: LazyComponentProps) {
-  const [isInView, setIsInView] = useState(false);
-
-  const { ref, inView } = useInView({
-    threshold: 0
-  });
-
-  useEffect(() => {
-    if (inView) {
-      setIsInView(true);
-    }
-  }, [inView]);
-
-  return (
-    <div ref={ref} className={clsx(className)}>
-      {isInView ? <>{children}</> : null}
-    </div>
-  );
-}
+'use client';
+
+import clsx from 'clsx';
+import { useEffect, useState } from 'react';
+import { useInView } from 'react-intersection-observer';
+
+interface LazyComponentProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export default function LazyComponent({
+  children,
+  className
+}: LazyComponentProps) {
+  const [isInView, setIsInView] = useState(false);
+
+  const { ref, inView } = useInView({
+    threshold: 0
+  });
+
+  useEffect(() => {
+    if (inView) {
+      setIsInView(true);
+    }
+  }, [inView]);
+
+  return (
+    <div ref={ref} className={clsx(className)}>
+      {isInView ? <>{children}</> : null}
+    </div>
+  );
+}

package/components/loader-spinner.tsx

@@ -1,23 +1,23 @@
-import { twMerge } from 'tailwind-merge';
-
-type LoaderSpinnerProps = {
-  className?: string;
-  borderType?: 'solid' | 'dotted' | 'dashed';
-};
-
-export const LoaderSpinner: React.FC<LoaderSpinnerProps> = ({
-  borderType = 'solid',
-  className
-}) => {
-  return (
-    <div className="w-full h-full flex justify-center items-center">
-      <div
-        className={twMerge(
-          'w-8 h-8 border-2 border-primary border-t-transparent rounded-full animate-spin',
-          `border-${borderType}`,
-          className
-        )}
-      />
-    </div>
-  );
-};
+import { twMerge } from 'tailwind-merge';
+
+type LoaderSpinnerProps = {
+  className?: string;
+  borderType?: 'solid' | 'dotted' | 'dashed';
+};
+
+export const LoaderSpinner: React.FC<LoaderSpinnerProps> = ({
+  borderType = 'solid',
+  className
+}) => {
+  return (
+    <div className="w-full h-full flex justify-center items-center">
+      <div
+        className={twMerge(
+          'w-8 h-8 border-2 border-primary border-t-transparent rounded-full animate-spin',
+          `border-${borderType}`,
+          className
+        )}
+      />
+    </div>
+  );
+};

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/modal.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { ReactPortal } from './react-portal';
+
+import { Icon } from './icon';
+import { twMerge } from 'tailwind-merge';
+import { useEffect } from 'react';
+export interface ModalProps {
+  portalId: string;
+  children?: React.ReactNode;
+  open?: boolean;
+  setOpen?: (open: boolean) => void;
+  title?: React.ReactNode;
+  showCloseButton?: React.ReactNode;
+  className?: string;
+}
+
+export const Modal = (props: ModalProps) => {
+  const {
+    children,
+    portalId,
+    open,
+    setOpen,
+    title = '',
+    showCloseButton = true,
+    className
+  } = props;
+
+  useEffect(() => {
+    if (open) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'auto';
+    }
+  }, [open]);
+
+  if (!open) return null;
+
+  return (
+    <ReactPortal wrapperId={portalId}>
+      <div className="fixed top-0 left-0 w-screen h-screen bg-primary bg-opacity-60 z-50" />
+      <section
+        className={twMerge(
+          'fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50 bg-white',
+          className
+        )}
+      >
+        {(showCloseButton || title) && (
+          <div className="flex px-6 py-4 border-b border-gray-400">
+            {title && <h3 className="text-lg font-light">{title}</h3>}
+            {showCloseButton && (
+              <button
+                type="button"
+                onClick={() => setOpen(false)}
+                className="ml-auto"
+              >
+                <Icon name="close" size={16} />
+              </button>
+            )}
+          </div>
+        )}
+        {children}
+      </section>
+    </ReactPortal>
+  );
+};

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/plugin-module.tsx

@@ -12,6 +12,7 @@ enum Plugin {
   GPay = 'pz-gpay',
   Otp = 'pz-otp',
   BKMExpress = 'pz-bkm',
+  CreditPayment = 'pz-credit-payment',
   Masterpass = 'pz-masterpass'
 }
 
@@ -24,6 +25,7 @@ export enum Component {
   GPay = 'GPayOption',
   Otp = 'Otp',
   BKMExpress = 'BKMOption',
+  CreditPayment = 'CreditPayment',
   MasterpassCardList = 'MasterpassCardList'
 }
 
@@ -36,6 +38,7 @@ const PluginComponents = new Map([
   [Plugin.GPay, [Component.GPay]],
   [Plugin.Otp, [Component.Otp]],
   [Plugin.BKMExpress, [Component.BKMExpress]],
+  [Plugin.CreditPayment, [Component.CreditPayment]],
   [Plugin.Masterpass, [Component.MasterpassCardList]]
 ]);
 
@@ -79,6 +82,8 @@ export default function PluginModule({
               promise = import(`${'pz-otp'}`);
             } else if (plugin === Plugin.BKMExpress) {
               promise = import(`${'pz-bkm'}`);
+            } else if (plugin === Plugin.CreditPayment) {
+              promise = import(`${'pz-credit-payment'}`);
             }
           } catch (error) {
             logger.error(error);

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);
+};