@akinon/projectzero 2.0.0-beta.2 → 2.0.0-beta.20

package/app-template/src/lib/fonts.ts

@@ -0,0 +1,149 @@
+import {
+  Roboto,
+  Open_Sans,
+  Lato,
+  Montserrat,
+  Jost,
+  Inter,
+  Poppins,
+  Playfair_Display,
+  Raleway,
+  Ubuntu
+} from 'next/font/google';
+
+// Google Fonts configuration
+export const roboto = Roboto({
+  weight: ['100', '300', '400', '500', '700', '900'],
+  subsets: [
+    'latin',
+    'latin-ext',
+    'cyrillic',
+    'cyrillic-ext',
+    'greek',
+    'greek-ext',
+    'vietnamese'
+  ],
+  display: 'swap',
+  variable: '--font-roboto'
+});
+
+export const openSans = Open_Sans({
+  weight: ['300', '400', '500', '600', '700', '800'],
+  subsets: [
+    'latin',
+    'latin-ext',
+    'cyrillic',
+    'cyrillic-ext',
+    'greek',
+    'greek-ext',
+    'vietnamese'
+  ],
+  display: 'swap',
+  variable: '--font-open-sans'
+});
+
+export const lato = Lato({
+  weight: ['100', '300', '400', '700', '900'],
+  subsets: ['latin', 'latin-ext'],
+  display: 'swap',
+  variable: '--font-lato'
+});
+
+export const montserrat = Montserrat({
+  weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
+  subsets: ['latin', 'latin-ext', 'cyrillic', 'cyrillic-ext', 'vietnamese'],
+  display: 'swap',
+  variable: '--font-montserrat'
+});
+
+export const jost = Jost({
+  weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
+  subsets: ['latin', 'latin-ext', 'cyrillic'],
+  display: 'swap',
+  variable: '--font-jost'
+});
+
+export const inter = Inter({
+  weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
+  subsets: [
+    'latin',
+    'latin-ext',
+    'cyrillic',
+    'cyrillic-ext',
+    'greek',
+    'greek-ext',
+    'vietnamese'
+  ],
+  display: 'swap',
+  variable: '--font-inter'
+});
+
+export const poppins = Poppins({
+  weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
+  subsets: ['latin', 'latin-ext'],
+  display: 'swap',
+  variable: '--font-poppins'
+});
+
+export const playfairDisplay = Playfair_Display({
+  weight: ['400', '500', '600', '700', '800', '900'],
+  subsets: ['latin', 'latin-ext', 'cyrillic'],
+  display: 'swap',
+  variable: '--font-playfair-display'
+});
+
+export const raleway = Raleway({
+  weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
+  subsets: ['latin', 'latin-ext', 'cyrillic', 'cyrillic-ext'],
+  display: 'swap',
+  variable: '--font-raleway'
+});
+
+export const ubuntu = Ubuntu({
+  weight: ['300', '400', '500', '700'],
+  subsets: [
+    'latin',
+    'latin-ext',
+    'cyrillic',
+    'cyrillic-ext',
+    'greek',
+    'greek-ext'
+  ],
+  display: 'swap',
+  variable: '--font-ubuntu'
+});
+
+// Font mapping for easy access
+export const fontMap = {
+  Roboto: roboto,
+  'Open Sans': openSans,
+  Lato: lato,
+  Montserrat: montserrat,
+  Jost: jost,
+  Inter: inter,
+  Poppins: poppins,
+  'Playfair Display': playfairDisplay,
+  Raleway: raleway,
+  Ubuntu: ubuntu
+} as const;
+
+export type GoogleFontName = keyof typeof fontMap;
+
+// Get font class name by font name
+export function getFontClassName(fontName: string): string {
+  const font = fontMap[fontName as GoogleFontName];
+  return font?.className || '';
+}
+
+// Get font variable by font name
+export function getFontVariable(fontName: string): string {
+  const font = fontMap[fontName as GoogleFontName];
+  return font?.variable || '';
+}
+
+// Get all font variables for CSS variables
+export function getAllFontVariables(): string {
+  return Object.values(fontMap)
+    .map((font) => font.variable)
+    .join(' ');
+}

