@akinon/projectzero 1.32.0 → 1.33.0

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

@@ -0,0 +1,72 @@
+export * from '@theme/types/widgets';
+
+export type RegisterFormType = {
+  email: string;
+  first_name: string;
+  last_name: string;
+  password: string;
+  phone: string;
+  confirm: boolean;
+  kvkk_confirm: boolean;
+  email_allowed: boolean;
+  sms_allowed: boolean;
+  formType: string;
+  locale: string;
+};
+
+export type LoginFormType = {
+  email: string;
+  password: string;
+  formType: string;
+  locale: string;
+};
+
+export type OtpLoginFormType = {
+  phone: string;
+  code?: string;
+  locale: string;
+  formType: string;
+};
+
+export enum WIDGET_TYPE {
+  category = 'category',
+  multiselect = 'multiselect'
+}
+
+export interface CreditCardForm {
+  card_holder: string;
+  card_number: string;
+  card_month: string;
+  card_year: string;
+  card_cvv: string;
+  installment: number;
+  agreement: boolean;
+}
+
+export interface PriceProps {
+  currencyCode?: string;
+  useCurrencySymbol?: boolean;
+  useCurrencyAfterPrice?: boolean;
+  useCurrencySpace?: boolean;
+  useNegative?: boolean;
+  useNegativeSpace?: boolean;
+}
+
+export interface SeoProps {
+  title?: string;
+  description?: string;
+  keywords?: string;
+  itemPropName?: string;
+  itemPropDescription?: string;
+  itemPropImage?: string;
+  twitterCard?: string;
+  twitterTitle?: string;
+  twitterDescription?: string;
+  twitterData1?: string;
+  twitterLabel1?: string;
+  ogTitle?: string;
+  ogImage?: string;
+  ogDescription?: string;
+  ogPriceAmount?: string;
+  ogPriceCurrency?: string;
+}

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

@@ -0,0 +1,24 @@
+import NextAuth from 'next-auth';
+
+declare module 'next-auth' {
+  interface User {
+    id?: number;
+    pk: number;
+    firstName: string;
+    lastName: string;
+    email: string;
+    phone: string;
+    emailAllowed: boolean;
+    smsAllowed: boolean;
+    dateJoined: string;
+    lastLogin: string;
+    dateOfBirth: string;
+    token: string;
+    hashedEmail: string;
+    gender: string;
+  }
+
+  interface Session {
+    user: User;
+  }
+}

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

@@ -0,0 +1,115 @@
+import { ImageType } from '@akinon/next/types';
+
+export type FooterSubscriptionFormType = {
+  email: string;
+  subscribe_contract: boolean;
+};
+
+export interface PointerComponentProduct {
+  kwargs: {
+    data_type: 'nested';
+    value: {
+      mobile_image: ImageType;
+      desktop_image: ImageType;
+    };
+  };
+  value: {
+    mobile_image: string;
+    banner_title_text: string;
+    desktop_image: string;
+    banner_button_text: string;
+    position_content_over_image: string;
+    normal_price: string;
+    url: string;
+    reduced_price: string;
+    banner_title_color: string;
+    banner_button_icon: string;
+    banner_description_color: string;
+    product_button_mobile_position_left: string;
+    banner_button_bg_color: string;
+    product_button_mobile_position_top: string;
+    product_button_desktop_position_top: string;
+    slider_banner_product_button: string;
+    product_button_desktop_position_left: string;
+    alt: string;
+    banner_button_text_color: string;
+  };
+}
+
+export interface PointerComponentProductItem {
+  kwargs: {
+    data_type: 'nested';
+    value: {
+      card_image: ImageType;
+    };
+  };
+  value: {
+    banner_title_text: string;
+    banner_title_color: string;
+    normal_price: string;
+    url: string;
+    reduced_price: string;
+    banner_button_text: string;
+    banner_button_icon: string;
+    card_image: string;
+    banner_button_bg_color: string;
+    banner_button_text_color: string;
+    alt: string;
+  };
+}
+
+export type AccountDiscoveryItem = {
+  kwargs: {
+    data_type: 'nested';
+    value: {
+      mobile_image: ImageType;
+      image: ImageType;
+    };
+  };
+  value: {
+    url: string;
+    text: string;
+    image: string;
+    url_text: string;
+  };
+};
+
+export type AccountFaqItem = {
+  faq_categories: [
+    {
+      kwargs: {
+        data_type: 'nested';
+        value: {
+          is_top_five: {
+            data_type: string;
+            value: string;
+          };
+        };
+      };
+      value: {
+        category: string;
+        category_id: string;
+        is_top_five: string;
+      };
+    }
+  ];
+  faq_contents: [
+    {
+      kwargs: {
+        data_type: 'nested';
+        value: {
+          is_top_five: {
+            data_type: string;
+            value: string;
+          };
+        };
+      };
+      value: {
+        category: string;
+        content: string;
+        is_top_five: string;
+        title: string;
+      };
+    }
+  ];
+};

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

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

