Merge branch 'main' into vulcan-tag-manager

.github/workflows/format.yml

@@ -17,7 +17,7 @@ jobs:
          - name: Install Node.js
            uses: actions/setup-node@v3
            with:
-              node-version: 16
+              node-version: 18
 
          - name: Setup and cache pnpm
            uses: ./.github/actions/pnpm-setup

.github/workflows/jest.yml

@@ -11,7 +11,7 @@ jobs:
 
          - uses: actions/setup-node@v3
            with:
-              node-version: 16
+              node-version: 18
 
          - name: Setup and cache pnpm
            uses: ./.github/actions/pnpm-setup

.github/workflows/lint.yml

@@ -17,7 +17,7 @@ jobs:
          - name: Install Node.js
            uses: actions/setup-node@v3
            with:
-              node-version: 16
+              node-version: 18
 
          - name: Setup and cache pnpm
            uses: ./.github/actions/pnpm-setup

.github/workflows/main.yml

@@ -24,7 +24,7 @@ jobs:
          - name: Install Node.js
            uses: actions/setup-node@v3
            with:
-              node-version: 16
+              node-version: 18
 
          - name: Start strapi server
            run: cd backend && docker-compose up -d

.github/workflows/nextjs_bundle_analysis.yml

@@ -22,7 +22,7 @@ jobs:
          - name: Install Node.js
            uses: actions/setup-node@v3
            with:
-              node-version: 16
+              node-version: 18
 
          - name: Setup and cache pnpm
            uses: ./.github/actions/pnpm-setup

.github/workflows/stress_test.yml

@@ -56,7 +56,7 @@ jobs:
          - name: Install Node.js
            uses: actions/setup-node@v3
            with:
-              node-version: 16
+              node-version: 18
 
          - name: Start strapi server
            run: cd backend && docker-compose up -d
@@ -104,7 +104,7 @@ jobs:
 
          - uses: actions/setup-node@v3
            with:
-              node-version: 16
+              node-version: 18
 
          - name: Setup and cache pnpm
            uses: ./.github/actions/pnpm-setup

.github/workflows/tsc.yml

@@ -12,7 +12,7 @@ jobs:
          - name: Install Node.js
            uses: actions/setup-node@v3
            with:
-              node-version: 16
+              node-version: 18
 
          - name: Setup and cache pnpm
            uses: ./.github/actions/pnpm-setup

.nvmrc

@@ -1 +1 @@
-v16.14.2
+v18.x.x

README.md

@@ -8,7 +8,7 @@ New iFixit e-commerce site.
 
 -  npm v8
 -  pnpm v8
--  node v16
+-  node v18
 -  yarn
 
 Here's one way you can get all the right versions installed and setup:

backend/Dockerfile

