@akinon/next 1.0.0

package/components/image.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+import { CDNOptions } from '../types';
+import NextImage, { ImageProps as NextImageProps } from 'next/image';
+import { twMerge } from 'tailwind-merge';
+import { ImageLoader } from '../utils/image-loader';
+
+interface ImageProps extends NextImageProps {
+  /**
+   * Use fill to make the image responsive.
+   * You also need to provide sizes and aspectRatio props.
+   *
+   * @default false
+   */
+  fill?: boolean;
+  /**
+   * Crop option for CDN
+   *
+   * Available options:
+   * - `center`
+   * - `top`
+   * - `bottom`
+   * - `left`
+   * - `right`
+   *
+   * @default 'center'
+   */
+  crop?: CDNOptions['crop'];
+  /**
+   * It is used to calculate the height of the image when fill is true.
+   * It prevents layout shift problems.
+   */
+  aspectRatio?: number;
+  /**
+   * Sizes attribute for responsive images
+   *
+   * If it is not provided, large images will be downloaded for small screens and it will cause performance issues.
+   *
+   * @example
+   * <Image
+   *  src={src}
+   *  sizes="(min-width: 768px) 50vw, 100vw"
+   *  fill
+   * />
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes
+   */
+  sizes?: string;
+  imageClassName?: string;
+}
+
+const DEFAULT_QUALITY = 70;
+
+/**
+ * Image component for responsive images.
+ *
+ * It uses CDN options automatically if the image is hosted on Akinon CDN. You don't need to convert the src prop to CDN url.
+ *
+ * ## For responsive images
+ * You need to provide `fill`, `sizes` and `aspectRatio` props.
+ * If you are not sure about sizes, you can give `100vw` as a value. But it may cause performance issues.
+ *
+ * ## For non-responsive images
+ * You need to provide `width` and `height` props.
+ * This way, the browser will know the size of the image before downloading it and it will prevent layout shift problems.
+ *
+ * ## CDN options
+ * You can use `crop` option to crop the image.
+ *
+ * Available options:
+ * - `center`
+ * - `top`
+ * - `bottom`
+ * - `left`
+ * - `right`
+ *
+ * You can also use `quality` option to change the quality of the image.
+ * Be careful about the file size when you change the quality.
+ *
+ * @default 70
+ */
+export const Image = (props: ImageProps) => {
+  const {
+    src,
+    width,
+    fill,
+    sizes,
+    aspectRatio,
+    quality = DEFAULT_QUALITY,
+    crop = 'center',
+    className,
+    imageClassName,
+    ...restImage
+  } = props;
+
+  const hasGif = typeof src === 'string' && src.includes('.gif');
+
+  if (fill && !aspectRatio) {
+    throw new Error('aspectRatio is required when fill is true');
+  }
+
+  if (fill && !sizes) {
+    throw new Error('sizes is required when fill is true');
+  }
+
+  return (
+    <div
+      className={twMerge('relative inline-block', fill && 'w-full', className)}
+      style={{
+        ...(fill && { aspectRatio })
+      }}
+    >
+      <NextImage
+        {...restImage}
+        width={width}
+        src={src}
+        sizes={sizes}
+        fill={fill}
+        loader={({ src, width }) => {
+          return ImageLoader({
+            src,
+            width,
+            quality: parseInt(String(quality), DEFAULT_QUALITY),
+            crop,
+            fill,
+            aspectRatio
+          });
+        }}
+        className={imageClassName}
+        {...(hasGif && { unoptimized: true })}
+      />
+    </div>
+  );
+};

package/components/mobile-app-toggler.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import { useAppSelector } from '../redux/hooks';
+
+export default function MobileAppToggler({
+  children
+}: {
+  children: React.ReactNode;
+}) {
+  const { isMobileApp } = useAppSelector((state) => state.root);
+
+  if (isMobileApp) return null;
+
+  return <>{children}</>;
+}

package/components/oauth-login.tsx

@@ -0,0 +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;
+}

package/components/plugin-module.tsx

