Merge pull request #2230 from iFixit/add-app-router-store-page-sections

Add app router store pages sections
iFixit · Feb 6, 2024 · dad3de2 · dad3de2
2 parents 79e75d2 + b79fdb2
commit dad3de2
Show file tree

Hide file tree

Showing 12 changed files with 133 additions and 4 deletions.
diff --git a/frontend/app/(defaultLayout)/app-router/Store/[[...slug]]/page.tsx b/frontend/app/(defaultLayout)/app-router/Store/[[...slug]]/page.tsx
@@ -1,11 +1,23 @@
+import { BannersSection } from '@components/sections/BannersSection';
+import { FeaturedProductsSection } from '@components/sections/FeaturedProductsSection';
+import { IFixitStatsSection } from '@components/sections/IFixitStatsSection';
+import { LifetimeWarrantySection } from '@components/sections/LifetimeWarrantySection';
+import { QuoteGallerySection } from '@components/sections/QuoteGallerySection';
+import { SocialGallerySection } from '@components/sections/SocialGallerySection';
+import { SplitWithImageContentSection } from '@components/sections/SplitWithImageSection';
+import { IFIXIT_ORIGIN } from '@config/env';
 import { flags } from '@config/flags';
 import { ensureIFixitSuffix } from '@helpers/metadata-helpers';
+import { joinPaths } from '@helpers/path-helpers';
+import { assertNever, invariant } from '@ifixit/helpers';
+import { BrowseSection } from '@templates/page/sections/BrowseSection';
+import { HeroSection } from '@templates/page/sections/HeroSection';
+import { PressQuotesSection } from '@templates/page/sections/PressQuotesSection';
 import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 import { findPageByPath } from './data';
-import { joinPaths } from '@helpers/path-helpers';
-import { IFIXIT_ORIGIN } from '@config/env';
-import { invariant } from '@ifixit/helpers';
+
+export const fetchCache = 'default-no-store';
 
 export interface StorePageProps {
    params: {
@@ -22,7 +34,97 @@ export default async function StorePage({ params }: StorePageProps) {
 
    return (
       <div>
-         <h1>Store Page: {page.title}</h1>
+         {page.sections.map((section) => {
+            switch (section.type) {
+               case 'Hero': {
+                  return <HeroSection key={section.id} data={section} />;
+               }
+               case 'Browse': {
+                  return <BrowseSection key={section.id} data={section} />;
+               }
+               case 'IFixitStats': {
+                  return <IFixitStatsSection key={section.id} data={section} />;
+               }
+               case 'SplitWithImage': {
+                  return (
+                     <SplitWithImageContentSection
+                        key={section.id}
+                        id={section.id}
+                        title={section.title}
+                        description={section.description}
+                        image={section.image}
+                        imagePosition={section.imagePosition}
+                        callToAction={section.callToAction}
+                     />
+                  );
+               }
+               case 'PressQuotes': {
+                  return (
+                     <PressQuotesSection
+                        key={section.id}
+                        title={section.title}
+                        description={section.description}
+                        callToAction={section.callToAction}
+                        quotes={section.quotes}
+                     />
+                  );
+               }
+               case 'FeaturedProducts': {
+                  return (
+                     <FeaturedProductsSection
+                        key={section.id}
+                        id={section.id}
+                        title={section.title}
+                        description={section.description}
+                        background={section.background}
+                        products={section.products}
+                     />
+                  );
+               }
+               case 'SocialGallery': {
+                  return (
+                     <SocialGallerySection
+                        key={section.id}
+                        title={section.title}
+                        description={section.description}
+                        posts={section.posts}
+                     />
+                  );
+               }
+               case 'LifetimeWarranty': {
+                  return (
+                     <LifetimeWarrantySection
+                        key={section.id}
+                        title={section.title}
+                        description={section.description}
+                     />
+                  );
+               }
+               case 'Banners': {
+                  return (
+                     <BannersSection
+                        key={section.id}
+                        id={section.id}
+                        banners={section.banners}
+                     />
+                  );
+               }
+               case 'QuoteGallery': {
+                  return (
+                     <QuoteGallerySection
+                        key={section.id}
+                        id={section.id}
+                        title={section.title}
+                        description={section.description}
+                        quotes={section.quotes}
+                     />
+                  );
+               }
+
+               default:
+                  return assertNever(section);
+            }
+         })}
       </div>
    );
 }

diff --git a/frontend/components/sections/BannersSection/index.tsx b/frontend/components/sections/BannersSection/index.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import type { Banner as SingleBannerSection } from '@models/components/banner';
 import { MultipleBanners } from './MultipleBanners';
 import { SingleBanner } from './SingleBanner';

diff --git a/frontend/components/sections/FeaturedProductsSection.tsx b/frontend/components/sections/FeaturedProductsSection.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Box, Flex } from '@chakra-ui/react';
 import { ProductGrid } from '@components/common/ProductGrid';
 import { ProductGridItem } from '@components/common/ProductGridItem';

diff --git a/frontend/components/sections/IFixitStatsSection.tsx b/frontend/components/sections/IFixitStatsSection.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
    Box,
    SimpleGrid,

diff --git a/frontend/components/sections/LifetimeWarrantySection.tsx b/frontend/components/sections/LifetimeWarrantySection.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { QualityGuarantee } from '@assets/svg/files';
 import { Box, Button, Flex, Heading, Icon } from '@chakra-ui/react';
 import { PrerenderedHTML } from '@components/common';

diff --git a/frontend/components/sections/QuoteGallerySection.tsx b/frontend/components/sections/QuoteGallerySection.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
    Avatar,
    Box,

diff --git a/frontend/components/sections/SocialGallerySection.tsx b/frontend/components/sections/SocialGallerySection.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { AspectRatio, Box, Flex, Grid, GridItem, Text } from '@chakra-ui/react';
 import { ResponsiveImage, Wrapper } from '@ifixit/ui';
 import type { SocialPost } from '@models/components/social-post';

diff --git a/frontend/components/sections/SplitWithImageSection.tsx b/frontend/components/sections/SplitWithImageSection.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Box, Flex, Text } from '@chakra-ui/react';
 import { LinkButton } from '@components/ui/LinkButton';
 import { SmartLink } from '@components/ui/SmartLink';

