@akinon/projectzero 2.0.152-rc.1 → 2.0.152-rc.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @akinon/projectzero
 
+## 2.0.152-rc.2
+
+### Patch Changes
+
+- 9c778307: ZERO-5200: Show the other sellers of a product with their price and stock on the product detail page
+
 ## 2.0.152-rc.1
 
 ### Patch Changes

package/app-template/CHANGELOG.md

@@ -1,5 +1,40 @@
 # projectzeronext
 
+## 2.0.152-rc.2
+
+### Patch Changes
+
+- 219164a3: ZERO-2301: Add data source landing page data fetcher for Seller Center store pages
+- Updated dependencies [219164a3]
+- Updated dependencies [9c778307]
+  - @akinon/next@2.0.152-rc.2
+  - @akinon/pz-theme@2.0.152-rc.2
+  - @akinon/pz-virtual-try-on@2.0.152-rc.2
+  - @akinon/pz-akifast@2.0.152-rc.2
+  - @akinon/pz-apple-pay@2.0.152-rc.2
+  - @akinon/pz-b2b@2.0.152-rc.2
+  - @akinon/pz-basket-gift-pack@2.0.152-rc.2
+  - @akinon/pz-bkm@2.0.152-rc.2
+  - @akinon/pz-checkout-gift-pack@2.0.152-rc.2
+  - @akinon/pz-click-collect@2.0.152-rc.2
+  - @akinon/pz-credit-payment@2.0.152-rc.2
+  - @akinon/pz-cybersource-uc@2.0.152-rc.2
+  - @akinon/pz-flow-payment@2.0.152-rc.2
+  - @akinon/pz-google-pay@2.0.152-rc.2
+  - @akinon/pz-gpay@2.0.152-rc.2
+  - @akinon/pz-haso@2.0.152-rc.2
+  - @akinon/pz-hepsipay@2.0.152-rc.2
+  - @akinon/pz-masterpass@2.0.152-rc.2
+  - @akinon/pz-masterpass-rest@2.0.152-rc.2
+  - @akinon/pz-multi-basket@2.0.152-rc.2
+  - @akinon/pz-one-click-checkout@2.0.152-rc.2
+  - @akinon/pz-otp@2.0.152-rc.2
+  - @akinon/pz-pay-on-delivery@2.0.152-rc.2
+  - @akinon/pz-saved-card@2.0.152-rc.2
+  - @akinon/pz-similar-products@2.0.152-rc.2
+  - @akinon/pz-tabby-extension@2.0.152-rc.2
+  - @akinon/pz-tamara-extension@2.0.152-rc.2
+
 ## 2.0.152-rc.1
 
 ### Patch Changes

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

@@ -1,7 +1,7 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
 /// <reference types="next/navigation-types/compat/navigation" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/app-template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "projectzeronext",
