From 03be51efffacba68f159241944329310ba414473 Mon Sep 17 00:00:00 2001 From: Federico Badini Date: Tue, 21 Mar 2023 11:22:47 +0100 Subject: [PATCH 1/2] feat: remove featured product list section from product list page --- .../common/InstantSearchProvider.tsx | 4 +- frontend/lib/strapi-sdk/generated/sdk.ts | 63 ----- .../operations/getProductList.graphql | 24 -- frontend/models/product-list/server.ts | 33 --- frontend/models/product-list/types.ts | 8 - .../product-list/ProductListView.tsx | 38 +-- .../sections/FeaturedProductListSection.tsx | 222 ------------------ .../templates/product-list/sections/index.ts | 1 - 8 files changed, 13 insertions(+), 380 deletions(-) delete mode 100644 frontend/templates/product-list/sections/FeaturedProductListSection.tsx diff --git a/frontend/components/common/InstantSearchProvider.tsx b/frontend/components/common/InstantSearchProvider.tsx index e1808690..41a937b4 100644 --- a/frontend/components/common/InstantSearchProvider.tsx +++ b/frontend/components/common/InstantSearchProvider.tsx @@ -64,7 +64,7 @@ export function InstantSearchProvider({ const routing: RouterProps = { stateMapping: { stateToRoute(uiState) { - const indexUiState = uiState['main-product-list-index']; + const indexUiState = uiState[indexName]; if (!indexUiState) { return {}; } @@ -117,7 +117,7 @@ export function InstantSearchProvider({ }); } return { - ['main-product-list-index']: stateObject, + [indexName]: stateObject, }; }, }, diff --git a/frontend/lib/strapi-sdk/generated/sdk.ts b/frontend/lib/strapi-sdk/generated/sdk.ts index 8f6bb347..1ddb86de 100644 --- a/frontend/lib/strapi-sdk/generated/sdk.ts +++ b/frontend/lib/strapi-sdk/generated/sdk.ts @@ -270,12 +270,6 @@ export type ComponentProductListBanner = { url: Scalars['String']; }; -export type ComponentProductListFeaturedProductList = { - __typename?: 'ComponentProductListFeaturedProductList'; - id: Scalars['ID']; - productList?: Maybe; -}; - export type ComponentProductListLinkedProductListSet = { __typename?: 'ComponentProductListLinkedProductListSet'; id: Scalars['ID']; @@ -567,7 +561,6 @@ export type GenericMorph = | ComponentPageStats | ComponentProductCrossSell | ComponentProductListBanner - | ComponentProductListFeaturedProductList | ComponentProductListLinkedProductListSet | ComponentProductListRelatedPosts | ComponentProductProduct @@ -1363,7 +1356,6 @@ export type ProductListRelationResponseCollection = { export type ProductListSectionsDynamicZone = | ComponentProductListBanner - | ComponentProductListFeaturedProductList | ComponentProductListLinkedProductListSet | ComponentProductListRelatedPosts | Error; @@ -3471,37 +3463,6 @@ export type GetProductListQuery = { callToActionLabel: string; url: string; } - | { - __typename: 'ComponentProductListFeaturedProductList'; - id: string; - productList?: { - __typename?: 'ProductListEntityResponse'; - data?: { - __typename?: 'ProductListEntity'; - attributes?: { - __typename?: 'ProductList'; - handle: string; - type?: Enum_Productlist_Type | null; - title: string; - deviceTitle?: string | null; - description: string; - filters?: string | null; - image?: { - __typename?: 'UploadFileEntityResponse'; - data?: { - __typename?: 'UploadFileEntity'; - attributes?: { - __typename?: 'UploadFile'; - alternativeText?: string | null; - url: string; - formats?: any | null; - } | null; - } | null; - } | null; - } | null; - } | null; - } | null; - } | { __typename: 'ComponentProductListLinkedProductListSet'; id: string; @@ -4349,30 +4310,6 @@ export const GetProductListDocument = ` id tags } - ... on ComponentProductListFeaturedProductList { - id - productList { - data { - attributes { - handle - type - title - deviceTitle - description - filters - image { - data { - attributes { - alternativeText - url - formats - } - } - } - } - } - } - } ... on ComponentProductListLinkedProductListSet { id title diff --git a/frontend/lib/strapi-sdk/operations/getProductList.graphql b/frontend/lib/strapi-sdk/operations/getProductList.graphql index 3bc1a41c..de4d51b4 100644 --- a/frontend/lib/strapi-sdk/operations/getProductList.graphql +++ b/frontend/lib/strapi-sdk/operations/getProductList.graphql @@ -144,30 +144,6 @@ query getProductList($filters: ProductListFiltersInput) { id tags } - ... on ComponentProductListFeaturedProductList { - id - productList { - data { - attributes { - handle - type - title - deviceTitle - description - filters - image { - data { - attributes { - alternativeText - url - formats - } - } - } - } - } - } - } ... on ComponentProductListLinkedProductListSet { id title diff --git a/frontend/models/product-list/server.ts b/frontend/models/product-list/server.ts index e4ce7e34..9b2ebc21 100644 --- a/frontend/models/product-list/server.ts +++ b/frontend/models/product-list/server.ts @@ -393,39 +393,6 @@ function createProductListSection( tags: section.tags || null, }; } - case 'ComponentProductListFeaturedProductList': { - const productList = section.productList?.data?.attributes; - if (productList == null) { - return null; - } - const image = productList.image?.data?.attributes; - - const algoliaApiKey = createPublicAlgoliaKey( - ALGOLIA_APP_ID, - ALGOLIA_API_KEY - ); - - return { - type: ProductListSectionType.FeaturedProductList, - id: section.id, - productList: { - handle: productList.handle, - title: productList.title, - type: getProductListType(productList.type), - deviceTitle: productList.deviceTitle ?? null, - description: productList.description, - image: - image == null - ? null - : getImageFromStrapiImage(image, 'thumbnail'), - filters: productList.filters ?? null, - algolia: { - indexName: ALGOLIA_PRODUCT_INDEX_NAME, - apiKey: algoliaApiKey, - }, - }, - }; - } case 'ComponentProductListLinkedProductListSet': { return { type: ProductListSectionType.ProductListSet, diff --git a/frontend/models/product-list/types.ts b/frontend/models/product-list/types.ts index f555e3cd..b3860e37 100644 --- a/frontend/models/product-list/types.ts +++ b/frontend/models/product-list/types.ts @@ -132,14 +132,12 @@ export interface ProductListImage { export enum ProductListSectionType { Banner = 'banner', RelatedPosts = 'related-posts', - FeaturedProductList = 'featured-product-list', ProductListSet = 'product-list-set', } export type ProductListSection = | ProductListBannerSection | ProductListRelatedPostsSection - | ProductListFeaturedProductListSection | ProductListProductListSetSection; export interface ProductListBannerSection { @@ -157,12 +155,6 @@ export interface ProductListRelatedPostsSection { tags: string | null; } -export interface ProductListFeaturedProductListSection { - type: ProductListSectionType.FeaturedProductList; - id: string; - productList: FeaturedProductList; -} - export interface FeaturedProductList { algolia: { apiKey: string; diff --git a/frontend/templates/product-list/ProductListView.tsx b/frontend/templates/product-list/ProductListView.tsx index abb00358..feb708df 100644 --- a/frontend/templates/product-list/ProductListView.tsx +++ b/frontend/templates/product-list/ProductListView.tsx @@ -7,7 +7,6 @@ import { MetaTags } from './MetaTags'; import { SecondaryNavigation } from './SecondaryNavigation'; import { BannerSection, - FeaturedProductListSection, FilterableProductsSection, HeroSection, ProductListChildrenSection, @@ -32,19 +31,17 @@ export function ProductListView({ - - - - {productList.heroImage ? ( - - ) : ( - - )} - {productList.children.length > 0 && ( - - )} - - + + + {productList.heroImage ? ( + + ) : ( + + )} + {productList.children.length > 0 && ( + + )} + {productList.sections.map((section, index) => { switch (section.type) { case ProductListSectionType.Banner: { @@ -65,19 +62,6 @@ export function ProductListView({ ); return ; } - case ProductListSectionType.FeaturedProductList: { - const { productList } = section; - if (productList) { - return ( - - ); - } - return null; - } case ProductListSectionType.ProductListSet: { const { title, productLists } = section; if (productLists.length > 0) { diff --git a/frontend/templates/product-list/sections/FeaturedProductListSection.tsx b/frontend/templates/product-list/sections/FeaturedProductListSection.tsx deleted file mode 100644 index 3e2323cc..00000000 --- a/frontend/templates/product-list/sections/FeaturedProductListSection.tsx +++ /dev/null @@ -1,222 +0,0 @@ -import { - Box, - Button, - Flex, - Heading, - HStack, - LinkBox, - LinkOverlay, - SimpleGrid, - Text, - VStack, -} from '@chakra-ui/react'; -import { - ProductCard, - ProductCardBadgeList, - ProductCardBody, - ProductCardDiscountBadge, - ProductCardImage, - ProductCardRating, - ProductCardSoldOutBadge, - ProductCardTitle, -} from '@components/common'; -import { Card } from '@components/ui'; -import { computeProductListAlgoliaFilterPreset } from '@helpers/product-list-helpers'; -import { useAppContext } from '@ifixit/app'; -import { FeaturedProductList, ProductSearchHit } from '@models/product-list'; -import { ResponsiveImage, ProductVariantPrice, useUserPrice } from '@ifixit/ui'; -import NextLink from 'next/link'; -import { Configure, Index, useHits } from 'react-instantsearch-hooks-web'; -import { productListPath } from '@helpers/path-helpers'; -import { useProductSearchHitPricing } from './FilterableProductsSection/useProductSearchHitPricing'; - -export interface FeaturedProductListSectionProps { - productList: FeaturedProductList; - index: number; -} - -export function FeaturedProductListSection({ - productList, - index, -}: FeaturedProductListSectionProps) { - const filters = computeProductListAlgoliaFilterPreset(productList); - return ( - - - - {productList.image && ( - - )} - - - - - {productList.title} - - - {productList.description} - - - - - - - - - - - - - - - - ); -} - -function ProductGrid() { - const { hits } = useHits(); - return ( - - {hits.map((hit) => { - return ; - })} - - ); -} - -interface ProductListItemProps { - product: ProductSearchHit; -} - -function ProductListItem({ product }: ProductListItemProps) { - const appContext = useAppContext(); - const { price, compareAtPrice, isDiscounted, percentage, proPricesByTier } = - useProductSearchHitPricing(product); - const isSoldOut = product.quantity_available <= 0; - - const { isProPrice } = useUserPrice({ - price, - compareAtPrice, - proPricesByTier, - }); - - return ( - - - - - {isSoldOut ? ( - - ) : ( - isDiscounted && ( - - ) - )} - - - - - {product.title} - - - - - - - - - - ); -} diff --git a/frontend/templates/product-list/sections/index.ts b/frontend/templates/product-list/sections/index.ts index 18612cda..e6753be0 100644 --- a/frontend/templates/product-list/sections/index.ts +++ b/frontend/templates/product-list/sections/index.ts @@ -3,5 +3,4 @@ export * from './RelatedPostsSection'; export * from './FilterableProductsSection'; export * from './HeroSection'; export * from './ProductListChildrenSection'; -export * from './FeaturedProductListSection'; export * from './ProductListSetSection'; From ef2ba3da8732cdc573e556a27c0e005108305738 Mon Sep 17 00:00:00 2001 From: Federico Badini Date: Tue, 21 Mar 2023 17:21:28 +0100 Subject: [PATCH 2/2] fix: cleaning --- frontend/lib/strapi-sdk/generated/sdk.ts | 9 +++++++++ frontend/models/product-list/index.ts | 1 - frontend/models/product-list/types.ts | 14 -------------- .../templates/product-list/ProductListView.tsx | 2 +- 4 files changed, 10 insertions(+), 16 deletions(-) diff --git a/frontend/lib/strapi-sdk/generated/sdk.ts b/frontend/lib/strapi-sdk/generated/sdk.ts index 1ddb86de..29ab629e 100644 --- a/frontend/lib/strapi-sdk/generated/sdk.ts +++ b/frontend/lib/strapi-sdk/generated/sdk.ts @@ -270,6 +270,12 @@ export type ComponentProductListBanner = { url: Scalars['String']; }; +export type ComponentProductListFeaturedProductList = { + __typename?: 'ComponentProductListFeaturedProductList'; + id: Scalars['ID']; + productList?: Maybe; +}; + export type ComponentProductListLinkedProductListSet = { __typename?: 'ComponentProductListLinkedProductListSet'; id: Scalars['ID']; @@ -561,6 +567,7 @@ export type GenericMorph = | ComponentPageStats | ComponentProductCrossSell | ComponentProductListBanner + | ComponentProductListFeaturedProductList | ComponentProductListLinkedProductListSet | ComponentProductListRelatedPosts | ComponentProductProduct @@ -1356,6 +1363,7 @@ export type ProductListRelationResponseCollection = { export type ProductListSectionsDynamicZone = | ComponentProductListBanner + | ComponentProductListFeaturedProductList | ComponentProductListLinkedProductListSet | ComponentProductListRelatedPosts | Error; @@ -3463,6 +3471,7 @@ export type GetProductListQuery = { callToActionLabel: string; url: string; } + | { __typename: 'ComponentProductListFeaturedProductList' } | { __typename: 'ComponentProductListLinkedProductListSet'; id: string; diff --git a/frontend/models/product-list/index.ts b/frontend/models/product-list/index.ts index 54ae28b6..68cd2b84 100644 --- a/frontend/models/product-list/index.ts +++ b/frontend/models/product-list/index.ts @@ -5,7 +5,6 @@ export { FacetWidgetType, } from './types'; export type { - FeaturedProductList, iFixitPage, ProductList, ProductListPreview, diff --git a/frontend/models/product-list/types.ts b/frontend/models/product-list/types.ts index b3860e37..10c77607 100644 --- a/frontend/models/product-list/types.ts +++ b/frontend/models/product-list/types.ts @@ -155,20 +155,6 @@ export interface ProductListRelatedPostsSection { tags: string | null; } -export interface FeaturedProductList { - algolia: { - apiKey: string; - indexName: string; - }; - handle: string; - title: string; - type: ProductListType; - deviceTitle: string | null; - description: string; - image: ProductListImage | null; - filters: string | null; -} - export interface ProductListProductListSetSection { type: ProductListSectionType.ProductListSet; id: string; diff --git a/frontend/templates/product-list/ProductListView.tsx b/frontend/templates/product-list/ProductListView.tsx index feb708df..370356f7 100644 --- a/frontend/templates/product-list/ProductListView.tsx +++ b/frontend/templates/product-list/ProductListView.tsx @@ -2,7 +2,7 @@ import { VStack } from '@chakra-ui/react'; import { computeProductListAlgoliaFilterPreset } from '@helpers/product-list-helpers'; import { Wrapper } from '@ifixit/ui'; import { ProductList, ProductListSectionType } from '@models/product-list'; -import { Configure, Index } from 'react-instantsearch-hooks-web'; +import { Configure } from 'react-instantsearch-hooks-web'; import { MetaTags } from './MetaTags'; import { SecondaryNavigation } from './SecondaryNavigation'; import {