package/app-template/src/middleware.ts

@@ -9,6 +9,7 @@ import { NextMiddleware, NextResponse } from 'next/server';
  */
 
 export const config = {
+  // For .xml.gz type sitemap urls, update '/(.*sitemap\\.xml)' with this regex '/(.*sitemap\\.xml|sitemap/.*.xml(?:.gz)?)/',
   matcher: [
     '/((?!api|_next|[\\w-\\/*]+\\.\\w+).*)',
     '/(.*sitemap\\.xml)',

package/app-template/src/plugins.js

@@ -1,4 +1,3 @@
-// we are holding all of the plugins because of the development enviroment.
 module.exports = [
   'pz-basket-gift-pack',
   'pz-click-collect',
@@ -12,6 +11,18 @@ module.exports = [
   'pz-masterpass',
   'pz-b2b',
   'pz-akifast',
+  'pz-multi-basket',
   'pz-saved-card',
-  'pz-tabby-extension'
+  'pz-tabby-extension',
+  'pz-apple-pay',
+  'pz-tamara-extension',
+  'pz-hepsipay',
+  'pz-flow-payment',
+  'pz-virtual-try-on',
+  'pz-cybersource-uc',
+  'pz-hepsipay',
+  'pz-masterpass-rest',
+  'pz-similar-products',
+  'pz-haso',
+  'pz-google-pay'
 ];

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

@@ -1,10 +1,10 @@
 import { Facet } from '@akinon/next/types';
-import { Middleware } from '@reduxjs/toolkit';
+import { Middleware, UnknownAction } from '@reduxjs/toolkit';
 import { setSelectedFacets } from '@theme/redux/reducers/category';
 
 const getSelectedFacets = (facets: Array<Facet>) => {
   return facets
-    .map((facet) => {
+    ?.map((facet) => {
       return {
         ...facet,
         data: {
@@ -21,13 +21,14 @@ const getSelectedFacets = (facets: Array<Facet>) => {
 const categoryMiddleware: Middleware = ({ dispatch, getState }) => {
   return (next) => (action) => {
     const result = next(action);
+    const act = action as UnknownAction;
 
-    if (action.type === 'category/setFacets') {
-      const facets: Array<Facet> = result.payload;
+    if (act.type === 'category/setFacets') {
+      const facets: Array<Facet> = (result as { payload: Array<Facet> }).payload;
       const selectedFacets = getSelectedFacets(facets);
 
       dispatch(setSelectedFacets(selectedFacets));
-    } else if (action.type === 'category/toggleFacet') {
+    } else if (act.type === 'category/toggleFacet') {
       const selectedFacets = getSelectedFacets(
         getState().category.selectedFacets
       );

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

@@ -32,7 +32,7 @@ const categorySlice = createSlice({
     toggleFacet(state, action) {
       const facets = JSON.parse(JSON.stringify(state.facets));
 
-      state.selectedFacets = facets.map((facet) => {
+      state.selectedFacets = facets?.map((facet) => {
         if (facet.key === action.payload.facet.key) {
           facet.data.choices = facet.data.choices
             .map((choice) => {

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

@@ -14,6 +14,11 @@ import {
 import categoryReducer from '@theme/redux/reducers/category';
 import categoryMiddleware from '@theme/redux/middlewares/category';
 
+// Import all action creators from akinon-next
+import * as defaultActions from '@akinon/next/redux/actions';
+import { rtkApiActionCreators } from '@akinon/next/redux/actions';
+import * as categorySlice from './reducers/category';
+
 const _middlewares: Middleware[] = [...middlewares, categoryMiddleware];
 
 const _reducers = {
@@ -21,13 +26,28 @@ const _reducers = {
   category: categoryReducer
 };
 
+const actionCreators = {
+  // Slice actions (automatically extracted from akinon-next)
+  ...defaultActions,
+  // RTK Query API endpoints from akinon-next
+  ...rtkApiActionCreators,
+  // Local category slice actions
+  ...categorySlice
+};
+
 export const makeStore = (): Store<{
   [key in keyof typeof _reducers]: ReturnType<typeof _reducers[key]>;
 }> =>
   configureStore({
     reducer: _reducers,
     middleware: (getDefaultMiddleware) =>
-      getDefaultMiddleware().concat(_middlewares)
+      getDefaultMiddleware().concat(_middlewares),
+    devTools:
+      process.env.NODE_ENV !== 'production'
+        ? {
+            actionCreators
+          }
+        : false
   });
 
 export type AppStore = ReturnType<typeof makeStore>;

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

@@ -27,7 +27,8 @@ enum ACCOUNT_ROUTES {
 
 enum ORDER_ROUTES {
   CHECKOUT = '/orders/checkout',
-  CHECKOUT_COMPLETED = '/orders/completed'
+  CHECKOUT_COMPLETED = '/orders/completed',
+  PAYMENT_GATEWAY_HASO = '/payment-gateway/haso'
 }
 
 enum FLATPAGE_ROUTES {

package/app-template/src/settings.js

@@ -16,14 +16,14 @@ module.exports = {
   localization: {
     locales: [
       {
-        label: 'EN',
+        label: 'English',
         value: 'en',
         localePath: 'en',
         apiValue: 'en-us',
         rtl: false
       },
       {
-        label: 'TR',
+        label: 'Turkish',
         value: 'tr',
         localePath: 'tr',
         apiValue: 'tr-tr',
@@ -62,5 +62,7 @@ module.exports = {
   redis: {
     defaultExpirationTime: 900 // 15 min
   },
-  customNotFoundEnabled: false
+  customNotFoundEnabled: false,
+  usePzSegment: true,
+  commerceRedirectionIgnoreList: ['/users/reset']
 };

package/app-template/src/types/hookform-resolvers-yup.d.ts

@@ -0,0 +1,28 @@
+declare module '@hookform/resolvers/yup' {
+  import { FieldValues, ResolverOptions, ResolverResult, UnpackNestedValue } from 'react-hook-form';
+  import * as Yup from 'yup';
+  import type Lazy from 'yup/lib/Lazy';
+
+  type Options<T extends Yup.AnyObjectSchema | Lazy<any>> =
+    Parameters<T['validate']>[1];
+
+  export type Resolver = <
+    T extends Yup.AnyObjectSchema | Lazy<any>
+  >(
+    schema: T,
+    schemaOptions?: Options<T>,
+    factoryOptions?: {
+      mode?: 'async' | 'sync';
+      rawValues?: boolean;
+    }
+  ) => <
+    TFieldValues extends FieldValues,
+    TContext
+  >(
+    values: UnpackNestedValue<TFieldValues>,
+    context: TContext | undefined,
+    options: ResolverOptions<TFieldValues>
+  ) => Promise<ResolverResult<TFieldValues>>;
+
+  export const yupResolver: Resolver;
+}

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

@@ -1,4 +1,58 @@
 export * from '@theme/types/widgets';
+import { SignInOptions } from 'next-auth/react';
+
+/**
+ * Form types for authentication
+ */
+export enum FormType {
+  login = 'login',
+  register = 'register',
+  loyaltyRegister = 'loyaltyRegister',
+  otpLogin = 'otpLogin'
+}
+
+/**
+ * Extended SignInOptions with additional form type support for Project Zero Next authentication
+ *
+ * @example
+ * ```typescript
+ * // For standard login
+ * signIn('default', {
+ *   ...data,
+ *   formType: FormType.login
+ * } as PzSignInOptions);
+ *
+ * // For standard user registration
+ * signIn('default', {
+ *   ...data,
+ *   formType: FormType.register
+ * } as PzSignInOptions);
+ *
+ * // For loyalty program registration
+ * signIn('default', {
+ *   ...data,
+ *   formType: FormType.loyaltyRegister
+ * } as PzSignInOptions);
+ *
+ * // For OTP login
+ * signIn('default', {
+ *   ...data,
+ *   formType: FormType.otpLogin
+ * } as PzSignInOptions);
+ * ```
+ */
+export interface PzSignInOptions extends SignInOptions<boolean> {
+  /**
+   * Type of the authentication form being submitted
+   *
+   * Available options:
+   * - `FormType.login` - Standard email/password login
+   * - `FormType.register` - Standard user registration
+   * - `FormType.loyaltyRegister` - Loyalty program registration (use this for loyalty signups)
+   * - `FormType.otpLogin` - OTP-based login via SMS
+   */
+  formType?: FormType;
+}
 
 export type RegisterFormType = {
   email: string;
@@ -10,14 +64,14 @@ export type RegisterFormType = {
   kvkk_confirm: boolean;
   email_allowed: boolean;
   sms_allowed: boolean;
-  formType: string;
+  formType: FormType;
   locale: string;
 };
 
 export type LoginFormType = {
   email: string;
   password: string;
-  formType: string;
+  formType: FormType;
   locale: string;
 };
 
@@ -25,7 +79,7 @@ export type OtpLoginFormType = {
   phone: string;
   code?: string;
   locale: string;
-  formType: string;
+  formType: FormType;
 };
 
 export enum WIDGET_TYPE {
@@ -71,3 +125,20 @@ export interface SeoProps {
   ogPriceAmount?: string;
   ogPriceCurrency?: string;
 }
+
+export interface ModalProps {
+  portalId: string;
+  children?: React.ReactNode;
+  open?: boolean;
+  setOpen?: (open: boolean) => void;
+  title?: React.ReactNode;
+  showCloseButton?: React.ReactNode;
+  className?: string;
+  overlayClassName?: string;
+  headerWrapperClassName?: string;
+  titleClassName?: string;
+  closeButtonClassName?: string;
+  iconName?: string;
+  iconSize?: number;
+  iconClassName?: string;
+}

package/app-template/src/types/next-auth.d.ts

@@ -1,9 +1,9 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import NextAuth from 'next-auth';
+import 'next-auth';
 
 declare module 'next-auth' {
   interface User {
-    id?: number;
+    id?: string;
     pk: number;
     firstName: string;
     lastName: string;

package/app-template/src/types/widget.ts

@@ -0,0 +1,169 @@
+export type WidgetStyle = {
+  [breakpoint: string]: Record<string, string>;
+};
+
+export type WidgetParent = {
+  id: string;
+  type: 'container';
+  tag: string;
+  style: WidgetStyle;
+};
+
+export type ImageSizes = {
+  mobile?: string;
+  tablet?: string;
+  desktop?: string;
+  [key: string]: string | undefined;
+};
+
+export type WidgetAttribute = {
+  type:
+    | 'image'
+    | 'link'
+    | 'divider'
+    | 'icon'
+    | 'text'
+    | 'video'
+    | 'collection'
+    | 'container'
+    | 'slider'
+    | 'slider-item'
+    | string;
+  tag: string;
+  parentId: string;
+  value?: {
+    text?: string;
+    src?: string;
+    alt?: string;
+    href?: string;
+    title?: string;
+    target?: string;
+    url?: string;
+    type?: string;
+    width?: string;
+    height?: string;
+    autoplay?: boolean;
+    controls?: boolean;
+    muted?: boolean;
+    loop?: boolean;
+    sizes?: { [size: string]: string };
+    products?: Array<Product>;
+    limit?: number;
+    mobileSrc?: string;
+    tabletSrc?: string;
+    desktopSrc?: string;
+    mediaQueries?: {
+      mobile?: string;
+      tablet?: string;
+      desktop?: string;
+      [key: string]: string | undefined;
+    };
+  };
+  style: WidgetStyle;
+  insideCollection?: boolean;
+  containerId?: string;
+  instanceId?: string;
+  items?: number;
+  slidesToSlide?: number;
+  showDots?: string;
+  arrows?: string;
+  infinite?: string;
+  autoPlay?: string;
+  autoPlaySpeed?: number;
+  selectedSlideItem?: number;
+  sliderItems?: number;
+  slider?: any;
+};
+
+export type WidgetData = {
+  attributes: { [key: string]: WidgetAttribute };
+  name: string;
+  template: string;
+  slug: string;
+  parent?: WidgetParent;
+  children?: WidgetData[];
+};
+
+export type Product = {
+  absolute_url: string;
+  attribute_set: number;
+  attributes: {
+    [key: string]: any;
+  };
+  attributes_kwargs: any;
+  base_code: string;
+  basket_offers: Array<{
+    kwargs: { show_benefit_products: boolean };
+    label: string;
+    listing_kwargs: {
+      [key: string]: any;
+    };
+    pk: number;
+  }>;
+  currency_type: string;
+  data_source: null;
+  item_id?: string;
+  extra_attributes: {
+    [key: string]: any;
+  };
+  form_schema: null;
+  image?: string;
+  in_stock: boolean;
+  is_ready_to_basket: boolean;
+  name: string;
+  pk: number;
+  price: string;
+  price_type: string;
+  product_type: string;
+  productimage_set: Array<{
+    created_date: Date;
+    image: string;
+    order: number;
+    pk: number;
+    specialimage_set: Array<{
+      [key: string]: any;
+    }>;
+    status: string;
+  }>;
+  productvideo_set: Array<{
+    [key: string]: any;
+  }>;
+  retail_price: string;
+  sku: string;
+  stock: number;
+  unit_type: string;
+  created_date: string;
+  modified_date: string;
+  description?: string;
+  quantity: string;
+  extra_data: {
+    [key: string]: any;
+  };
+  [key: string]: any;
+};
+
+export interface WidgetContentProps {
+  widgetData: WidgetData;
+  skipParentWrapper?: boolean;
+  collectionData?: any[];
+  collectionLimit?: number;
+  selectedWidget?: any;
+  onWidgetClick?: (e: React.MouseEvent) => void;
+  designMode?: boolean;
+  responsive?: string;
+  draggable?: boolean;
+  onDragStart?: (e: React.DragEvent) => void;
+  onDragOver?: (e: React.DragEvent) => void;
+  onDragLeave?: (e: React.DragEvent) => void;
+  onDrop?: (e: React.DragEvent) => void;
+}
+
+export interface DynamicWidgetContainerProps {
+  onRender?: (widgetData: WidgetData) => void;
+  customRender?: (
+    widgetData: WidgetData
+  ) => React.ReactNode | typeof RENDER_NOTHING;
+  instanceId?: string;
+}
+
+export const RENDER_NOTHING = Symbol('RENDER_NOTHING');

package/app-template/src/utils/convert-facet-search-params.ts

@@ -1,7 +1,7 @@
 import { Facet } from '@akinon/next/types';
 
 const convertFacetSearchParams = (facets: Facet[]) => {
-  const _facets: string[][] = facets.flatMap((facet) => {
+  const _facets: string[][] = facets?.flatMap((facet) => {
     return [
       ...facet.data.choices.map((choice) => {
         return [facet.search_key, choice.value as string];

package/app-template/src/utils/formatDate.ts

@@ -0,0 +1,48 @@
+type Locale = 'en' | 'tr';
+
+const monthNamesByLocale: Record<Locale, string[]> = {
+  en: [
+    'JANUARY',
+    'FEBRUARY',
+    'MARCH',
+    'APRIL',
+    'MAY',
+    'JUNE',
+    'JULY',
+    'AUGUST',
+    'SEPTEMBER',
+    'OCTOBER',
+    'NOVEMBER',
+    'DECEMBER'
+  ],
+  tr: [
+    'OCAK',
+    'ŞUBAT',
+    'MART',
+    'NİSAN',
+    'MAYIS',
+    'HAZİRAN',
+    'TEMMUZ',
+    'AĞUSTOS',
+    'EYLÜL',
+    'EKİM',
+    'KASIM',
+    'ARALIK'
+  ]
+};
+
+export const formatDateToMonthYear = (
+  dateString: string,
+  locale: Locale = 'en'
+): string => {
+  try {
+    const date = new Date(dateString);
+    const monthNames = monthNamesByLocale[locale];
+    const month = monthNames[date.getUTCMonth()];
+    const year = date.getUTCFullYear();
+
+    return `${month} ${year}`;
+  } catch {
+    return dateString;
+  }
+};