@@ -0,0 +1,78 @@
+import dynamic from 'next/dynamic';
+import plugins from 'plugins';
+import logger from '../utils/log';
+
+enum Plugin {
+  BasketGiftPack = 'pz-basket-gift-pack',
+  ClickCollect = 'pz-click-collect',
+  OneClickCheckout = 'pz-one-click-checkout',
+  PayOnDelivery = 'pz-pay-on-delivery',
+  CheckoutGiftPack = 'pz-checkout-gift-pack'
+}
+
+export enum Component {
+  BasketGiftPack = 'BasketGiftPack',
+  ClickCollect = 'ClickCollect',
+  OneClickCheckoutButtons = 'OneClickCheckoutButtons',
+  PayOnDelivery = 'PayOnDelivery',
+  CheckoutGiftPack = 'CheckoutGiftPack'
+}
+
+const PluginComponents = new Map([
+  [Plugin.BasketGiftPack, [Component.BasketGiftPack]],
+  [Plugin.ClickCollect, [Component.ClickCollect]],
+  [Plugin.OneClickCheckout, [Component.OneClickCheckoutButtons]],
+  [Plugin.PayOnDelivery, [Component.PayOnDelivery]],
+  [Plugin.CheckoutGiftPack, [Component.CheckoutGiftPack]]
+]);
+
+const getPlugin = (component: Component) => {
+  for (let [key, value] of Array.from(PluginComponents.entries())) {
+    if (value.includes(component)) return key;
+  }
+
+  return '';
+};
+
+export default function PluginModule({
+  component,
+  props
+}: {
+  component: Component;
+  props?: any;
+}) {
+  const plugin = getPlugin(component);
+
+  if (!(plugins as string[]).includes(plugin)) {
+    return null;
+  }
+
+  const Component = dynamic(
+    () => {
+      let promise: any;
+
+      try {
+        if (plugin === Plugin.BasketGiftPack) {
+          promise = import(`${'pz-basket-gift-pack'}`);
+        } else if (plugin === Plugin.ClickCollect) {
+          promise = import(`${'pz-click-collect'}`);
+        } else if (plugin === Plugin.OneClickCheckout) {
+          promise = import(`${'pz-one-click-checkout'}`);
+        } else if (plugin === Plugin.PayOnDelivery) {
+          promise = import(`${'pz-pay-on-delivery'}`);
+        } else if (plugin === Plugin.CheckoutGiftPack) {
+          promise = import(`${'pz-checkout-gift-pack'}`);
+        }
+      } catch (error) {
+        logger.error(error);
+      }
+
+      return promise
+        ? promise.then((mod) => mod[component]).catch(() => () => null)
+        : new Promise<any>((resolve) => resolve(() => null));
+    },
+    { ssr: false }
+  );
+
+  return <Component {...props} />;
+}

package/components/pz-providers.tsx

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

package/components/pz-root.tsx

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

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