diff --git a/frontend/lib/shopify-storefront-sdk/generated/sdk.ts b/frontend/lib/shopify-storefront-sdk/generated/sdk.ts
@@ -4796,6 +4796,7 @@ export type MenuItemResource =
    | Article
    | Blog
    | Collection
+   | Metaobject
    | Page
    | Product
    | ShopPolicy;
@@ -4816,6 +4817,8 @@ export enum MenuItemType {
    Frontpage = 'FRONTPAGE',
    /** An http link. */
    Http = 'HTTP',
+   /** A metaobject page link. */
+   Metaobject = 'METAOBJECT',
    /** A page link. */
    Page = 'PAGE',
    /** A product link. */
@@ -6333,6 +6336,8 @@ export type ProductSellingPlanGroupsArgs = {
  *
  */
 export type ProductVariantBySelectedOptionsArgs = {
+   caseInsensitiveMatch?: InputMaybe<Scalars['Boolean']>;
+   ignoreUnknownOptions?: InputMaybe<Scalars['Boolean']>;
    selectedOptions: Array<SelectedOptionInput>;
 };
 
@@ -6571,6 +6576,8 @@ export type ProductVariant = HasMetafields &
       sku?: Maybe<Scalars['String']>;
       /** The in-store pickup availability of this variant by location. */
       storeAvailability: StoreAvailabilityConnection;
+      /** Whether tax is charged when the product variant is sold. */
+      taxable: Scalars['Boolean'];
       /** The product variant’s title. */
       title: Scalars['String'];
       /** The unit price value for the variant based on the variant's measurement. */

diff --git a/frontend/templates/page/sections/BrowseSection.tsx b/frontend/templates/page/sections/BrowseSection.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import {
    Box,
    Flex,

diff --git a/frontend/templates/page/sections/HeroSection.tsx b/frontend/templates/page/sections/HeroSection.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Box } from '@chakra-ui/react';
 import { SectionDescription } from '@components/sections/SectionDescription';
 import { SectionHeading } from '@components/sections/SectionHeading';

diff --git a/frontend/templates/page/sections/PressQuotesSection.tsx b/frontend/templates/page/sections/PressQuotesSection.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Box, Flex, Link } from '@chakra-ui/react';
 import { PrerenderedHTML } from '@components/common';
 import { SectionDescription } from '@components/sections/SectionDescription';