@akinon/projectzero 1.32.0 → 1.33.0

package/app-template/src/components/types/index.ts

@@ -0,0 +1,89 @@
+import { ReactNode } from 'react';
+import { Control, FieldError } from 'react-hook-form';
+import { UsePaginationType } from '@akinon/next/hooks/use-pagination';
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  appearance?: 'filled' | 'outlined' | 'ghost';
+}
+
+export interface PaginationProps {
+  total: number | undefined;
+  limit?: number | undefined;
+  currentPage: number | undefined;
+  numberOfPages?: number | undefined;
+  containerClassName?: string;
+  moreButtonClassName?: string;
+  prevClassName?: string;
+  nextClassName?: string;
+  pageClassName?: string;
+  threshold?: number | undefined;
+  delta?: number | undefined;
+  render?: (pagination: UsePaginationType) => ReactNode;
+  type?: 'infinite' | 'list' | 'more';
+  onPageChange?: (page: number) => void;
+  direction?: 'next' | 'prev';
+}
+
+export type FileInputProps = React.HTMLProps<HTMLInputElement>;
+
+export type RadioProps = React.HTMLProps<HTMLInputElement>;
+
+export interface InputProps extends React.HTMLProps<HTMLInputElement> {
+  label?: string;
+  labelStyle?: 'default' | 'floating';
+  error?: FieldError | undefined;
+  control?: Control<any, any>;
+  required?: boolean;
+}
+
+export interface CheckboxProps extends React.HTMLProps<HTMLInputElement> {
+  error?: FieldError | undefined;
+}
+
+export type SelectItem = {
+  label: string | number;
+  value: string | number;
+  class?: string;
+  is_selected?: boolean;
+};
+export interface SelectProps extends React.HTMLProps<HTMLSelectElement> {
+  options: SelectItem[];
+  borderless?: boolean;
+  icon?: string;
+  iconSize?: number;
+  error?: FieldError | undefined;
+  required?: boolean;
+}
+export interface IconProps extends React.ComponentPropsWithRef<'i'> {
+  name: string;
+  size?: number;
+  className?: string;
+}
+
+export interface PriceProps extends React.HTMLProps<HTMLSpanElement> {
+  children: ReactNode;
+}
+
+export interface ShareProps extends React.HTMLProps<HTMLElement> {
+  buttonText?: string;
+  buttonIconName?: string;
+  buttonIconSize?: number;
+  buttonClassName?: string;
+  buttonAppearance?: 'filled' | 'outlined' | 'ghost';
+  buttonIconProps?: React.ComponentPropsWithoutRef<'i'>;
+  className?: string;
+  items: ShareItem[];
+}
+
+export type ShareItem = {
+  iconName: string;
+  iconSize?: number;
+  href: string;
+  className?: string;
+};
+
+export interface BadgeProps {
+  children: ReactNode;
+  className?: string;
+}

package/app-template/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from './use-add-product-to-basket';

package/app-template/src/hooks/use-add-product-to-basket.ts

@@ -0,0 +1,48 @@
+'use client';
+
+import { useAppDispatch } from '@akinon/next/redux/hooks';
+import { useAddProductMutation, AddProductRequest } from '@akinon/next/data/client/product';
+import { basketApi } from '@akinon/next/data/client/basket';
+import { openMiniBasket, setHighlightedItem } from '@akinon/next/redux/reducers/root';
+
+export const useAddProductToBasket = () => {
+  const dispatch = useAppDispatch();
+  const [addProduct, options] = useAddProductMutation();
+
+  const addProductToBasket = async ({
+    product,
+    quantity,
+    attributes,
+    shouldOpenMiniBasket = true 
+  }: AddProductRequest & { shouldOpenMiniBasket?: boolean }) => {
+    await addProduct({
+      product,
+      quantity,
+      attributes
+    })
+      .unwrap()
+      .then((data) =>
+        dispatch(
+          basketApi.util.updateQueryData(
+            'getBasket',
+            undefined,
+            (draftBasket) => {
+              Object.assign(draftBasket, data.basket);
+            }
+          )
+        )
+      )
+      .then(() => {
+        if (shouldOpenMiniBasket) {
+          dispatch(openMiniBasket());
+          dispatch(setHighlightedItem(product));
+          setTimeout(() => {
+            dispatch(setHighlightedItem(null));
+          }, 3000);
+        }
+        
+      });
+  };
+
+  return [addProductToBasket, options] as const;
+};