-  "version": "2.0.152-rc.1",
+  "version": "2.0.152-rc.2",
   "private": true,
   "license": "MIT",
   "scripts": {
@@ -24,33 +24,33 @@
     "test:middleware": "jest middleware-matcher.test.ts --bail"
   },
   "dependencies": {
-    "@akinon/next": "2.0.152-rc.1",
-    "@akinon/pz-akifast": "2.0.152-rc.1",
-    "@akinon/pz-apple-pay": "2.0.152-rc.1",
-    "@akinon/pz-b2b": "2.0.152-rc.1",
-    "@akinon/pz-basket-gift-pack": "2.0.152-rc.1",
-    "@akinon/pz-bkm": "2.0.152-rc.1",
-    "@akinon/pz-checkout-gift-pack": "2.0.152-rc.1",
-    "@akinon/pz-click-collect": "2.0.152-rc.1",
-    "@akinon/pz-credit-payment": "2.0.152-rc.1",
-    "@akinon/pz-cybersource-uc": "2.0.152-rc.1",
-    "@akinon/pz-flow-payment": "2.0.152-rc.1",
-    "@akinon/pz-google-pay": "2.0.152-rc.1",
-    "@akinon/pz-gpay": "2.0.152-rc.1",
-    "@akinon/pz-haso": "2.0.152-rc.1",
-    "@akinon/pz-hepsipay": "2.0.152-rc.1",
-    "@akinon/pz-masterpass": "2.0.152-rc.1",
-    "@akinon/pz-masterpass-rest": "2.0.152-rc.1",
-    "@akinon/pz-multi-basket": "2.0.152-rc.1",
-    "@akinon/pz-one-click-checkout": "2.0.152-rc.1",
-    "@akinon/pz-otp": "2.0.152-rc.1",
-    "@akinon/pz-pay-on-delivery": "2.0.152-rc.1",
-    "@akinon/pz-saved-card": "2.0.152-rc.1",
-    "@akinon/pz-similar-products": "2.0.152-rc.1",
-    "@akinon/pz-tabby-extension": "2.0.152-rc.1",
-    "@akinon/pz-tamara-extension": "2.0.152-rc.1",
-    "@akinon/pz-theme": "2.0.152-rc.1",
-    "@akinon/pz-virtual-try-on": "2.0.152-rc.1",
+    "@akinon/next": "2.0.152-rc.2",
+    "@akinon/pz-akifast": "2.0.152-rc.2",
+    "@akinon/pz-apple-pay": "2.0.152-rc.2",
+    "@akinon/pz-b2b": "2.0.152-rc.2",
+    "@akinon/pz-basket-gift-pack": "2.0.152-rc.2",
+    "@akinon/pz-bkm": "2.0.152-rc.2",
+    "@akinon/pz-checkout-gift-pack": "2.0.152-rc.2",
+    "@akinon/pz-click-collect": "2.0.152-rc.2",
+    "@akinon/pz-credit-payment": "2.0.152-rc.2",
+    "@akinon/pz-cybersource-uc": "2.0.152-rc.2",
+    "@akinon/pz-flow-payment": "2.0.152-rc.2",
+    "@akinon/pz-google-pay": "2.0.152-rc.2",
+    "@akinon/pz-gpay": "2.0.152-rc.2",
+    "@akinon/pz-haso": "2.0.152-rc.2",
+    "@akinon/pz-hepsipay": "2.0.152-rc.2",
+    "@akinon/pz-masterpass": "2.0.152-rc.2",
+    "@akinon/pz-masterpass-rest": "2.0.152-rc.2",
+    "@akinon/pz-multi-basket": "2.0.152-rc.2",
+    "@akinon/pz-one-click-checkout": "2.0.152-rc.2",
+    "@akinon/pz-otp": "2.0.152-rc.2",
+    "@akinon/pz-pay-on-delivery": "2.0.152-rc.2",
+    "@akinon/pz-saved-card": "2.0.152-rc.2",
+    "@akinon/pz-similar-products": "2.0.152-rc.2",
+    "@akinon/pz-tabby-extension": "2.0.152-rc.2",
+    "@akinon/pz-tamara-extension": "2.0.152-rc.2",
+    "@akinon/pz-theme": "2.0.152-rc.2",
+    "@akinon/pz-virtual-try-on": "2.0.152-rc.2",
     "@hookform/resolvers": "2.9.0",
     "@next/third-parties": "16.2.6",
     "@react-google-maps/api": "2.17.1",
@@ -74,7 +74,7 @@
     "yup": "0.32.11"
   },
   "devDependencies": {
-    "@akinon/eslint-plugin-projectzero": "2.0.152-rc.1",
+    "@akinon/eslint-plugin-projectzero": "2.0.152-rc.2",
     "@semantic-release/changelog": "6.0.2",
     "@semantic-release/exec": "6.0.3",
     "@semantic-release/git": "10.0.1",

package/app-template/public/locales/en/common.json

@@ -144,5 +144,10 @@
     "address": {
       "label": "Select Address"
     }
+  },
+  "data_source_page": {
+    "search_placeholder": "Search in store",
+    "search_button": "Search in store",
+    "all_products": "All products of the store"
   }
 }

package/app-template/public/locales/en/product.json

@@ -34,6 +34,12 @@
   "installment_not_available": "Installment options not available",
   "cash": "Cash",
   "installment": "Installment",