@@ -0,0 +1,64 @@
+'use client';
+
+import { useRouter } from '@akinon/next/hooks';
+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';
+
+interface RedirectThreeDContentProps {
+  sessionId: string;
+}
+
+export default function RedirectThreeDContent({
+  sessionId
+}: RedirectThreeDContentProps) {
+  const { data } = useGet3dRedirectFormQuery();
+  const [error, setError] = useState(null);
+  const router = useRouter();
+  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(() => {
+          router.replace(ROUTES.CHECKOUT);
+        }, 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

@@ -0,0 +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;

package/components/selected-payment-option-view.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { RootState } from 'redux/store';
+import { useAppSelector } from '../redux/hooks';
+import dynamic from 'next/dynamic';
+import { PaymentOptionViews } from 'views/checkout/steps/payment';
+import { useMemo } from 'react';
+
+export default function SelectedPaymentOptionView() {
+  const { payment_option } = useAppSelector(
+    (state: RootState) => state.checkout.preOrder
+  );
+
+  const Component = useMemo(
+    () =>
+      dynamic(
+        () => {
+          const customOption = PaymentOptionViews.find(
+            (opt) => opt.pk == payment_option.pk
+          );
+
+          if (customOption) {
+            const Component = customOption.view;
+
+            const componentWrapper = () => <Component />;
+
+            return new Promise((resolve) => {
+              resolve(componentWrapper);
+            });
+          }
+
+          let promise: any;
+
+          try {
+            if (payment_option.payment_type === 'credit_card') {
+              promise = import(
+                `views/checkout/steps/payment/options/credit-card`
+              );
+            } else if (payment_option.payment_type === 'funds_transfer') {
+              promise = import(
+                `views/checkout/steps/payment/options/funds-transfer`
+              );
+            } else if (payment_option.payment_type === 'redirection') {
+              promise = import(
+                `views/checkout/steps/payment/options/redirection`
+              );
+            } else if (payment_option.payment_type === 'pay_on_delivery') {
+              promise = import(
+                `views/checkout/steps/payment/options/pay-on-delivery`
+              );
+            } else if (payment_option.payment_type === 'loyalty_money') {
+              promise = import(`views/checkout/steps/payment/options/loyalty`);
+            }
+          } catch (error) {}
+
+          return promise
+            ? promise.then((mod) => mod.default).catch(() => () => null)
+            : new Promise<any>((resolve) => resolve(() => null));
+        },
+        { ssr: false }
+      ),
+    [payment_option?.pk]
+  );
+
+  return <Component />;
+}

package/components/trans.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { Fragment, useMemo } from 'react';
+import reactStringReplace from 'react-string-replace';
+import { useLocalization } from '@akinon/next/hooks';
+
+interface TransProps {
+  i18nKey: string;
+  components?: {
+    [key: string]: React.ReactElement;
+  };
+}
+
+export const Trans = ({ i18nKey, components }: TransProps) => {
+  const { t } = useLocalization();
+  const value = t(i18nKey);
+
+  const replacedValue = useMemo(() => {
+    if (!components) {
+      return value;
+    }
+
+    let text;
+
+    for (const [k] of Object.entries(components)) {
+      text = reactStringReplace(
+        text ?? value,
+        new RegExp(`(<${k}/>|<${k} />)`),
+        (_match, i) => (
+          <Fragment key={`trans-${k}-${i}`}>{components[k]}</Fragment>
+        )
+      );
+    }
+
+    return text;
+  }, [value, components]);
+
+  return <>{replacedValue}</>;
+};

package/data/client/account.ts

@@ -0,0 +1,188 @@
+import { api } from './api';
+import { account, user } from '../urls';
+import { buildClientRequestUrl } from '../../utils';
+import {
+  AccountChangeEmailFormType,
+  AccountChangePasswordFormType,
+  AccountOrderCancellation,
+  AccountOrderCancellationReason,
+  ContactFormType,
+  Order
+} from '../../types';
+
+interface GetOrdersResponse {
+  count: number;
+  results: Order[];
+}
+
+interface GetOrdersParams {
+  limit?: number;
+  page?: number;
+  createdDate?: string;
+}
+
+export type PasswordResetType = {
+  password: string;
+  repeatPassword: string;
+  slug: string;
+};
+
+export type AccountProfileFormFilteredType = {
+  first_name: string;
+  last_name: string;
+  phone: string;
+  date_of_birth: string;
+  gender: string;
+  sms_allowed: boolean;
+  email_allowed: boolean;
+};
+
+export type ContactFormSubject = [
+  {
+    id: string;
+    is_order_needed: boolean;
+    text: string;
+  }
+];
+
+interface LoyaltyTransactions {
+  count: number;
+  results: {
+    amount: string;
+    created_date: string;
+    transaction: {
+      created_date: string;
+      order: string;
+    };
+  }[];
+}
+
+const accountApi = api.injectEndpoints({
+  endpoints: (builder) => ({
+    updatePassword: builder.mutation<void, AccountChangePasswordFormType>({
+      query: (body) => ({
+        url: buildClientRequestUrl(account.updatePassword, {
+          contentType: 'application/json'
+        }),
+        method: 'POST',
+        body
+      })
+    }),
+    updateEmail: builder.mutation<void, AccountChangeEmailFormType>({
+      query: (body) => ({
+        url: buildClientRequestUrl(account.updateEmail, {
+          contentType: 'application/json'
+        }),
+        method: 'POST',
+        body
+      })
+    }),
+    updateProfile: builder.mutation<void, AccountProfileFormFilteredType>({
+      query: (body) => ({
+        url: buildClientRequestUrl(account.updateProfile, {
+          accept: 'application/json',
+          contentType: 'application/json'
+        }),
+        method: 'PATCH',
+        body
+      }),
+      invalidatesTags: ['Profile']
+    }),
+    getProfileInfo: builder.query<any, void>({
+      query: () => buildClientRequestUrl(user.profiles),
+      providesTags: ['Profile']
+    }),
+    getContactSubjects: builder.query<ContactFormSubject, void>({
+      query: () => buildClientRequestUrl(account.getContactSubjects)
+    }),
+    getOrder: builder.query<any, string>({
+      query: (id) => buildClientRequestUrl(account.orderId(id))
+    }),
+    getOrders: builder.query<GetOrdersResponse, GetOrdersParams>({
+      query: ({ page, limit, createdDate } = {}) =>
+        buildClientRequestUrl(account.getOrders({ page, limit, createdDate }))
+    }),
+    sendContact: builder.mutation<void, ContactFormType>({
+      query: (body) => ({
+        url: buildClientRequestUrl(account.sendContact, {
+          contentType: 'application/json',
+          responseType: 'text'
+        }),
+        method: 'POST',
+        body
+      })
+    }),
+    cancelOrder: builder.mutation<void, AccountOrderCancellation>({
+      query: ({ id, ...body }) => ({
+        url: buildClientRequestUrl(account.cancelOrder(id), {
+          contentType: 'application/json'
+        }),
+        method: 'POST',
+        body
+      })
+    }),
+    getCancellationReasons: builder.query<AccountOrderCancellationReason, void>(
+      {
+        query: () => buildClientRequestUrl(account.cancellationReasons)
+      }
+    ),
+    passwordReset: builder.mutation<void, PasswordResetType>({
+      query: ({ slug, password, repeatPassword }) => ({
+        url: buildClientRequestUrl(account.passwordReset(slug), {
+          useFormData: true
+        }),
+        method: 'POST',
+        body: {
+          new_password1: password,
+          new_password2: repeatPassword
+        }
+      })
+    }),
+    getBasketOffers: builder.query<any, void>({
+      query: () => buildClientRequestUrl('/account/basket-offers')
+    }),
+    getFutureBasketOffers: builder.query<any, void>({
+      query: () => buildClientRequestUrl('/account/future-basket-offers')
+    }),
+    getExpiredBasketOffers: builder.query<any, void>({
+      query: () => buildClientRequestUrl('/account/expired-basket-offers')
+    }),
+    getDiscountItems: builder.query<any, void>({
+      query: () => buildClientRequestUrl('/account/discount-items')
+    }),
+    anonymize: builder.mutation<string, void>({
+      query: () => ({
+        url: buildClientRequestUrl(account.anonymize),
+        method: 'PATCH'
+      })
+    }),
+    getLoyaltyBalance: builder.query<{ balance: number }, void>({
+      query: () => buildClientRequestUrl(account.loyaltyBalance)
+    }),
+    getLoyaltyTransactions: builder.query<LoyaltyTransactions, void>({
+      query: () => buildClientRequestUrl(account.loyaltyTransactions)
+    })
+  }),
+  overrideExisting: true
+});
+
+export const {
+  useGetContactSubjectsQuery,
+  useGetOrderQuery,
+  useGetOrdersQuery,
+  useSendContactMutation,
+  useUpdateEmailMutation,
+  useUpdatePasswordMutation,
+  useUpdateProfileMutation,
+  useGetProfileInfoQuery,
+  useCancelOrderMutation,
+  useGetCancellationReasonsQuery,
+  useGetBasketOffersQuery,
+  useGetFutureBasketOffersQuery,
+  useGetExpiredBasketOffersQuery,
+  useGetDiscountItemsQuery,
+  usePasswordResetMutation,
+  useAnonymizeMutation,
+  useGetLoyaltyBalanceQuery,
+  useGetLoyaltyTransactionsQuery
+} = accountApi;