package/app-template/src/hooks/use-contract.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import { useGetContractQuery } from '@akinon/next/data/client/checkout';
+import { LoaderSpinner, Modal } from '@theme/components';
+
+const useContract = (slug: string, label: string) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const { data } = useGetContractQuery(slug, { skip: !isModalOpen });
+
+  const ContractButton = useMemo(() => {
+    const View = () => (
+      <span
+        className="underline cursor-pointer transition-all hover:text-secondary"
+        onClick={(event: React.MouseEvent) => {
+          event.preventDefault();
+          setIsModalOpen(true);
+        }}
+      >
+        {label}
+      </span>
+    );
+
+    return View;
+  }, [label]);
+
+  const ContractModal = useMemo(() => {
+    const View = () => (
+      <Modal
+        portalId={`orders-${slug}-contract-modal`}
+        open={isModalOpen}
+        setOpen={(state) => {
+          setIsModalOpen(state);
+        }}
+        className="w-full max-w-lg"
+      >
+        <div className="p-10 max-h-[85vh] overflow-y-auto">
+          {data ? (
+            <div dangerouslySetInnerHTML={{ __html: data.result }}></div>
+          ) : (
+            <div className="flex justify-center">
+              <LoaderSpinner />
+            </div>
+          )}
+        </div>
+      </Modal>
+    );
+
+    return View;
+  }, [data, slug, isModalOpen]);
+
+  return {
+    ContractButton,
+    ContractModal
+  };
+};
+
+export default useContract;

package/app-template/src/hooks/use-fav-button.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import clsx from 'clsx';
+import { useSession } from 'next-auth/react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  useAddFavoriteMutation,
+  useGetFavoritesQuery,
+  useRemoveFavoriteMutation
+} from '@akinon/next/data/client/wishlist';
+import { Icon } from '@theme/components';
+import { pushAddToWishlist } from '@theme/utils/gtm';
+
+interface FavButtonProps {
+  label?: string;
+  size?: number;
+  className?: string;
+}
+
+const useFavButton = (productPk: number) => {
+  const { status } = useSession();
+
+  const { data: favorites } = useGetFavoritesQuery(
+    {
+      limit: 1000
+    },
+    { skip: status !== 'authenticated' }
+  );
+
+  const favoriteItem = useMemo(
+    () =>
+      favorites?.results?.find(
+        (item) => Number(item.product.pk) === Number(productPk)
+      ),
+    [favorites, productPk]
+  );
+
+  const [isActive, setIsActive] = useState(Boolean(favoriteItem));
+  const [isPushed, setIsPushed] = useState<boolean>(false);
+
+  const [addFavorite] = useAddFavoriteMutation();
+  const [removeFavorite] = useRemoveFavoriteMutation();
+
+  const handleClick = useCallback(async () => {
+    try {
+      if (favoriteItem) {
+        await removeFavorite(favoriteItem.pk);
+      } else {
+        await addFavorite(productPk);
+        setIsPushed(true);
+      }
+    } catch (error) {
+      console.error('Failed operation:', error);
+    }
+  }, [favoriteItem, productPk, addFavorite, removeFavorite]);
+
+  useEffect(() => {
+    setIsActive(Boolean(favoriteItem));
+  }, [favoriteItem]);
+
+  useEffect(() => {
+    if (favoriteItem && !isActive && isPushed) {
+      setIsActive(true);
+      pushAddToWishlist({
+        base_code: favoriteItem?.product?.base_code,
+        name: favoriteItem?.product?.name,
+        price: favoriteItem?.product?.price,
+        currency_type: favoriteItem?.product?.currency_type
+      });
+    }
+  }, [favoriteItem, isActive, isPushed]);
+
+  const FavButton = useMemo(() => {
+    const View = (props: FavButtonProps) => (
+      <button
+        className={clsx(
+          'flex items-center hover:text-secondary-hover hover:cursor-pointer',
+          props.className
+        )}
+        onClick={handleClick}
+        data-testid="favourites-icon"
+      >
+        <Icon
+          name={isActive ? 'heart-full' : 'heart-stroke'}
+          className={clsx('text-2xl md:text-xl hover:fill-secondary-hover')}
+        />
+        {props.label && <span className="ml-2">{props.label}</span>}
+      </button>
+    );
+
+    return View;
+  }, [isActive, handleClick]);
+
+  return {
+    FavButton
+  };
+};
+
+export default useFavButton;

