Merge branch 'main'

2025-05-19 16:07:01 +00:00 · 2023-08-07 12:04:40 +02:00 · 2023-08-07 12:04:40 +02:00 · 50d7276469
commit 50d7276469
parent d9429da73c faa7491a55
12 changed files with 95 additions and 67 deletions
--- a/app/error.tsx
+++ b/app/error.tsx
@ -2,9 +2,18 @@

 export default function Error({ reset }: { reset: () => void }) {
  return (
-    <div>
-      <h2>Something went wrong.</h2>
-      <button onClick={() => reset()}>Try again</button>
+    <div className="mx-auto my-4 flex max-w-xl flex-col rounded-lg border border-neutral-200 bg-white p-8 dark:border-neutral-800 dark:bg-black md:p-12">
+      <h2 className="text-xl font-bold">Oh no!</h2>
+      <p className="my-2">
+        There was an issue with our storefront. This could be a temporary issue, please try your
+        action again.
+      </p>
+      <button
+        className="mx-auto mt-4 flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white hover:opacity-90"
+        onClick={() => reset()}
+      >
+        Try Again
+      </button>
    </div>
  );
 }
--- a/app/layout.tsx
+++ b/app/layout.tsx
@ -4,10 +4,14 @@ import { ReactNode, Suspense } from 'react';
 import './globals.css';

 const { TWITTER_CREATOR, TWITTER_SITE, SITE_NAME } = process.env;
