@akinon/projectzero 2.0.0-beta.9 → 2.0.0

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/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,7 +11,18 @@ module.exports = [
   'pz-masterpass',
   'pz-b2b',
   'pz-akifast',
+  'pz-multi-basket',
   'pz-saved-card',
   'pz-tabby-extension',
-  'pz-tamara-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/{middleware.ts → proxy.ts}

@@ -3,7 +3,7 @@ import { NextMiddleware, NextResponse } from 'next/server';
 
 /**
  * !IMPORTANT
- * Do not remove this file or withPzDefault middleware.
+ * Do not remove this file or withPzDefault wrapper.
  * It is required for the application to work properly.
  * If you need to add custom matcher, don't remove the existing one.
  */
@@ -18,7 +18,7 @@ export const config = {
   ]
 };
 
-const middleware: NextMiddleware = () =>
+const proxy: NextMiddleware = () =>
   // req: PzNextRequest,
   // event: NextFetchEvent
   {
@@ -32,4 +32,4 @@ const middleware: NextMiddleware = () =>
     return NextResponse.next();
   };
 
-export default withPzDefault(middleware);
+export default withPzDefault(proxy);

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

@@ -1,5 +1,5 @@
 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>) => {
@@ -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/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

@@ -1,17 +1,17 @@
-enum GENERAL_ROUTES {
+export enum GENERAL_ROUTES {
   HOME = '/',
   BASKET = '/baskets/basket',
   LIST = '/list'
 }
 
-enum AUTH_ROUTES {
+export 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 {
+export enum ACCOUNT_ROUTES {
   ACCOUNT = '/account',
   ACCOUNT_ADDRESS = '/account/address',
   ACCOUNT_CHANGE_EMAIL = '/account/change-email',
@@ -25,16 +25,17 @@ enum ACCOUNT_ROUTES {
   ANONYMOUS_TRACKING = '/anonymous-tracking'
 }
 
-enum ORDER_ROUTES {
+export enum ORDER_ROUTES {
   CHECKOUT = '/orders/checkout',
-  CHECKOUT_COMPLETED = '/orders/completed'
+  CHECKOUT_COMPLETED = '/orders/completed',
+  PAYMENT_GATEWAY_HASO = '/payment-gateway/haso'
 }
 
-enum FLATPAGE_ROUTES {
+export enum FLATPAGE_ROUTES {
   CONTACT_US = '/contact-us'
 }
 
-enum PRODUCT_ROUTES {}
+export enum PRODUCT_ROUTES {}
 
 export const ROUTES = {
   ...GENERAL_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',
@@ -61,5 +61,8 @@ module.exports = {
   ],
   redis: {
     defaultExpirationTime: 900 // 15 min
-  }
+  },
+  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');