+  "offers": {
+    "title": "OTHER SELLERS OF THE PRODUCT",
+    "see_all": "See All",
+    "in_stock": "In Stock",
+    "out_of_stock": "Out of Stock"
+  },
   "stock_alert": {
     "title": "Stock Alert",
     "success_description": "When your size is back in stock we'll send an email to: <Email/>",

package/app-template/public/locales/tr/common.json

@@ -144,5 +144,10 @@
     "address": {
       "label": "Adres Seçiniz"
     }
+  },
+  "data_source_page": {
+    "search_placeholder": "Mağazada ara",
+    "search_button": "Mağazada ara",
+    "all_products": "Mağazanın tüm ürünleri"
   }
 }

package/app-template/public/locales/tr/product.json

@@ -34,6 +34,12 @@
   "installment_not_available": "Taksit seçenekleri mevcut değil",
   "cash": "Peşin",
   "installment": "Taksit",
+  "offers": {
+    "title": "ÜRÜNÜN DİĞER SATICILARI",
+    "see_all": "Hepsini gör",
+    "in_stock": "Stokta var",
+    "out_of_stock": "Stokta yok"
+  },
   "stock_alert": {
     "title": "Stok Uyarısı",
     "success_description": "Bedeniniz stoklara tekrar girdiğinde şu adrese bir e-posta göndereceğiz: <Email/>",

package/app-template/src/__tests__/data-source-landing-page.test.tsx

@@ -0,0 +1,132 @@
+import { render, screen } from '@testing-library/react';
+import { getDataSourcePageData, getWidgetData } from '@akinon/next/data/server';
+import Page, {
+  generateMetadata
+} from '../app/[pz]/data-source-landing-page/[pk]/page';
+
+jest.mock('@akinon/next/data/server', () => ({
+  getDataSourcePageData: jest.fn(),
+  getWidgetData: jest.fn()
+}));
+
+jest.mock('@akinon/next/hocs/server', () => ({
+  withSegmentDefaults: (component) => component
+}));
+
+jest.mock('@akinon/next/utils/pz-segments', () => ({
+  parsePzParams: () => ({ locale: 'tr' })
+}));
+
+jest.mock('next/navigation', () => ({
+  notFound: jest.fn(() => {
+    throw new Error('NEXT_NOT_FOUND');
+  })
+}));
+
+// `@theme/*` modules resolve to these paths; jest keys mocks by resolved path.
+jest.mock('../settings', () => ({ __esModule: true, default: {} }));
+jest.mock('../views/data-source-page/layout', () => ({
+  __esModule: true,
+  default: ({ data }) => <div data-testid="store-page">{data.pk}</div>
+}));
+
+const mockGetDataSourcePageData = getDataSourcePageData as jest.Mock;
+const mockGetWidgetData = getWidgetData as jest.Mock;
+
+const page = {
+  pk: 3,
+  data_source: {
+    pk: 17,
+    name: 'ayse-ticaret',
+    slug: 'ayse-ticaret',
+    title: 'Ayşe Ticaret'
+  },
+  widget: 'ayse-ticaret-0',
+  product_collection_widget: 'ayse-ticaret-collection',
+  is_active: true
+};
+
+const renderPage = async (pk: string) =>
+  render(await Page({ params: { pk }, searchParams: {} }));
+
+// Route params arrive as strings even though the page types them as numbers.
+const metadataFor = (pk: string) =>
+  generateMetadata({
+    params: Promise.resolve({ pk })
+  } as unknown as Parameters<typeof generateMetadata>[0]);
+
+describe('data source landing page route', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders the store page for an active landing page', async () => {
+    mockGetDataSourcePageData.mockResolvedValue(page);
+
+    await renderPage('3');
+
+    expect(mockGetDataSourcePageData).toHaveBeenCalledWith({ pk: 3 });
+    expect(screen.getByTestId('store-page')).toHaveTextContent('3');
+  });
+
+  it.each([
+    ['a missing page', null],
+    ['a failed request', undefined],
+    ['an inactive page', { ...page, is_active: false }]
+  ])('responds with not found for %s', async (_, data) => {
+    mockGetDataSourcePageData.mockResolvedValue(data);
+
+    await expect(renderPage('3')).rejects.toThrow('NEXT_NOT_FOUND');
+  });
+
+  it('responds with not found for an invalid pk without fetching', async () => {
+    await expect(renderPage('03')).rejects.toThrow('NEXT_NOT_FOUND');
+    await expect(renderPage('abc')).rejects.toThrow('NEXT_NOT_FOUND');
+    expect(mockGetDataSourcePageData).not.toHaveBeenCalled();
+  });
+
+  it('builds the metadata from the store and its page widget', async () => {
+    mockGetDataSourcePageData.mockResolvedValue(page);
+    mockGetWidgetData.mockResolvedValue({
+      attributes: {
+        footer: {
+          value: { description: '<p>Kargo &amp; İade</p><p>Hızlı teslimat</p>' }
+        }
+      }
+    });
+
+    await expect(metadataFor('3')).resolves.toEqual({
+      title: 'Ayşe Ticaret',
+      description: 'Kargo & İade Hızlı teslimat'
+    });
+    expect(mockGetDataSourcePageData).toHaveBeenCalledWith({
+      pk: 3,
+      locale: 'tr'
+    });
+    expect(mockGetWidgetData).toHaveBeenCalledWith({
+      slug: 'ayse-ticaret-0',
+      locale: 'tr'
+    });
+
+    mockGetWidgetData.mockResolvedValue({
+      attributes: { banner: { value: { subtitle: 'Yeni sezon' } } }
+    });
+    mockGetDataSourcePageData.mockResolvedValue({
+      ...page,
+      data_source: { ...page.data_source, title: '' }
+    });
+
+    await expect(metadataFor('3')).resolves.toEqual({
+      title: 'ayse-ticaret',
+      description: 'Yeni sezon'
+    });
+  });
+
+  it('returns empty metadata when there is no page', async () => {
+    mockGetDataSourcePageData.mockResolvedValue(null);
+
+    await expect(metadataFor('3')).resolves.toEqual({});
+    await expect(metadataFor('x')).resolves.toEqual({});
+    expect(mockGetWidgetData).not.toHaveBeenCalled();
+  });
+});

