@akinon/projectzero 1.32.0 → 1.33.0

package/app-template/docs/seo-management.md

@@ -0,0 +1,125 @@
+---
+title: SEO Management
+sidebar_label: SEO Management
+slug: seo-management
+custom_edit_url: null
+---
+
+The SEO tags in your project should be included in the following files:
+
+- `src/app/[commerce]/[locale]/[currency]/layout.tsx`
+- `src/app/[commerce]/[locale]/[currency]/(root)/category/[pk]/page.tsx`
+- `src/app/[commerce]/[locale]/[currency]/(root)/list/page.tsx`
+- `src/app/[commerce]/[locale]/[currency]/(root)/product/[pk]/page.tsx`
+- `src/app/[commerce]/[locale]/[currency]/(root)/special-page/[pk]/page.tsx`
+- `src/app/[commerce]/[locale]/[currency]/(root)/group-product/[pk]/page.tsx`
+
+If your project has a category landing page, you also need to edit the SEO tags for the category landing page created within the root.
+
+- `src/app/[commerce]/[locale]/[currency]/(root)/categoryLandigPage/page.tsx`
+
+To create metadata, first import the existing Metadata in Next.js:
+
+```javascript
+import { Metadata } from '@akinon/next/types';
+```
+
+An async function named **generateMetadata** is created. This function runs before the **function root** and puts metadata in head.
+
+The `params` and `searchParams` parameters, as well as the `props` you want to display in the metadata, can be added to the **generateMetadata** function.
+
+Examples of **generateMetadata** function with different parameter options:
+
+**Without parameters:**
+
+```javascript
+export async function generateMetadata() {}
+```
+
+**With parameters:**
+
+```javascript
+export async function generateMetadata({ params, searchParams }) {}
+```
+
+**With parameters and props:**
+
+`<{ pk: number }>` represents a single attribute to be extracted from props.
+
+```javascript
+export async function generateMetadata({
+  params,
+  searchParams
+}: PageProps<{ pk: number }>) {}
+```
+
+SEO data such as title, description, canonical, openGraph can also be added to **metadata**.
+
+Example **Metadata** variable:
+
+```javascript
+const result: Metadata = {
+  title: 'title',
+  description: 'description',
+  keywords: 'keywords',
+  twitter: {
+    title: 'title',
+    description: 'description'
+  },
+  alternates: {
+    canonical: 'canonicalUrl'
+  },
+  openGraph: {
+    title: 'title',
+    description: 'description',
+    images: 'image'
+  }
+};
+```
+
+Example of the **generateMetadata** function for `src/app/[commerce]/[locale]/[currency]/(root)/product/[pk]/page.tsx`:
+
+```javascript
+export async function generateMetadata({
+  params,
+  searchParams
+}: PageProps<{ pk: number, locale: string }>) {
+  const nextHeaders = pzUrl();
+  const pageUrl = new URL(
+    nextHeaders.get('pz-url') ?? process.env.NEXT_PUBLIC_URL
+  );
+
+  const canonicalUrl = `${process.env.NEXT_PUBLIC_URL}${pageUrl?.pathname}`;
+  let result: Metadata = {};
+
+  try {
+    const {
+      data: { product }
+    } = await getProductData({
+      pk: params.pk,
+      searchParams
+    });
+    result = {
+      title: product.name,
+      description: product.attributes.description,
+      twitter: {
+        title: product.name,
+        description: product.attributes.description
+      },
+      openGraph: {
+        title: product.name,
+        description: product.attributes.description,
+        images: product.productimage_set?.map((item) => ({
+          url: item.image
+        }))
+      },
+      alternates: {
+        canonical: canonicalUrl
+      }
+    };
+    // eslint-disable-next-line no-empty
+  } catch (error) {}
+
+  return result;
+}
+```

package/app-template/docs/static-assets.md