package/app-template/src/instrumentation.ts

@@ -0,0 +1 @@
+export * from '@akinon/next/instrumentation';

package/app-template/src/middleware.ts

@@ -0,0 +1,33 @@
+import { PzNextRequest, withPzDefault } from '@akinon/next/middlewares';
+import { NextFetchEvent, NextMiddleware, NextResponse } from 'next/server';
+
+/**
+ * !IMPORTANT
+ * Do not remove this file or withPzDefault middleware.
+ * It is required for the application to work properly.
+ * If you need to add custom matcher, don't remove the existing one.
+ */
+
+export const config = {
+  matcher: [
+    '/((?!api|_next|[\\w-\\/*]+\\.\\w+).*)',
+    '/(.*sitemap\\.xml)',
+    '/(.+\\.)(html|htm|aspx|asp|php)'
+  ]
+};
+
+const middleware: NextMiddleware = (
+  req: PzNextRequest,
+  event: NextFetchEvent
+) => {
+  // If you use a custom response such as NextResponse.json(),
+  // you should set pz-override-response header to true as shown below.
+  // Otherwise, you'll get a 404 error.
+
+  // Example:
+  // return NextResponse.json({ status: 'ok' }, { headers: { 'pz-override-response': 'true' } });
+
+  return NextResponse.next();
+};
+
+export default withPzDefault(middleware);

package/app-template/src/pages/_error.js

@@ -0,0 +1,14 @@
+import * as Sentry from '@sentry/nextjs';
+import NextErrorComponent from 'next/error';
+
+const CustomErrorComponent = (props) => {
+  return <NextErrorComponent statusCode={props.statusCode} />;
+};
+
+CustomErrorComponent.getInitialProps = async (contextData) => {
+  await Sentry.captureUnderscoreErrorException(contextData);
+
+  return NextErrorComponent.getInitialProps(contextData);
+};
+
+export default CustomErrorComponent;

package/app-template/src/pages/api/auth/[...nextauth].ts

@@ -0,0 +1,3 @@
+import Auth from '@akinon/next/api/auth';
+
+export default Auth;

package/app-template/src/plugins.js

@@ -0,0 +1,14 @@
+// we are holding all of the plugins because of the development enviroment.
+module.exports = [
+  'pz-basket-gift-pack',
+  'pz-click-collect',
+  'pz-one-click-checkout',
+  'pz-pay-on-delivery',
+  'pz-checkout-gift-pack',
+  'pz-gpay',
+  'pz-otp',
+  'pz-bkm',
+  'pz-credit-payment',
+  'pz-masterpass',
+  'pz-b2b'
+];

package/app-template/src/redux/middlewares/category.ts