package/app-template/src/app/[pz]/[...prettyurl]/page.tsx

@@ -115,6 +115,14 @@ export async function generateMetadata(props: AsyncPageProps) {
         result = await module['generateMetadata']?.(commonProps as any);
       });
     }
+
+    if (prettyUrlResult.path.startsWith('/data-source-landing-page/')) {
+      await import('@data-source-landing-page/[pk]/page').then(
+        async (module) => {
+          result = await module['generateMetadata']?.(commonProps as any);
+        }
+      );
+    }
     // eslint-disable-next-line no-empty
   } catch (error) {}
 
@@ -189,5 +197,11 @@ export default async function Page(props) {
     return <FlatPage {...commonProps} />;
   }
 
+  if (result.path.startsWith('/data-source-landing-page/')) {
+    const DataSourcePage = (await import('@data-source-landing-page/[pk]/page'))
+      .default;
+    return <DataSourcePage {...commonProps} />;
+  }
+
   return null;
 }

package/app-template/src/app/[pz]/data-source-landing-page/[pk]/loading.tsx

@@ -0,0 +1,5 @@
+import { PageLoaderSpinner } from '@theme/views/page-loader-spinner';
+
+export default function Loading() {
+  return <PageLoaderSpinner />;
+}

package/app-template/src/app/[pz]/data-source-landing-page/[pk]/page.tsx