@@ -0,0 +1,36 @@
+---
+title: Static Assets
+sidebar_label: Static Assets
+slug: static-assets
+custom_edit_url: null
+---
+
+This page covers the management of **static assets** in the cloned project, accessing and optimizing various types of files in the local development environment. 
+
+## Accessing Static Assets
+
+The **projectrepo/public** folder in the cloned project is the repository where the **static assets** are located.
+
+All files placed in this folder can be accessed once the local server is up and running. For example, files such as **http://localhost:3000/404.png** can be accessed from this folder.
+
+It should be noted that this accessibility is not limited to image files; files with various extensions, such as **.json** and **.js**, can also be displayed in the local browser without any compatibility issues.
+
+
+## Configuration with Vercel
+
+To achieve this functionality, matcher property in Vercel's platform is used. The core of this configuration can be found within the **src/middleware.ts** file, where the regular expression can be examined:
+
+```markdown 
+matcher: ['/((?!api|_next|[\\w-\\/*]+\\.\\w+).*)']
+```
+
+This expression ensures that the necessary routing occurs correctly.
+
+## Additional Resources
+
+For more detailed information, please check out following documents:
+
+-   [Vercel Platforms Commit](https://github.com/vercel/platforms/commit/53cb3242c0eb047ee535d539ded1ac0f948e5433)
+-   [Next.js Middleware Upgrade Guide](https://nextjs.org/docs/messages/middleware-upgrade-guide#how-to-upgrade)
+-   [Optimizing Static Assets](https://nextjs.org/docs/app/building-your-application/optimizing/static-assets)
+-   [Skipping Next.js Middleware for Static and Public Files](https://clerk.com/blog/skip-nextjs-middleware-static-and-public-files?utm_source=www.google.com&utm_medium=referral&utm_campaign=none)

package/app-template/docs/widgets.md

@@ -0,0 +1,127 @@
+---
+title: Widgets
+sidebar_label: Widgets
+slug: widgets
+custom_edit_url: null
+---
+
+# Widget Order
+
+In certain cases, websites, particularly homepages, require frequent content updates. To eliminate the need for constantly editing code, a widget sorting system is used. This sorting widget is simple, featuring multiple text fields that facilitate the input of widget information and their reordering.
+
+Once the Widget Order scheme has been integrated into Omnitron, the next step is to create a widget that allows for the addition of widget slugs. Instructions for creating this widget can be found below. The names of the created widgets are then entered based on this widget order.
+
+## Example Widget Order Schema
+
+```json
+{
+	"widget_order": {
+		"multi": true,
+		"data_type": "nested",
+		"key": "widget_order",
+		"label": "Widget Order",
+		"schema": {
+			"item_slug": {
+				"data_type": "text",
+				"key": "item_slug",
+				"label": "Widget Slug"
+			}
+		}
+	}
+}
+```
+
+## Widget Integration
+
+### Home Page
+
+1.  Create a Widget Order named **home-widget-order** and append the corresponding widget slug names to it.
+
+2.  To retrieve the widget slug names that have been added, use the **HOME_WIDGETS** variable's slug name in the `src/widgets/index.ts` file along with the widget's relative path.
+
+    ```java
+    export const HOME_WIDGETS: {
+        [key: string]: ComponentType<WidgetResultType<unknown>>;
+    } = {
+        'widget-slug-name': dynamic(async () => import('./widget-relative-path.ts'))
+        };
+    ```
+
+### Using the Client Server
+
+1.  In **'use client'** components, import the **useGetWidgetQuery** function into the component.
+
+    ```java
+    import { useGetWidgetQuery } from '@akinon/next/data/client/misc';
+    ```
+
+2.  Create a variable to hold the imported function, and pass the slug name of the targeted widget to this variable.
+
+    ```java
+    const { data } = useGetWidgetQuery('slug-name');
+    ```
+
+3.  Retrieve the widget's data and either send it to another component using `<ComponentName data={data} />` syntax or process it within the component where it was retrieved.
+
+### Server-Only Components
+
+1.  In **'server-only'** components, import the **getWidgetData** function into the component.
+
+    ```java
+    import { getWidgetData } from '@akinon/next/data/server';
+    ```
+
+2.  Prepare a type according to the schema of the created widget.
+
+    ### Example Type
+
+    ```typescript
+    type  FooterMenuTitle = {
+        value: string;
+    };
+
+    type  FooterMenuItem = [{
+        kwargs: {
+            data_type: 'nested';
+            value: {
+            is_side_column_item?: SideItem;
+            is_target_blank: TargetBlank;
+            };
+        };
+        value: {
+            is_side_column_item?: string;
+            is_target_blank: string;
+            name: string;
+            redirect_url: string;
+        };
+    }];
+
+    type  FooterMenuType = {
+        first_column_title: FooterMenuTitle;
+        first_column_items: FooterMenuItem;
+    };
+    ```
+
+3.  Create a variable for the imported function. Add the type for the **getWidgetData** function to this variable, and provide the widget's slug name to the function.
+
+    ```java
+    const data = await getWidgetData<FooterMenuType>({ slug: 'footer-menu' });
+    ```
+
+4.  Obtain the data for the targeted widget as intended.
+
+At times, there be a need to duplicate the same widget while supplying it with different data. In such situations, creating a widget content is necessary. To use the created widget, import the **dynamic** function.
+
+```java
+import  dynamic  from  'next/dynamic';
+```
+After importing, create a variable to invoke the function, and call the function with the relative path of the preferred content as its argument.
+
+```java
+const FooterMenuContent = dynamic(
+	() => import('../views/widgets/footer-menu-content'),
+	{ssr: false}
+);
+```
+
+The `FooterMenuContent` component, which incorporates the desired content, is now available for use. To add this component, simply insert `<FooterMenuContent data={data} />` at the desired location.

package/app-template/global.d.ts

@@ -0,0 +1 @@
+/// <reference types="@akinon/next/global.d.ts" />

package/app-template/jest.config.ts

@@ -0,0 +1,34 @@
+const nextJest = require('next/jest');
+import type { InitialOptionsTsJest } from 'ts-jest/dist/types';
+
+const createJestConfig = nextJest({
+  dir: './'
+});
+
+const config: InitialOptionsTsJest = {
+  preset: 'ts-jest',
+  setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],
+  transform: {
+    '.+\\.(css|styl|less|sass|scss)$': 'jest-css-modules-transform'
+  },
+  testEnvironment: 'jsdom',
+  globals: {
+    'ts-jest': {
+      tsconfig: 'tsconfig.test.json'
+    }
+  },
+  moduleDirectories: ['node_modules', 'src']
+};
+
+module.exports = async () => ({
+  ...(await createJestConfig(config)()),
+  collectCoverageFrom: [
+    'src/**/*.{js,jsx,ts,tsx}',
+    '!src/**/*.d.ts',
+    '!src/reportWebVitals.ts',
+    '!**/node_modules/**'
+  ],
+  transformIgnorePatterns: [
+    'node_modules/(?!(swiper|ssr-window|dom7|@akinon)/)'
+  ]
+});

package/app-template/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package/app-template/next.config.mjs

@@ -0,0 +1,34 @@
+import withPWA from 'next-pwa';
+import { withSentryConfig } from '@sentry/nextjs';
+import withPzConfig from '@akinon/next/with-pz-config.js';
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // Your Next.js config to override defaults
+  rewrites: async () => {
+    return [
+      {
+        source: '/:commerce/:locale/:currency/sitemap.xml',
+        destination: '/:commerce/:locale/:currency/xml-sitemap'
+      },
+      {
+        source: '/:commerce/:locale/:currency/sitemap/:node',
+        destination: '/:commerce/:locale/:currency/xml-sitemap/:node'
+      }
+    ];
+  }
+};
+
+const withPwaConfig = withPWA({
+  dest: 'public',
+  disable: process.env.NODE_ENV === 'development'
+});
+
+const sentryConfig = {
+  silent: true,
+  dryRun: !process.env.SENTRY_DSN
+};
+
+const enhancedConfig = withPzConfig(nextConfig);
+
+export default withSentryConfig(withPwaConfig(enhancedConfig), sentryConfig);

package/app-template/package.json

@@ -0,0 +1,97 @@
+{
+  "name": "projectzeronext",
+  "version": "1.33.0",
+  "private": true,
+  "license": "MIT",
+  "scripts": {
+    "clean": "rm -rf node_modules && rm -rf .next",
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start -p 8008",
+    "type-check": "tsc",
+    "lint": "next lint",
+    "test": "jest",
+    "cypress:headless": "cd projectzeroe2e && yarn headless",
+    "e2e:headless": "CYPRESS_BASE_URL=http://localhost:3000 start-server-and-test start http://localhost:3000 cypress:headless",
+    "postinstall": "pz-postinstall",
+    "predev": "pz-predev",
+    "postdev": "pz-postdev",
+    "prebuild": "pz-prebuild",
+    "postbuild": "pz-postbuild",
+    "poststart": "pz-poststart",
+    "prestart": "pz-prestart"
+  },
+  "dependencies": {
+    "@akinon/next": "1.33.0",
+    "@akinon/pz-b2b": "1.33.0",
+    "@akinon/pz-gpay": "1.33.0",
+    "@akinon/pz-masterpass": "1.33.0",
+    "@akinon/pz-one-click-checkout": "1.33.0",
+    "@akinon/pz-otp": "1.33.0",
+    "@akinon/pz-pay-on-delivery": "1.33.0",
+    "@hookform/resolvers": "2.9.0",
+    "@next/third-parties": "14.1.0",
+    "@react-google-maps/api": "2.17.1",
+    "@sentry/nextjs": "7.105.0",
+    "dayjs": "1.11.5",
+    "lossless-json": "2.0.5",
+    "next": "14.1.3",
+    "next-auth": "4.24.5",
+    "next-pwa": "5.6.0",
+    "pino": "8.11.0",
+    "postcss": "8.4.31",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-google-recaptcha": "2.1.0",
+    "react-hook-form": "7.31.3",
+    "react-intersection-observer": "9.4.0",
+    "react-multi-carousel": "2.8.4",
+    "react-string-replace": "1.1.0",
+    "start-server-and-test": "2.0.3",
+    "tailwind-merge": "1.8.0",
+    "yup": "0.32.11"
+  },
+  "devDependencies": {
+    "@akinon/eslint-plugin-projectzero": "1.33.0",
+    "@semantic-release/changelog": "6.0.2",
+    "@semantic-release/exec": "6.0.3",
+    "@semantic-release/git": "10.0.1",
+    "@tailwindcss/typography": "0.5.10",
+    "@testing-library/dom": "8.13.0",
+    "@testing-library/jest-dom": "5.16.4",
+    "@testing-library/react": "13.1.1",
+    "@testing-library/user-event": "14.1.1",
+    "@types/googlemaps": "3.43.3",
+    "@types/jest": "27.4.1",
+    "@types/react": "18.2.27",
+    "@types/react-dom": "18.2.12",
+    "@typescript-eslint/eslint-plugin": "6.7.4",
+    "@typescript-eslint/parser": "6.7.4",
+    "autoprefixer": "10.4.13",
+    "client-only": "0.0.1",
+    "clsx": "1.1.1",
+    "currency-symbol-map": "5.1.0",
+    "eslint": "8.14.0",
+    "eslint-config-next": "14.0.3",
+    "eslint-config-prettier": "8.5.0",
+    "husky": "8.0.0",
+    "jest": "29.7.0",
+    "jest-css-modules-transform": "4.3.0",
+    "lint-staged": "13.1.0",
+    "prettier": "2.6.2",
+    "react-number-format": "4.9.3",
+    "sass": "1.49.9",
+    "semantic-release": "19.0.5",
+    "server-only": "0.0.1",
+    "stylelint": "14.6.0",
+    "stylelint-config-sass-guidelines": "9.0.1",
+    "stylelint-config-standard": "25.0.0",
+    "stylelint-scss": "4.2.0",
+    "stylelint-selector-bem-pattern": "2.1.1",
+    "tailwindcss": "3.4.0",
+    "ts-jest": "29.1.1",
+    "ts-node": "10.7.0",
+    "typescript": "5.2.2"
+  },
+  "packageManager": "yarn@1.22.17"
+}

package/app-template/plugins.d.ts

@@ -0,0 +1 @@
+/// <reference types="@akinon/next/plugins.d.ts" />

package/app-template/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+};

package/app-template/public/apple.svg

@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 22.773 22.773" xml:space="preserve">
+<g>
+	<g>
+		<path d="M15.769,0c0.053,0,0.106,0,0.162,0c0.13,1.606-0.483,2.806-1.228,3.675c-0.731,0.863-1.732,1.7-3.351,1.573
+			c-0.108-1.583,0.506-2.694,1.25-3.561C13.292,0.879,14.557,0.16,15.769,0z"/>
+		<path d="M20.67,16.716c0,0.016,0,0.03,0,0.045c-0.455,1.378-1.104,2.559-1.896,3.655c-0.723,0.995-1.609,2.334-3.191,2.334
+			c-1.367,0-2.275-0.879-3.676-0.903c-1.482-0.024-2.297,0.735-3.652,0.926c-0.155,0-0.31,0-0.462,0
+			c-0.995-0.144-1.798-0.932-2.383-1.642c-1.725-2.098-3.058-4.808-3.306-8.276c0-0.34,0-0.679,0-1.019
+			c0.105-2.482,1.311-4.5,2.914-5.478c0.846-0.52,2.009-0.963,3.304-0.765c0.555,0.086,1.122,0.276,1.619,0.464
+			c0.471,0.181,1.06,0.502,1.618,0.485c0.378-0.011,0.754-0.208,1.135-0.347c1.116-0.403,2.21-0.865,3.652-0.648
+			c1.733,0.262,2.963,1.032,3.723,2.22c-1.466,0.933-2.625,2.339-2.427,4.74C17.818,14.688,19.086,15.964,20.67,16.716z"/>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+</g>
+</svg>

package/app-template/public/facebook.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="20" viewBox="0 0 10 20" xmlns="http://www.w3.org/2000/svg">
+    <path d="M6.49 20v-9.123h2.952l.439-3.554h-3.39v-2.27c0-1.028.275-1.731 1.695-1.731H10V.139C9.688.093 8.61 0 7.36 0c-2.617 0-4.4 1.66-4.4 4.705V7.33H0v3.554h2.96V20h3.53z" fill="#4267B2" fill-rule="nonzero"/>
+</svg>

package/app-template/public/google.svg

@@ -0,0 +1,12 @@
+<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <g fill-rule="nonzero" fill="none">
+        <path d="M17.855 7.334c.08 0 .145.065.145.145V9a9.002 9.002 0 0 1-9.063 9A8.979 8.979 0 0 1 0 8.98a9 9 0 0 1 15.258-6.448c.059.056.06.15.003.207l-2.152 2.152a.144.144 0 0 1-.202.003A5.648 5.648 0 0 0 9 3.332a5.651 5.651 0 0 0-5.668 5.629 5.668 5.668 0 0 0 11.087 1.705H9.145A.145.145 0 0 1 9 10.521V7.48c0-.08.065-.145.145-.145h8.71z" fill="#2196F3"/>
+        <path d="M17.855 7.334H16.77c.08 0 .144.065.144.145V9a9.004 9.004 0 0 1-8.457 8.984A9.002 9.002 0 0 0 18 9V7.479a.145.145 0 0 0-.145-.145z" fill="#1E88E5"/>
+        <path d="M3.852 6.626 1.118 4.651A8.998 8.998 0 0 1 9 0c2.432 0 4.638.965 6.258 2.532.059.056.06.15.003.207l-2.152 2.152a.144.144 0 0 1-.202.003 5.668 5.668 0 0 0-9.056 1.732z" fill="#F44336"/>
+        <path d="m3.063 6.056.789.57A5.671 5.671 0 0 1 8.41 3.363l.046-.005a5.651 5.651 0 0 0-5.393 2.698zM14.172 2.532c.058.056.06.15.002.207l-1.746 1.747c.167.127.327.263.48.408a.144.144 0 0 0 .2-.003l2.153-2.152a.145.145 0 0 0-.003-.207A8.972 8.972 0 0 0 8.457.017a8.971 8.971 0 0 1 5.715 2.515z" fill="#E53935"/>
+        <path d="M15.602 15.116A8.975 8.975 0 0 1 9 18a9 9 0 0 1-8.051-4.975l2.79-1.912a5.67 5.67 0 0 0 9.13 2.029l2.733 1.974z" fill="#4CAF50"/>
+        <path d="m3.74 11.113-.824.564a5.667 5.667 0 0 0 5.54 2.965 5.673 5.673 0 0 1-4.717-3.53zM9 18a8.975 8.975 0 0 0 6.602-2.884l-.67-.483a8.984 8.984 0 0 1-6.474 3.35c.18.011.36.017.542.017z" fill="#43A047"/>
+        <path d="M3.332 9c0 .747.144 1.46.407 2.113L.95 13.025A8.958 8.958 0 0 1 0 9c0-1.577.406-3.06 1.118-4.349l2.734 1.975A5.645 5.645 0 0 0 3.332 9z" fill="#FFC107"/>
+        <path d="m2.916 11.677.823-.564A5.65 5.65 0 0 1 3.332 9c0-.847.186-1.652.52-2.374l-.79-.57a5.66 5.66 0 0 0-.816 2.905 5.644 5.644 0 0 0 .67 2.716z" fill="#FFB300"/>
+    </g>
+</svg>