@@ -0,0 +1,42 @@
+import { Facet } from '@akinon/next/types';
+import { Middleware } from '@reduxjs/toolkit';
+import { setSelectedFacets } from '@theme/redux/reducers/category';
+
+const getSelectedFacets = (facets: Array<Facet>) => {
+  return facets
+    .map((facet) => {
+      return {
+        ...facet,
+        data: {
+          ...facet.data,
+          choices: facet.data.choices.filter((choice) => choice.is_selected)
+        }
+      };
+    })
+    .filter((facet) => {
+      return facet.data.choices.filter((choice) => choice.is_selected).length;
+    });
+};
+
+const categoryMiddleware: Middleware = ({ dispatch, getState }) => {
+  return (next) => (action) => {
+    const result = next(action);
+
+    if (action.type === 'category/setFacets') {
+      const facets: Array<Facet> = result.payload;
+      const selectedFacets = getSelectedFacets(facets);
+
+      dispatch(setSelectedFacets(selectedFacets));
+    } else if (action.type === 'category/toggleFacet') {
+      const selectedFacets = getSelectedFacets(
+        getState().category.selectedFacets
+      );
+
+      dispatch(setSelectedFacets(selectedFacets));
+    }
+
+    return result;
+  };
+};
+
+export default categoryMiddleware;

package/app-template/src/redux/reducers/category.ts

@@ -0,0 +1,67 @@
+'use client';
+
+import { Facet } from '@akinon/next/types';
+import { createSlice } from '@reduxjs/toolkit';
+import { WIDGET_TYPE } from '@theme/types';
+
+export interface CategoryState {
+  facets: Facet[];
+  selectedFacets: Facet[];
+}
+
+const initialState: CategoryState = {
+  facets: [],
+  selectedFacets: []
+};
+
+const categorySlice = createSlice({
+  name: 'category',
+  initialState,
+  reducers: {
+    setFacets(state, action) {
+      state.facets = action.payload;
+    },
+    setSelectedFacets(state, action) {
+      state.selectedFacets = action.payload;
+    },
+    toggleFacet(state, action) {
+      const facets = JSON.parse(JSON.stringify(state.facets));
+
+      state.selectedFacets = facets.map((facet) => {
+        if (facet.key === action.payload.facet.key) {
+          facet.data.choices = facet.data.choices
+            .map((choice) => {
+              if (action.payload.facet.widget_type === WIDGET_TYPE.category) {
+                choice.is_selected = false;
+              }
+              return choice;
+            })
+            .map((choice) => {
+              if (choice.label === action.payload.choice.label) {
+                choice.is_selected = !choice.is_selected;
+              }
+
+              return choice;
+            });
+        }
+
+        return facet;
+      });
+    },
+    resetSelectedFacets(state) {
+      return {
+        ...state,
+        selectedFacets: []
+      };
+    }
+  }
+});
+
+export const {
+  setFacets,
+  setSelectedFacets,
+  toggleFacet,
+  resetSelectedFacets
+} = categorySlice.actions;
+
+export default categorySlice.reducer;

package/app-template/src/redux/store.ts

@@ -0,0 +1,47 @@
+'use client';
+
+import middlewares from '@akinon/next/redux/middlewares';
+import reducers from '@akinon/next/redux/reducers';
+import {
+  Action,
+  AnyAction,
+  configureStore,
+  Store,
+  ThunkAction,
+  ThunkDispatch
+} from '@reduxjs/toolkit';
+import categoryReducer from '@theme/redux/reducers/category';
+import categoryMiddleware from '@theme/redux/middlewares/category';
+
+const _reducers = {
+  ...reducers,
+  category: categoryReducer
+};
+
+const _middlewares = [...middlewares, categoryMiddleware];
+
+export const makeStore = (): Store<{
+  [key in keyof typeof _reducers]: ReturnType<typeof _reducers[key]>;
+}> =>
+  configureStore({
+    reducer: _reducers,
+    middleware: (getDefaultMiddleware) =>
+      getDefaultMiddleware().concat([..._middlewares])
+  });
+
+export type AppStore = ReturnType<typeof makeStore>;
+
+export type RootState = ReturnType<AppStore['getState']>;
+
+export type TypedDispatch = ThunkDispatch<RootState, any, AnyAction>;
+
+export type AppDispatch = AppStore['dispatch'];
+
+export type AppThunk<ReturnType = void> = ThunkAction<
+  ReturnType,
+  RootState,
+  unknown,
+  Action<string>
+>;
+
+export const store = makeStore();