+const baseUrl = process.env.NEXT_PUBLIC_VERCEL_URL
+  ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
+  : 'http://localhost:3000';

 export const metadata = {
+  metadataBase: new URL(baseUrl),
  title: {
-    default: SITE_NAME || 'Shopware Composable Frontends',
+    default: SITE_NAME!,
    template: `%s | ${SITE_NAME}`
  },
  robots: {
--- a/components/cart/actions.ts
+++ b/components/cart/actions.ts
@ -2,7 +2,7 @@

 import { ApiClientError } from '@shopware/api-client';
 import { getApiClient } from 'lib/shopware/api';
-import { ExtendedCart, ExtendedLineItem } from 'lib/shopware/api-extended';
+import { ExtendedCart, ExtendedLineItem, messageKeys } from 'lib/shopware/api-extended';
 import { cookies } from 'next/headers';

 export const fetchCart = async function (cartId?: string): Promise<ExtendedCart | undefined> {
@ -38,7 +38,7 @@ export const addItem = async (variantId: string | undefined): Promise<Error | un
  }

  if (!variantId) {
-    return new Error('Missing variantId');
+    return { message: 'Missing product variant ID' } as Error;
  }

  try {
@ -82,8 +82,8 @@ function alertErrorMessages(response: ExtendedCart): string {
  let errorMessages: string = '';
  if (response.errors) {
    Object.values(response.errors).forEach(function (value) {
-      // @ts-ignore
-      if (value.messageKey && value.message && value.messageKey === 'product-out-of-stock') {
+      const messageKey: messageKeys = value.messageKey as messageKeys;
+      if (value.message && messageKey) {
        errorMessages += value.message;
      }
    });
@ -96,7 +96,7 @@ export const removeItem = async (lineId: string): Promise<Error | undefined> =>
  const cartId = cookies().get('sw-context-token')?.value;

  if (!cartId) {
-    return new Error('Missing cartId');
+    return { message: 'Missing cart ID' } as Error;
  }

  try {
@ -126,7 +126,7 @@ export const updateItemQuantity = async ({
  const cartId = cookies().get('sw-context-token')?.value;

  if (!cartId) {
-    return new Error('Missing cartId');
+    return { message: 'Missing cart ID' } as Error;
  }

  try {
--- a/components/cart/add-to-cart.tsx
+++ b/components/cart/add-to-cart.tsx
@ -46,8 +46,10 @@ export function AddToCart({
          const error = await addItem(selectedVariantId);

          if (error) {
-            alert(error.message);
-            return;
+            alert(error.message); // this is not a real error, this can be also out of stock message for the user
+
+            // Example to trigger the error boundary in the root error.js
+            // throw new Error(error.toString());
          }

          router.refresh();
--- a/components/cart/delete-item-button.tsx
+++ b/components/cart/delete-item-button.tsx
@ -19,8 +19,8 @@ export default function DeleteItemButton({ item }: { item: CartItem }) {
          const error = await removeItem(item.id);

          if (error) {
-            alert(error);
-            return;
+            // Trigger the error boundary in the root error.js
+            throw new Error(error.toString());
          }

          router.refresh();
--- a/components/cart/edit-item-quantity-button.tsx
+++ b/components/cart/edit-item-quantity-button.tsx
@ -32,8 +32,8 @@ export default function EditItemQuantityButton({
                });

          if (error) {
-            alert(error);
-            return;
+            // Trigger the error boundary in the root error.js
+            throw new Error(error.toString());
          }

          router.refresh();
--- a/components/label.tsx
+++ b/components/label.tsx
@ -18,8 +18,8 @@ const Label = ({
        'lg:px-20 lg:pb-[35%]': position === 'center'
      })}
    >
-      <div className="flex items-center rounded-full border bg-white/70 p-1 text-[10px] font-semibold text-black backdrop-blur-md @[275px]/label:text-xs dark:border-neutral-800 dark:bg-black/70 dark:text-white">
-        <h3 className="mr-4 inline pl-2 leading-none tracking-tight">{title}</h3>
+      <div className="flex items-center rounded-full border bg-white/70 p-1 text-xs font-semibold text-black backdrop-blur-md dark:border-neutral-800 dark:bg-black/70 dark:text-white">
+        <h3 className="mr-4 line-clamp-2 flex-grow pl-2 leading-none tracking-tight">{title}</h3>
        <Price
          className="flex-none rounded-full bg-blue-600 p-2 text-white"
          amount={amount}
--- a/components/layout/footer.tsx
+++ b/components/layout/footer.tsx
@ -1,9 +1,9 @@
 import Link from 'next/link';
 import Image from 'next/image';

-import GitHubIcon from 'components/icons/github';
 import FooterMenu from 'components/layout/footer-menu';
 import LogoSquare from 'components/logo-square';
+import GitHubIcon from 'components/icons/github';
 import { getMenu } from 'lib/shopware';
 import { Suspense } from 'react';

--- a/components/layout/search/filter/item.tsx
+++ b/components/layout/search/filter/item.tsx
@ -57,7 +57,7 @@ function SortFilterItem({ item }: { item: SortFilterItem }) {
      <DynamicTag
        prefetch={!active ? false : undefined}
        href={href}
-        className={clsx('w-full', {
+        className={clsx('w-full hover:underline hover:underline-offset-4', {
          'underline underline-offset-4': active
        })}
      >
--- a/lib/shopware/api-extended.ts
+++ b/lib/shopware/api-extended.ts
@ -1,6 +1,7 @@
 import { operations, operationPaths, components } from '@shopware/api-client/api-types';

 type schemas = components['schemas'];
+
 type operationsWithoutOriginal = Omit<
  operations,
  | 'readCategory'
@ -14,6 +15,7 @@ type operationsWithoutOriginal = Omit<
  | 'readCart'
  | 'deleteLineItem'
 >;
+
 export type extendedPaths =
  | 'readCategory post /category/{navigationId}?slots'
  | 'readCategoryList post /category'
@ -26,6 +28,7 @@ export type extendedPaths =
  | 'readCart get /checkout/cart?name'
  | 'deleteLineItem delete /checkout/cart/line-item?id[]={ids}'
  | operationPaths;
+
 export type extendedOperations = operationsWithoutOriginal & {
  readCategory: extendedReadCategory;
  readCategoryList: extendedReadCategoryList;
@ -39,8 +42,21 @@ export type extendedOperations = operationsWithoutOriginal & {
  deleteLineItem: extendedDeleteLineItem;
 };

-export type ExtendedCart = Omit<schemas['Cart'], 'lineItems'> & {
+export type messageKeys =
+  | 'purchase-steps-quantity'
+  | 'product-stock-reached'
+  | 'product-out-of-stock'
+  | 'product-not-found'
+  | 'min-order-quantity';
+
+export type ExtendedCart = Omit<schemas['Cart'], 'lineItems' | 'errors'> & {
  lineItems?: ExtendedLineItem[];
+  errors?: {
+    key?: string;
+    level?: string;
+    message?: string;
+    messageKey?: string;
+  }[];
 };

 export type ExtendedLineItem = schemas['LineItem'] & {
--- a/package.json
+++ b/package.json
@ -23,7 +23,7 @@
    "@heroicons/react": "^2.0.18",
    "@shopware/api-client": "0.0.0-canary-20230801081457",
    "clsx": "^2.0.0",
-    "next": "13.4.12",
+    "next": "13.4.13-canary.15",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-paginate": "^8.2.0"
@ -43,7 +43,7 @@
    "husky": "^8.0.3",
    "lint-staged": "^13.2.3",
    "postcss": "^8.4.27",
-    "prettier": "^3.0.0",
+    "prettier": "3.0.1",
    "prettier-plugin-tailwindcss": "^0.4.1",
    "tailwindcss": "^3.3.3",
    "typescript": "5.1.6"
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -18,8 +18,8 @@ dependencies:
    specifier: ^2.0.0
    version: 2.0.0
  next:
-    specifier: 13.4.12
-    version: 13.4.12(react-dom@18.2.0)(react@18.2.0)
+    specifier: 13.4.13-canary.15
+    version: 13.4.13-canary.15(react-dom@18.2.0)(react@18.2.0)
  react:
    specifier: 18.2.0
    version: 18.2.0
@ -74,11 +74,11 @@ devDependencies:
    specifier: ^8.4.27
    version: 8.4.27
  prettier:
-    specifier: ^3.0.0
-    version: 3.0.0
+    specifier: 3.0.1
+    version: 3.0.1
  prettier-plugin-tailwindcss:
    specifier: ^0.4.1
-    version: 0.4.1(prettier@3.0.0)
+    version: 0.4.1(prettier@3.0.1)
  tailwindcss:
    specifier: ^3.3.3
    version: 3.3.3
@ -237,8 +237,8 @@ packages:
      '@jridgewell/sourcemap-codec': 1.4.14
    dev: true

-  /@next/env@13.4.12:
-    resolution: {integrity: sha512-RmHanbV21saP/6OEPBJ7yJMuys68cIf8OBBWd7+uj40LdpmswVAwe1uzeuFyUsd6SfeITWT3XnQfn6wULeKwDQ==}
+  /@next/env@13.4.13-canary.15:
+    resolution: {integrity: sha512-AljMmO5a2uB0ZTDcBVhcfkE7WtdQDfnPg2zz/e6jKjVMRFPSvxaoRoSGUwONIhk9CAPbX9px7bZYom2wbhrTkw==}
    dev: false

  /@next/eslint-plugin-next@13.4.12:
@ -247,8 +247,8 @@ packages:
      glob: 7.1.7
    dev: true

-  /@next/swc-darwin-arm64@13.4.12:
-    resolution: {integrity: sha512-deUrbCXTMZ6ZhbOoloqecnUeNpUOupi8SE2tx4jPfNS9uyUR9zK4iXBvH65opVcA/9F5I/p8vDXSYbUlbmBjZg==}
+  /@next/swc-darwin-arm64@13.4.13-canary.15:
+    resolution: {integrity: sha512-ymE/tPjf5DXIqWxEefkqGX094ZDpKw/0sKb7xmzF0m8Kolac1eqA6ZnCsb1TKXYVQyrGUx/Z0xmxCK4cm2dEdw==}
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [darwin]
@ -256,8 +256,8 @@ packages:
    dev: false
    optional: true

-  /@next/swc-darwin-x64@13.4.12:
-    resolution: {integrity: sha512-WRvH7RxgRHlC1yb5oG0ZLx8F7uci9AivM5/HGGv9ZyG2Als8Ij64GC3d+mQ5sJhWjusyU6T6V1WKTUoTmOB0zQ==}
+  /@next/swc-darwin-x64@13.4.13-canary.15:
+    resolution: {integrity: sha512-B9fCPRjE1t5r1bmivq5fqHvU8mLNX7hkS2zj9arVrZEC7HdOugbSOpmQb5+yr5ZmNKMItQbPDJIATY+ZAiUtww==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [darwin]
@ -265,8 +265,8 @@ packages:
    dev: false
    optional: true

-  /@next/swc-linux-arm64-gnu@13.4.12:
-    resolution: {integrity: sha512-YEKracAWuxp54tKiAvvq73PUs9lok57cc8meYRibTWe/VdPB2vLgkTVWFcw31YDuRXdEhdX0fWS6Q+ESBhnEig==}
+  /@next/swc-linux-arm64-gnu@13.4.13-canary.15:
+    resolution: {integrity: sha512-K30IPFxZPtZLs1gqir95oNdCNgmu0awbC7MMLqOu9+wmW+LYjA6M3ltRe2Duy9nZ7JQob1oRl/s7MMbtCuzVAA==}
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [linux]
@ -274,8 +274,8 @@ packages:
    dev: false
    optional: true

-  /@next/swc-linux-arm64-musl@13.4.12:
-    resolution: {integrity: sha512-LhJR7/RAjdHJ2Isl2pgc/JaoxNk0KtBgkVpiDJPVExVWA1c6gzY57+3zWuxuyWzTG+fhLZo2Y80pLXgIJv7g3g==}
+  /@next/swc-linux-arm64-musl@13.4.13-canary.15:
+    resolution: {integrity: sha512-ClJvWIhvCLXM3iSMet9bqKxyxifN7DGo8+wiV8gwIU+OMWHGNgGtmZ3xXae3R91w8DOLrsREyBN4uGLlgpwRXg==}
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [linux]
@ -283,8 +283,8 @@ packages:
    dev: false
    optional: true

-  /@next/swc-linux-x64-gnu@13.4.12:
-    resolution: {integrity: sha512-1DWLL/B9nBNiQRng+1aqs3OaZcxC16Nf+mOnpcrZZSdyKHek3WQh6j/fkbukObgNGwmCoVevLUa/p3UFTTqgqg==}
+  /@next/swc-linux-x64-gnu@13.4.13-canary.15:
+    resolution: {integrity: sha512-/B0xaPcdx2HWDC9Bxks3dLIUyu9Falmd7ENRanYizfdihgM+kV2zIQe/5h5zaESKMEltLt2ELPOPCaFU5gOnYA==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [linux]
@ -292,8 +292,8 @@ packages:
    dev: false
    optional: true

-  /@next/swc-linux-x64-musl@13.4.12:
-    resolution: {integrity: sha512-kEAJmgYFhp0VL+eRWmUkVxLVunn7oL9Mdue/FS8yzRBVj7Z0AnIrHpTIeIUl1bbdQq1VaoOztnKicAjfkLTRCQ==}
+  /@next/swc-linux-x64-musl@13.4.13-canary.15:
+    resolution: {integrity: sha512-YZZlKne+5iwsPe9yN8QP5sfyDN7ybpWTuYukfv6sKL68STuAVqqp4QX2g7a3Fw+LMJiDwyCFJaUDgO9KSLEqDw==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [linux]
@ -301,8 +301,8 @@ packages:
    dev: false
    optional: true

-  /@next/swc-win32-arm64-msvc@13.4.12:
-    resolution: {integrity: sha512-GMLuL/loR6yIIRTnPRY6UGbLL9MBdw2anxkOnANxvLvsml4F0HNIgvnU3Ej4BjbqMTNjD4hcPFdlEow4XHPdZA==}
+  /@next/swc-win32-arm64-msvc@13.4.13-canary.15:
+    resolution: {integrity: sha512-nOi9w+E+ajqJuQhcB260AMJERJPYS1K5pL+5Rymyt9VWCZEJZiHTRuaf8y/H7sObZcQKwRVa7C/EWyZjj658XA==}
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [win32]
@ -310,8 +310,8 @@ packages:
    dev: false
    optional: true

-  /@next/swc-win32-ia32-msvc@13.4.12:
-    resolution: {integrity: sha512-PhgNqN2Vnkm7XaMdRmmX0ZSwZXQAtamBVSa9A/V1dfKQCV1rjIZeiy/dbBnVYGdj63ANfsOR/30XpxP71W0eww==}
+  /@next/swc-win32-ia32-msvc@13.4.13-canary.15:
+    resolution: {integrity: sha512-EqV5Bt7TmdFWa00KkoEeb5K4uRFrV1BAiwqylsk+d+2U1N2UIad/dTOyTzobjDcZ9uii1EaCVMiTuMfcsGIahw==}
    engines: {node: '>= 10'}
    cpu: [ia32]
    os: [win32]
@ -319,8 +319,8 @@ packages:
    dev: false
    optional: true

-  /@next/swc-win32-x64-msvc@13.4.12:
-    resolution: {integrity: sha512-Z+56e/Ljt0bUs+T+jPjhFyxYBcdY2RIq9ELFU+qAMQMteHo7ymbV7CKmlcX59RI9C4YzN8PgMgLyAoi916b5HA==}
+  /@next/swc-win32-x64-msvc@13.4.13-canary.15:
+    resolution: {integrity: sha512-hZcZ0vS1eevRTr1JUyDfTYXF36DBEowNZWyzNW8ZrlGMZyQloE9yf/jHoLtutxr2jV6GoHWGGqVSw4exOyjjKw==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [win32]
@ -2268,25 +2268,22 @@ packages:
    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
    dev: true

-  /next@13.4.12(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-eHfnru9x6NRmTMcjQp6Nz0J4XH9OubmzOa7CkWL+AUrUxpibub3vWwttjduu9No16dug1kq04hiUUpo7J3m3Xw==}
+  /next@13.4.13-canary.15(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-dSOzenhqdjH6fNbSKYZ4PkqmKLOviFSVUd75Csz+zZPoTWmAKR+9waUAttOyRnUgYd/qutt8KXGH+DiU0nmhVA==}
    engines: {node: '>=16.8.0'}
    hasBin: true
    peerDependencies:
      '@opentelemetry/api': ^1.1.0
-      fibers: '>= 3.1.0'
      react: ^18.2.0
      react-dom: ^18.2.0
      sass: ^1.3.0
    peerDependenciesMeta:
      '@opentelemetry/api':
        optional: true
-      fibers:
-        optional: true
      sass:
        optional: true
    dependencies:
-      '@next/env': 13.4.12
+      '@next/env': 13.4.13-canary.15
      '@swc/helpers': 0.5.1
      busboy: 1.6.0
      caniuse-lite: 1.0.30001519
@ -2297,15 +2294,15 @@ packages:
      watchpack: 2.4.0
      zod: 3.21.4
    optionalDependencies:
-      '@next/swc-darwin-arm64': 13.4.12
-      '@next/swc-darwin-x64': 13.4.12
-      '@next/swc-linux-arm64-gnu': 13.4.12
-      '@next/swc-linux-arm64-musl': 13.4.12
-      '@next/swc-linux-x64-gnu': 13.4.12
-      '@next/swc-linux-x64-musl': 13.4.12
-      '@next/swc-win32-arm64-msvc': 13.4.12
-      '@next/swc-win32-ia32-msvc': 13.4.12
-      '@next/swc-win32-x64-msvc': 13.4.12
+      '@next/swc-darwin-arm64': 13.4.13-canary.15
+      '@next/swc-darwin-x64': 13.4.13-canary.15
+      '@next/swc-linux-arm64-gnu': 13.4.13-canary.15
+      '@next/swc-linux-arm64-musl': 13.4.13-canary.15
+      '@next/swc-linux-x64-gnu': 13.4.13-canary.15
+      '@next/swc-linux-x64-musl': 13.4.13-canary.15
+      '@next/swc-win32-arm64-msvc': 13.4.13-canary.15
+      '@next/swc-win32-ia32-msvc': 13.4.13-canary.15
+      '@next/swc-win32-x64-msvc': 13.4.13-canary.15
    transitivePeerDependencies:
      - '@babel/core'
      - babel-plugin-macros
@ -2680,7 +2677,7 @@ packages:
    engines: {node: '>= 0.8.0'}
    dev: true

-  /prettier-plugin-tailwindcss@0.4.1(prettier@3.0.0):
+  /prettier-plugin-tailwindcss@0.4.1(prettier@3.0.1):
    resolution: {integrity: sha512-hwn2EiJmv8M+AW4YDkbjJ6HlZCTzLyz1QlySn9sMuKV/Px0fjwldlB7tol8GzdgqtkdPtzT3iJ4UzdnYXP25Ag==}
    engines: {node: '>=12.17.0'}
    peerDependencies:
@ -2732,11 +2729,11 @@ packages:
      prettier-plugin-twig-melody:
        optional: true
    dependencies:
-      prettier: 3.0.0
+      prettier: 3.0.1
    dev: true

-  /prettier@3.0.0:
-    resolution: {integrity: sha512-zBf5eHpwHOGPC47h0zrPyNn+eAEIdEzfywMoYn2XPi0P44Zp0tSq64rq0xAREh4auw2cJZHo9QUob+NqCQky4g==}
+  /prettier@3.0.1:
+    resolution: {integrity: sha512-fcOWSnnpCrovBsmFZIGIy9UqK2FaI7Hqax+DIO0A9UxeVoY4iweyaFjS5TavZN97Hfehph0nhsZnjlVKzEQSrQ==}
    engines: {node: '>=14'}
    hasBin: true
    dev: true