@@ -0,0 +1,62 @@
+import { getDataSourcePageData, getWidgetData } from '@akinon/next/data/server';
+import { withSegmentDefaults } from '@akinon/next/hocs/server';
+import {
+  AsyncPageProps,
+  Metadata,
+  ResolvedPageProps
+} from '@akinon/next/types';
+import { parsePzParams } from '@akinon/next/utils/pz-segments';
+import settings from '@theme/settings';
+import { DataSourcePageData } from '@theme/types';
+import { toPlainText } from '@theme/utils/sanitize';
+import DataSourcePageLayout from '@theme/views/data-source-page/layout';
+import { notFound } from 'next/navigation';
+
+const isValidPk = (pk: unknown) => /^[1-9]\d*$/.test(String(pk));
+
+export async function generateMetadata(
+  props: AsyncPageProps<{ pk: number }>
+): Promise<Metadata> {
+  const params = await props.params;
+
+  if (!isValidPk(params.pk)) {
+    return {};
+  }
+
+  const { locale } = parsePzParams(params, settings);
+  const data = await getDataSourcePageData({ pk: Number(params.pk), locale });
+  const title = data?.data_source?.title || data?.data_source?.name;
+
+  if (!title) {
+    return {};
+  }
+
+  const pageData = await getWidgetData<DataSourcePageData>({
+    slug: data.widget,
+    locale
+  });
+  const description = (
+    pageData?.attributes?.banner?.value?.subtitle ||
+    toPlainText(pageData?.attributes?.footer?.value?.description)
+  ).slice(0, 160);
+
+  return description ? { title, description } : { title };
+}
+
+async function Page({ params }: ResolvedPageProps<{ pk: number }>) {
+  if (!isValidPk(params.pk)) {
+    notFound();
+  }
+
+  const data = await getDataSourcePageData({ pk: Number(params.pk) });
+
+  if (!data?.pk || data.is_active === false) {
+    notFound();
+  }
+
+  return <DataSourcePageLayout data={data} />;
+}
+
+export default withSegmentDefaults(Page, {
+  segmentType: 'page'
+});

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

@@ -113,3 +113,61 @@ export type AccountFaqItem = {
     }
   ];
 };
+
+export type DataSourceProductRecommendation = {
+  title?: {
+    value: string;
+  };
+};
+
+export type DataSourcePageStory = {
+  value?: {
+    title?: string;
+    link?: string;
+  };
+  kwargs?: {
+    value?: {
+      image?: ImageType;
+    };
+  };
+};
+
+export type DataSourcePageData = {
+  header?: {
+    value?: {
+      logo_link?: string;
+      menu_1_title?: string;
+      menu_1_link?: string;
+      menu_2_title?: string;
+      menu_2_link?: string;
+      search_placeholder?: string;
+      follow_button_title?: string;
+      follow_button_title_color?: string;
+      follow_button_background?: string;
+    };
+    kwargs?: {
+      value?: {
+        logo?: ImageType;
+      };
+    };
+  };
+  banner?: {
+    value?: {
+      title?: string;
+      subtitle?: string;
+    };
+    kwargs?: {
+      value?: {
+        image?: ImageType;
+        mobile_image?: ImageType;
+      };
+    };
+  };
+  stories?: DataSourcePageStory[];
+  footer?: {
+    value?: {
+      title?: string;
+      description?: string;
+    };
+  };
+};

package/app-template/src/utils/__tests__/sanitize.test.ts