package/app-template/src/routes/index.ts

@@ -0,0 +1,46 @@
+enum GENERAL_ROUTES {
+  HOME = '/',
+  BASKET = '/baskets/basket',
+  LIST = '/list'
+}
+
+enum AUTH_ROUTES {
+  AUTH = '/users/auth',
+  FORGOT_PASSWORD = '/users/password/reset',
+  EMAIL_SET_PRIMARY = '/users/email-set-primary/.+',
+  CONFIRM_EMAIL = '/users/registration/account-confirm-email/.+'
+}
+
+enum ACCOUNT_ROUTES {
+  ACCOUNT = '/account',
+  ACCOUNT_ADDRESS = '/account/address',
+  ACCOUNT_CHANGE_EMAIL = '/account/change-email',
+  ACCOUNT_CHANGE_PASSWORD = '/account/change-password',
+  ACCOUNT_CONTACT = '/account/contact',
+  ACCOUNT_COUPONS = '/account/coupons',
+  ACCOUNT_FAQ = '/account/faq',
+  ACCOUNT_ORDERS = '/users/orders',
+  ACCOUNT_PROFILE = '/account/profile',
+  ACCOUNT_WISHLIST = '/account/favourite-products/',
+  ANONYMOUS_TRACKING = '/anonymous-tracking'
+}
+
+enum ORDER_ROUTES {
+  CHECKOUT = '/orders/checkout',
+  CHECKOUT_COMPLETED = '/orders/completed'
+}
+
+enum FLATPAGE_ROUTES {
+  CONTACT_US = '/contact-us'
+}
+
+enum PRODUCT_ROUTES {}
+
+export const ROUTES = {
+  ...GENERAL_ROUTES,
+  ...AUTH_ROUTES,
+  ...ACCOUNT_ROUTES,
+  ...ORDER_ROUTES,
+  ...FLATPAGE_ROUTES,
+  ...PRODUCT_ROUTES
+};

package/app-template/src/settings.js

@@ -0,0 +1,62 @@
+const { LocaleUrlStrategy } = require('@akinon/next/localization');
+const { ROUTES } = require('@theme/routes');
+
+const commerceUrl = encodeURI(process.env.SERVICE_BACKEND_URL ?? 'default');
+
+/** @type {import('@akinon/next/types').Settings} */
+module.exports = {
+  commerceUrl,
+  commonProductAttributes: [
+    { translationKey: 'color', key: 'color' },
+    { translationKey: 'size', key: 'size' }
+  ],
+  localization: {
+    locales: [
+      {
+        label: 'EN',
+        value: 'en',
+        localePath: 'en',
+        apiValue: 'en-us',
+        rtl: false
+      },
+      {
+        label: 'TR',
+        value: 'tr',
+        localePath: 'tr',
+        apiValue: 'tr-tr',
+        rtl: false
+      }
+    ],
+    currencies: [
+      {
+        label: 'USD',
+        code: 'usd'
+      },
+      {
+        label: 'TRY',
+        code: 'try'
+      }
+    ],
+    defaultLocaleValue: 'en',
+    localeUrlStrategy: LocaleUrlStrategy.HideDefaultLocale,
+    redirectToDefaultLocale: true,
+    defaultCurrencyCode: 'usd'
+  },
+  rewrites: [
+    {
+      source: ROUTES.AUTH,
+      destination: '/auth'
+    },
+    {
+      source: ROUTES.BASKET,
+      destination: '/basket'
+    },
+    {
+      source: ROUTES.ACCOUNT_ORDERS,
+      destination: '/account/orders'
+    }
+  ],
+  redis: {
+    defaultExpirationTime: 900 // 15 min
+  }
+};

package/app-template/src/theme.js

@@ -0,0 +1 @@
+module.exports = 'default';