package/app-template/src/utils/generate-jsonld.ts

@@ -0,0 +1,23 @@
+import { Product } from '@akinon/next/types/commerce/product';
+
+export const generateJsonLd = (product: Product) => {
+  const URL = process.env.NEXT_PUBLIC_URL;
+
+  const productJsonLd = {
+    '@context': 'https://schema.org',
+    '@type': 'Product',
+    name: product.name,
+    image: product.productimage_set?.map((item) => item.image),
+    description: product.attributes?.description,
+    sku: product.sku,
+    offers: {
+      '@type': 'Offer',
+      url: `${URL + product.absolute_url}`,
+      priceCurrency: product.currency_type,
+      price: product.price,
+      availability: 'https://schema.org/InStock'
+    }
+  };
+
+  return productJsonLd;
+};

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

@@ -0,0 +1,247 @@
+'use client';
+
+import {
+  GTMEvent,
+  Product,
+  GTMUserType,
+  GA4EventParams
+} from '@akinon/next/types';
+import dayjs from 'dayjs';
+
+//In GA4 this is automatically collected. No need to push it manually for GA4.
+export const pushPageView = (url: string) => {
+  pushEventGA4('page_view', {
+    page_location: url
+  });
+};
+
+export const pushAddToCart = (product) => {
+  pushEventGA4('add_to_cart', {
+    currency: product?.currency_type,
+    items: [
+      {
+        item_id: product?.base_code?.toString(),
+        item_name: product?.name,
+        price: product?.price,
+        quantity: 1,
+        item_brand: product?.attributes_kwargs?.gender?.value,
+        item_category: product?.attributes?.color,
+        item_variant: product?.sku
+      }
+    ]
+  });
+};
+
+export const pushRemoveFromCart = (product) => {
+  pushEventGA4('remove_from_cart', {
+    currency: product?.currency_type,
+    items: [
+      {
+        item_id: product?.base_code?.toString(),
+        item_name: product?.name,
+        price: product?.price,
+        quantity: 1,
+        item_brand: product?.attributes_kwargs?.gender?.value,
+        item_category: product?.attributes?.color,
+        item_variant: product?.sku
+      }
+    ]
+  });
+};
+
+export const pushCartView = (
+  products: Pick<Product, 'name' | 'pk' | 'price' | 'currency_type'>[]
+) => {
+  const productCurrency = products[0]?.currency_type;
+  pushEventGA4('view_cart', {
+    currency: productCurrency,
+    items: products?.map((product) => ({
+      item_id: product?.pk?.toString(),
+      item_name: product?.name,
+      price: product?.price
+    }))
+  });
+};
+
+export const pushBeginCheckout = (
+  products: Pick<Product, 'name' | 'pk' | 'price' | 'currency_type'>[]
+) => {
+  const productCurrency = products[0]?.currency_type;
+  pushEventGA4('begin_checkout', {
+    currency: productCurrency,
+    items: products.map((product) => ({
+      item_id: product?.pk?.toString(),
+      item_name: product?.name,
+      price: product?.price
+    }))
+  });
+};
+
+export const pushAddShippingInfo = (
+  products: Pick<Product, 'name' | 'pk' | 'price' | 'currency_type'>[]
+) => {
+  const productCurrency = products[0]?.currency_type;
+  pushEventGA4('add_shipping_info', {
+    currency: productCurrency,
+    items: products.map((product) => ({
+      item_id: product?.pk?.toString(),
+      item_name: product?.name,
+      price: product?.price
+    }))
+  });
+};
+
+export const pushAddPaymentInfo = (
+  products: Pick<Product, 'name' | 'pk' | 'price' | 'currency_type'>[],
+  payment_type: string
+) => {
+  const productCurrency = products[0]?.currency_type;
+  pushEventGA4('add_payment_info', {
+    currency: productCurrency,
+    payment_type,
+    items: products.map((product) => ({
+      item_id: product?.pk?.toString(),
+      item_name: product?.name,
+      price: product?.price
+    }))
+  });
+};
+
+export const pushProductListProductViewed = (
+  product: Pick<Product, 'name' | 'pk' | 'price'>
+) => {
+  pushEventGA4('view_item_list', {
+    items: [
+      {
+        item_id: product?.pk?.toString(),
+        item_name: product?.name,
+        price: product?.price
+      }
+    ]
+  });
+};
+
+export const pushProductClicked = (
+  product: Pick<Product, 'name' | 'pk' | 'price'>
+) => {
+  pushEventGA4('select_item', {
+    items: [
+      {
+        item_id: product?.pk?.toString(),
+        item_name: product?.name,
+        price: product?.price
+      }
+    ]
+  });
+};
+
+export const pushProductViewed = (
+  product: Pick<
+    Product,
+    'base_code' | 'sku' | 'name' | 'price' | 'currency_type'
+  >
+) => {
+  pushEventGA4('view_item', {
+    currency: product.currency_type,
+    items: [
+      {
+        item_id: product?.base_code?.toString(),
+        item_name: product?.name,
+        price: product?.price
+      }
+    ]
+  });
+};
+
+export const pushAddToWishlist = (
+  product: Pick<Product, 'base_code' | 'name' | 'price' | 'currency_type'>
+) => {
+  pushEventGA4('add_to_wishlist', {
+    currency: product?.currency_type,
+    items: [
+      {
+        item_id: product?.base_code?.toString(),
+        item_name: product?.name,
+        price: product?.price,
+        quantity: 1
+      }
+    ]
+  });
+};
+
+const generatePromotionPayload = (promotion) => ({
+  creative_name: promotion?.creative_name,
+  promotion_id: promotion?.promotion_id,
+  promotion_name: promotion?.promotion_name,
+  items: promotion?.items?.map((item) => ({
+    item_id: item?.item_id.toString(),
+    item_name: item?.item_name,
+    price: item?.price,
+    quantity: item?.quantity
+  }))
+});
+
+export const pushSelectPromotion = (promotion) => {
+  const payload = generatePromotionPayload(promotion);
+  pushEventGA4('select_promotion', payload);
+};
+
+export const pushViewPromotion = (promotion) => {
+  const payload = generatePromotionPayload(promotion);
+  pushEventGA4('view_promotion', payload);
+};
+
+export const pushUserData = (
+  value: Pick<
+    GTMUserType,
+    'pk' | 'hashedEmail' | 'dateJoined' | 'gender' | 'emailAllowed'
+  >
+) => {
+  pushEventGA4('user_data_updated', {
+    user_id: value?.pk.toString(),
+    email_hashed: value?.hashedEmail || '',
+    signup_date: dayjs(value?.dateJoined).format('YYYY-MM-DD'),
+    gender: value?.gender || '',
+    email_permission: value.emailAllowed ? 'yes' : 'no'
+  });
+};
+
+export const pushPurchaseEvent = (order) => {
+  const transactionId = order?.id?.toString();
+  const currency = order?.currency?.value?.toUpperCase();
+  const totalAmount = Number(order?.amount);
+
+  const products = order.orderitem_set.map((item) => ({
+    base_code: item?.product.base_code,
+    name: item?.product?.name,
+    price: item?.price,
+    currency_type: item?.price_currency?.value
+  }));
+
+  pushEventGA4('purchase', {
+    transaction_id: transactionId,
+    currency,
+    value: totalAmount,
+    items: products.map((product) => ({
+      item_id: product?.base_code?.toString(),
+      item_name: product?.name,
+      price: product?.price
+    }))
+  });
+};
+
+export const pushEvent = (event: GTMEvent) => {
+  const { Category = 'Enhanced Ecommerce', Value = 0, ...rest } = event;
+
+  window.dataLayer.push({ Category, Value, ...rest });
+};
+
+export const pushEventGA4 = (
+  eventAction: string,
+  eventParams: GA4EventParams
+) => {
+  window.dataLayer.push({
+    event: eventAction,
+    ...eventParams
+  });
+};

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