@@ -0,0 +1,127 @@
+import {
+  getSafeLinkProps,
+  toPlainText,
+  toSafeColor,
+  toSafeHtml
+} from '../sanitize';
+
+describe('toSafeHtml', () => {
+  it('returns an empty string for empty values', () => {
+    expect(toSafeHtml()).toBe('');
+    expect(toSafeHtml('')).toBe('');
+  });
+
+  it('keeps plain text and existing character references', () => {
+    expect(toSafeHtml('Kargo & İade garantisi ş')).toBe(
+      'Kargo & İade garantisi ş'
+    );
+    expect(toSafeHtml(`Tom & "Jerry's" <3`)).toBe(
+      'Tom &amp; &quot;Jerry&#39;s&quot; &lt;3'
+    );
+  });
+
+  it('keeps allowed tags and drops their attributes', () => {
+    expect(
+      toSafeHtml(
+        '<P style="text-align:center">Hızlı <strong>kargo</strong></P><br/><ul><li>a</li></ul><h3 class="x">Hakkımızda</h3>'
+      )
+    ).toBe(
+      '<p>Hızlı <strong>kargo</strong></p><br><ul><li>a</li></ul><h3>Hakkımızda</h3>'
+    );
+  });
+
+  it('removes other tags but keeps their text', () => {
+    expect(
+      toSafeHtml(
+        '<span style="color:red">kırmızı</span> <a href="https://x.com">Instagram</a>'
+      )
+    ).toBe('kırmızı Instagram');
+  });
+
+  it('removes scripts, styles and event handlers', () => {
+    expect(toSafeHtml('<script>alert(1)</script>ok<style>p{}</style>')).toBe(
+      'ok'
+    );
+    expect(toSafeHtml('<img src=x onerror=alert(1)>')).toBe('');
+    expect(toSafeHtml('<p onclick="alert(1)">x</p>')).toBe('<p>x</p>');
+    expect(toSafeHtml('<a href="javascript:alert(1)">x</a>')).toBe('x');
+    expect(toSafeHtml('<scr<script></script>ipt>alert(1)</script>')).toBe(
+      'alert(1)'
+    );
+  });
+
+  it('never turns malformed tags into markup', () => {
+    expect(toSafeHtml('<p/onclick=alert(1)>x')).toBe(
+      '&lt;p/onclick=alert(1)&gt;x'
+    );
+    expect(toSafeHtml('<p title="&gt;<script>">x</p>')).not.toMatch(
+      /<script|onclick|onerror/i
+    );
+  });
+
+  it('balances tags so nothing leaks out of the container', () => {
+    expect(toSafeHtml('<b>Kargo bedava')).toBe('<b>Kargo bedava</b>');
+    expect(toSafeHtml('</b>x')).toBe('x');
+    expect(toSafeHtml('<b/>x')).toBe('x');
+    expect(toSafeHtml('<b><i>x</b>y</i>')).toBe('<b><i>x</i></b>y');
+  });
+});
+
+describe('toPlainText', () => {
+  it('strips tags, decodes common entities and collapses whitespace', () => {
+    expect(
+      toPlainText(
+        '<p>Kargo &amp; İade</p>\n<script>x</script><p>Hızlı&nbsp;teslimat</p>'
+      )
+    ).toBe('Kargo & İade Hızlı teslimat');
+    expect(toPlainText()).toBe('');
+  });
+});
+
+describe('toSafeColor', () => {
+  it('accepts plain colors', () => {
+    expect(toSafeColor('#7b9d76', '#000')).toBe('#7b9d76');
+    expect(toSafeColor(' rgb(10, 20, 30) ', '#000')).toBe('rgb(10, 20, 30)');
+    expect(toSafeColor('rgba(0 0 0 / 50%)', '#000')).toBe('rgba(0 0 0 / 50%)');
+    expect(toSafeColor('white', '#000')).toBe('white');
+  });
+
+  it('falls back for anything that could add declarations', () => {
+    expect(toSafeColor('red;position:fixed;inset:0', '#000')).toBe('#000');
+    expect(toSafeColor('url(https://tracker.example/p.gif)', '#000')).toBe(
+      '#000'
+    );
+    expect(toSafeColor(undefined, '#fff')).toBe('#fff');
+  });
+});
+
+describe('getSafeLinkProps', () => {
+  const siteUrl = 'https://shop.example.com';
+
+  it('keeps site-relative paths and same-site urls', () => {
+    expect(getSafeLinkProps('/list/?seller_ids=17', siteUrl)).toEqual({
+      href: '/list/?seller_ids=17'
+    });
+    expect(getSafeLinkProps('https://shop.example.com/x/', siteUrl)).toEqual({
+      href: 'https://shop.example.com/x/'
+    });
+  });
+
+  it('opens other http(s) urls in a new tab without passing link equity', () => {
+    expect(getSafeLinkProps('https://instagram.com/ayse', siteUrl)).toEqual({
+      href: 'https://instagram.com/ayse',
+      target: '_blank',
+      rel: 'nofollow ugc noopener noreferrer'
+    });
+  });
+
+  it('drops empty, protocol-relative and non-http links', () => {
+    expect(getSafeLinkProps(undefined, siteUrl)).toBeNull();
+    expect(getSafeLinkProps('  ', siteUrl)).toBeNull();
+    expect(getSafeLinkProps('//evil.example', siteUrl)).toBeNull();
+    expect(getSafeLinkProps('/\\evil.example', siteUrl)).toBeNull();
+    expect(getSafeLinkProps('javascript:alert(1)', siteUrl)).toBeNull();
+    expect(getSafeLinkProps('data:text/html,x', siteUrl)).toBeNull();
+    expect(getSafeLinkProps('list/', siteUrl)).toBeNull();
+  });
+});