@@ -1,7 +1,5 @@
-FROM node:16-alpine3.14
-# Installing libvips for sharp compatibility
-RUN apk --update-cache add vips-dev \
-  && rm -rf /var/cache/apk/*
+FROM node:18-alpine3.18
+RUN apk update && apk add python3 build-base
 ARG NODE_ENV=production
 ENV NODE_ENV=${NODE_ENV}
 WORKDIR /opt/

backend/package.json

@@ -38,7 +38,7 @@
       "uuid": "1507c704-0355-4721-86c7-ef3ac13332ab"
    },
    "engines": {
-      "node": ">=12.x.x <=16.x.x",
+      "node": ">=14.x.x <=18.x.x",
       "npm": ">=6.0.0"
    },
    "license": "MIT"

backend/src/plugins/addons/package.json

@@ -26,7 +26,7 @@
       }
    ],
    "engines": {
-      "node": ">=12.x.x <=16.x.x",
+      "node": ">=14.x.x <=18.x.x",
       "npm": ">=6.0.0"
    },
    "scripts": {

frontend/.env.test

@@ -7,4 +7,5 @@ STRAPI_IMAGE_DOMAIN=ifixit-dev-strapi-uploads.s3.us-west-1.amazonaws.com
 NEXT_PUBLIC_ALGOLIA_PRODUCT_INDEX_NAME=dev_product_group_en
 NEXT_PUBLIC_DEFAULT_STORE_CODE=test
 NEXT_PUBLIC_FLAG__PRODUCT_PAGE_ENABLED=true
-NEXT_PUBLIC_MATOMO_URL=https://matomo.ubreakit.com
+NEXT_PUBLIC_MATOMO_URL=https://matomo.ubreakit.com
+NODE_OPTIONS="--dns-result-order ipv4first"

frontend/package.json

@@ -9,13 +9,13 @@
    },
    "scripts": {
       "dev": "concurrently -n \"Next,codegen\" -c \"blue,magenta\" \"pnpm run dev:next\" \"pnpm run dev:codegen\"",
-      "dev:next": "next dev",
+      "dev:next": "NODE_OPTIONS=\"--dns-result-order ipv4first\" next dev",
       "dev:codegen": "pnpm run codegen:download-strapi-schema && pnpm run codegen:watch",
-      "codegen:watch": "cross-env DOTENV_CONFIG_PATH=./.env.development graphql-codegen -r dotenv/config --config codegen/config.ts --watch",
-      "codegen:download-strapi-schema": "cross-env DOTENV_CONFIG_PATH=./.env.development graphql-codegen -r dotenv/config --config codegen/strapi-schema-config.ts",
-      "codegen:download-shopify-storefront-schema": "node ./lib/shopify-storefront-sdk/generate-schema.js",
-      "build": "next build",
-      "start": "next start",
+      "codegen:watch": "cross-env NODE_OPTIONS=\"--dns-result-order ipv4first\" DOTENV_CONFIG_PATH=./.env.development graphql-codegen -r dotenv/config --config codegen/config.ts --watch",
+      "codegen:download-strapi-schema": "cross-env NODE_OPTIONS=\"--dns-result-order ipv4first\" DOTENV_CONFIG_PATH=./.env.development graphql-codegen -r dotenv/config --config codegen/strapi-schema-config.ts",
+      "codegen:download-shopify-storefront-schema": "NODE_OPTIONS=\"--dns-result-order ipv4first\" node ./lib/shopify-storefront-sdk/generate-schema.js",
+      "build": "NODE_OPTIONS=\"--dns-result-order ipv4first\" next build",
+      "start": "NODE_OPTIONS=\"--dns-result-order ipv4first\" next start",
       "type-check": "tsc --pretty --noEmit",
       "format": "prettier --write .",
       "lint": "eslint . --ext ts --ext tsx --ext js",

frontend/sentry.client.config.ts

@@ -3,16 +3,10 @@
 // https://docs.sentry.io/platforms/javascript/guides/nextjs/
 
 import * as Sentry from '@sentry/nextjs';
-import { BrowserTracing } from '@sentry/tracing';
+import { BrowserTracing } from '@sentry/browser';
 
 const SENTRY_DSN = process.env.NEXT_PUBLIC_SENTRY_DSN;
 
-const hydrationErrors = [
-   'Hydration failed because the initial UI does not match what was rendered on the server.',
-   'Text content does not match server-rendered HTML.',
-   'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
-];
-
 Sentry.init({
    dsn: SENTRY_DSN,
    integrations: [new BrowserTracing()],
@@ -39,14 +33,4 @@ Sentry.init({
       // Only happens on Macs, mostly Chrome, but some on safari
       'CustomEvent: Non-Error promise rejection captured with keys: currentTarget, detail, isTrusted, target',
    ],
-   beforeSend: (event, hint) => {
-      const ex = hint.originalException;
-      if (ex instanceof Error) {
-         // Sample hydration errors.
-         if (hydrationErrors.some((msg) => ex.message.match(msg))) {
-            return Math.random() < 0.05 ? event : null;
-         }
-      }
-      return event;
-   },
 });

frontend/templates/troubleshooting/Resource.tsx

@@ -14,18 +14,15 @@ import {
    ThemingProps,
    useBreakpoint,
 } from '@chakra-ui/react';
-import { Guide } from './hooks/GuideModel';
 import { FaIcon } from '@ifixit/icons';
 import { faClock } from '@fortawesome/pro-solid-svg-icons';
 import Prerendered from './prerendered';
 import { DifficultyThemeLookup, GuideDifficultyNames } from './DifficultyBadge';
-import { Product } from '@models/product';
-import { useSelectedVariant } from '@templates/product/hooks/useSelectedVariant';
-import { useIsProductForSale } from '../product/hooks/useIsProductForSale';
 import { Rating } from '@components/ui';
 import { Money, formatMoney, shouldShowProductRating } from '@ifixit/helpers';
+import { SectionProduct, SectionGuide } from './hooks/useTroubleshootingProps';
 
-export function GuideResource({ guide }: { guide: Guide }) {
+export function GuideResource({ guide }: { guide: SectionGuide }) {
    return (
       <Resource
          href={guide.url}
@@ -51,31 +48,25 @@ export function GuideResource({ guide }: { guide: Guide }) {
    );
 }
 
-export function ProductResource({ product }: { product: Product }) {
-   const [selectedVariant, _setSelectedVariant] = useSelectedVariant(product);
-   const isForSale = useIsProductForSale(product);
-   const productUrl = `/products/${product.handle}`;
+export function ProductResource({ product }: { product: SectionProduct }) {
+   const { image, url, title, price } = product;
 
    return (
       <Resource
-         href={productUrl}
-         title={product.title}
-         imageUrl={
-            selectedVariant.image?.url ||
-            product.images[0]?.thumbnailUrl ||
-            product.images[0]?.url
-         }
+         href={url}
+         title={title}
+         imageUrl={image}
          spacing="4px"
-         showBuyButton={isForSale}
+         showBuyButton={true}
          openInNewTab={true}
       >
-         {isForSale && <ResourceProductRating product={product} />}
-         {isForSale && <ResourceProductPrice price={selectedVariant.price} />}
+         <ResourceProductRating product={product} />
+         <ResourceProductPrice price={price} />
       </Resource>
    );
 }
 
-function ResourceProductRating({ product }: { product: Product }) {
+function ResourceProductRating({ product }: { product: SectionProduct }) {
    if (!shouldShowProductRating(product.reviews)) {
       return null;
    }

frontend/templates/troubleshooting/hooks/useTroubleshootingProps.tsx

@@ -1,7 +1,5 @@
 import { WithProvidersProps } from '@components/common';
 import type { WithLayoutProps } from '@layouts/default/server';
-import { Product } from '@models/product';
-import { Guide } from './GuideModel';
 
 export type Section = {
    heading: string;
@@ -25,16 +23,41 @@ export type Problem = {
 };
 
 export type ApiSolutionSection = Section & {
-   guides: number[];
-   products: string[];
+   guides: SectionGuide[];
+   products: SectionProduct[];
+};
+
+export type SectionProduct = {
+   image: string;
+   thumbnailUrl: string;
+   url: string;
+   title: string;
+   price: {
+      amount: number;
+      currencyCode: string;
+   };
+   reviews: {
+      rating: number;
+      count: number;
+   };
 };
 
 export type SolutionSection = Omit<
    ApiSolutionSection,
    'guides' | 'products'
 > & {
-   guides: Guide[];
-   products: Array<Product>;
+   guides: SectionGuide[];
+   products: Array<SectionProduct>;
+};
+
+export type SectionGuide = {
+   guideid: number;
+   url: string;
+   title: string;
+   image: { thumbnail: string };
+   time_required: string;
+   difficulty: string;
+   introduction_rendered: string;
 };
 
 export type TroubleshootingApiData = {

frontend/templates/troubleshooting/prerendered.tsx

@@ -219,6 +219,28 @@ const renderStyles: SystemStyleObject = {
          clear: 'both',
       },
    },
+
+   '.fa-svg-icon': {
+      svg: {
+         width: '1em',
+         height: '1em',
+         display: 'inline-block',
+
+         path: {
+            fill: 'currentColor',
+         },
+      },
+
+      '&.xs svg': {
+         width: '0.5em',
+         height: '0.5em',
+      },
+
+      '&.sm svg': {
+         width: '0.75em',
+         height: '0.75em',
+      },
+   },
 };
 
 const Prerendered = chakra(function Prerendered({