@@ -0,0 +1,60 @@
+export const getOrderStatus = (
+  itemStatus: string,
+  t: (path: string) => string
+) => {
+  const result = {
+    label: '',
+    className: 'text-black'
+  } as {
+    label: string;
+    className?: string;
+  };
+
+  if (itemStatus === '50') {
+    result.label = t('account.my_orders.status.cancel_requested');
+  } else if (itemStatus === '100') {
+    result.label = t('account.my_orders.status.cancelled');
+  } else if (itemStatus === '200') {
+    result.label = t('account.my_orders.status.order_waiting');
+  } else if (itemStatus === '300') {
+    result.label = t('account.my_orders.status.payment_waiting');
+  } else if (itemStatus === '350') {
+    result.label = t('account.my_orders.status.confirmation_waiting');
+  } else if (itemStatus === '400') {
+    result.label = t('account.my_orders.status.approved');
+  } else if (itemStatus === '450') {
+    result.label = t('account.my_orders.status.preparing');
+  } else if (itemStatus === '500') {
+    result.label = t('account.my_orders.status.shipped');
+  } else if (itemStatus === '510') {
+    result.label = t('account.my_orders.status.shipped_and_informed');
+  } else if (itemStatus === '520') {
+    result.label = t('account.my_orders.status.ready_for_pickup');
+  } else if (itemStatus === '540') {
+    result.label = t('account.my_orders.status.attempted_delivery');
+  } else if (itemStatus === '550') {
+    result.label = t('account.my_orders.status.delivered');
+  } else if (itemStatus === '600') {
+    result.label = t('account.my_orders.status.returned');
+  }
+
+  if (
+    itemStatus === 'cancel' ||
+    itemStatus === '100' ||
+    itemStatus === '600' ||
+    itemStatus === 'refund'
+  ) {
+    result.className = 'text-red-600';
+  }
+
+  if (
+    itemStatus === '400' ||
+    itemStatus === '450' ||
+    itemStatus === '500' ||
+    itemStatus === '550'
+  ) {
+    result.className = 'text-green';
+  }
+
+  return result;
+};

package/app-template/src/views/account/account-menu.tsx

@@ -0,0 +1,117 @@
+'use client';
+
+import { signOut, useSession } from 'next-auth/react';
+import { useLogoutMutation } from '@akinon/next/data/client/user';
+import { ROUTES } from '@theme/routes';
+
+import { Icon, Link } from '@theme/components';
+import { usePathname } from 'next/navigation';
+import clsx from 'clsx';
+import { useLocalization } from '@akinon/next/hooks';
+
+const ACCOUNT_MENU_ITEMS = [
+  {
+    translationKey: 'account.base.menu.my_orders',
+    href: ROUTES.ACCOUNT_ORDERS,
+    testId: 'account-orders'
+  },
+  {
+    translationKey: 'account.base.menu.my_profile',
+    href: ROUTES.ACCOUNT_PROFILE,
+    testId: 'account-profile'
+  },
+  {
+    translationKey: 'account.base.menu.address_book',
+    href: ROUTES.ACCOUNT_ADDRESS,
+    testId: 'account-address'
+  },
+  {
+    translationKey: 'account.base.menu.change_email',
+    href: ROUTES.ACCOUNT_CHANGE_EMAIL,
+    testId: 'account-change-email'
+  },
+  {
+    translationKey: 'account.base.menu.change_password',
+    href: ROUTES.ACCOUNT_CHANGE_PASSWORD,
+    testId: 'account-change-password'
+  },
+  {
+    translationKey: 'account.base.menu.my_wishlist',
+    href: ROUTES.ACCOUNT_WISHLIST,
+    testId: 'account-wishlist'
+  },
+  {
+    translationKey: 'account.base.menu.my_vouchers',
+    href: ROUTES.ACCOUNT_COUPONS,
+    testId: 'account-coupons'
+  },
+  {
+    translationKey: 'account.base.menu.faq',
+    href: ROUTES.ACCOUNT_FAQ,
+    testId: 'account-faq'
+  },
+  {
+    translationKey: 'account.base.menu.contact_us',
+    href: ROUTES.ACCOUNT_CONTACT,
+    testId: 'account-contact'
+  }
+];
+
+export default function AccountMenu() {
+  const { t } = useLocalization();
+  const { data: session, status } = useSession();
+  const [logout] = useLogoutMutation();
+  const pathname = usePathname();
+  const accountMenuRegex = new RegExp(`^${ROUTES.ACCOUNT}/?$`).test(pathname);
+
+  const handleLogout = async () => {
+    logout()
+      .unwrap()
+      .then(() => {
+        signOut({
+          callbackUrl: '/'
+        });
+      })
+      .catch();
+  };
+
+  return (
+    <div
+      className={clsx('w-full lg:w-[270px] lg:mr-8', {
+        'hidden lg:block': !accountMenuRegex
+      })}
+    >
+      <div className="border-b border-gray-200 py-4">
+        <h2 className="text-3xl">{t('account.base.menu.my_account')}</h2>
+        <p className="text-xl text-secondary-500">
+          {t('account.base.menu.hello')}{' '}
+          {status === 'authenticated' && `, ${session.user.firstName}`}
+        </p>
+      </div>
+      <div>
+        <ul className="text-xs">
+          {ACCOUNT_MENU_ITEMS.map((item) => (
+            <li
+              key={item.testId}
+              className="border-b border-gray-200 py-4 flex justify-between items-center"
+            >
+              <Link href={item.href} data-testid={item.testId}>
+                {t(item.translationKey)}
+              </Link>
+              <Icon className="lg:hidden" name="chevron-end" size={12} />
+            </li>
+          ))}
+          <li className="py-7 flex justify-between items-center lg:py-4 lg:border-b lg:border-gray-200">
+            <button
+              className="w-full uppercase cursor-pointer border border-primary lg:w-auto lg:border-none py-4 lg:py-0 lg:normal-case"
+              data-testid="account-logout"
+              onClick={handleLogout}
+            >
+              {t('account.base.menu.logout')}
+            </button>
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+}