Skip to content
This repository has been archived by the owner on Jun 2, 2022. It is now read-only.

Commit

Permalink
chore: Simplify pdp page (#126)
Browse files Browse the repository at this point in the history 
* move code to pdp

* fix canoincal tags
a
* move use product to hook's sdk
  • Loading branch information
@tlgimenes
tlgimenes authored Dec 3, 2021
1 parent 0ebc0a7 commit 5d6d481
Show file tree
Hide file tree
Showing 12 changed files with 191 additions and 490 deletions.
184 changes: 23 additions & 161 deletions @generated/graphql/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3605,57 +3605,6 @@ export type ProductGalleryQueryQuery = {
}
}

export type BrowserProductPageQueryQueryVariables = Exact<{
locator: Array<IStoreSelectedFacet> | IStoreSelectedFacet
}>

export type BrowserProductPageQueryQuery = {
product: {
slug: string
sku: string
gtin: string
name: string
description: string
id: string
seo: { title: string; description: string }
brand: { name: string }
breadcrumbList: {
itemListElement: Array<{ item: string; name: string; position: number }>
}
image: Array<{ url: string; alternateName: string }>
offers: {
lowPrice: number
highPrice: number
priceCurrency: string
offers: Array<{
price: number
priceValidUntil: string
priceCurrency: string
availability: string
itemCondition: string
listPrice: number
seller: { identifier: string }
}>
}
isVariantOf: { productGroupID: string; name: string }
}
}

export type ServerProductPageQueryQueryVariables = Exact<{
[key: string]: never
}>

export type ServerProductPageQueryQuery = {
site: {
siteMetadata: {
title: string | null
description: string | null
titleTemplate: string | null
siteUrl: string | null
} | null
} | null
}

export type HomePageQueryQueryVariables = Exact<{ [key: string]: never }>

export type HomePageQueryQuery = {
Expand Down Expand Up @@ -3701,6 +3650,29 @@ export type CollectionPageQueryQuery = {
} | null
}

export type BrowserProductQueryQueryVariables = Exact<{
locator: Array<IStoreSelectedFacet> | IStoreSelectedFacet
}>

export type BrowserProductQueryQuery = {
product: {
sku: string
name: string
gtin: string
id: string
isVariantOf: { productGroupID: string; name: string }
image: Array<{ url: string; alternateName: string }>
brand: { name: string }
offers: {
offers: Array<{
price: number
listPrice: number
seller: { identifier: string }
}>
}
}
}

export type ProductPageQueryQueryVariables = Exact<{
id: Scalars['String']
}>
Expand Down Expand Up @@ -3805,113 +3777,3 @@ export type ProductsQueryQuery = {
}
}
}

export type ProductSeoFragment_SiteFragment = {
siteMetadata: {
title: string | null
description: string | null
titleTemplate: string | null
siteUrl: string | null
} | null
}

export type ProductSeoFragment_ProductFragment = {
slug: string
sku: string
gtin: string
name: string
description: string
seo: { title: string; description: string }
brand: { name: string }
breadcrumbList: {
itemListElement: Array<{ item: string; name: string; position: number }>
}
image: Array<{ url: string; alternateName: string }>
offers: {
lowPrice: number
highPrice: number
priceCurrency: string
offers: Array<{
price: number
priceValidUntil: string
priceCurrency: string
availability: string
itemCondition: string
seller: { identifier: string }
}>
}
}

export type BrowserProductQueryQueryVariables = Exact<{
locator: Array<IStoreSelectedFacet> | IStoreSelectedFacet
}>

export type BrowserProductQueryQuery = {
product: {
slug: string
sku: string
gtin: string
name: string
description: string
id: string
seo: { title: string; description: string }
brand: { name: string }
breadcrumbList: {
itemListElement: Array<{ item: string; name: string; position: number }>
}
image: Array<{ url: string; alternateName: string }>
offers: {
lowPrice: number
highPrice: number
priceCurrency: string
offers: Array<{
price: number
priceValidUntil: string
priceCurrency: string
availability: string
itemCondition: string
listPrice: number
seller: { identifier: string }
}>
}
isVariantOf: { productGroupID: string; name: string }
}
}

export type ProductViewFragment_ProductFragment = {
slug: string
sku: string
gtin: string
name: string
description: string
id: string
seo: { title: string; description: string }
brand: { name: string }
breadcrumbList: {
itemListElement: Array<{ item: string; name: string; position: number }>
}
image: Array<{ url: string; alternateName: string }>
offers: {
lowPrice: number
highPrice: number
priceCurrency: string
offers: Array<{
price: number
priceValidUntil: string
priceCurrency: string
availability: string
itemCondition: string
listPrice: number
seller: { identifier: string }
}>
}
isVariantOf: { productGroupID: string; name: string }
}

export type SearchSeoFragment_SiteFragment = {
siteMetadata: {
titleTemplate: string | null
title: string | null
description: string | null
} | null
}
6 changes: 2 additions & 4 deletions @generated/graphql/persisted.json
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
{
"NavlinksQuery": "query NavlinksQuery {\n allStoreCollection(limit: 2, filter: {type: {eq: Department}}) {\n nodes {\n slug\n seo {\n title\n }\n }\n }\n}\n",
"ProductGalleryQuery": "query ProductGalleryQuery($first: Int!, $after: String!, $sort: StoreSort!, $term: String!, $selectedFacets: [IStoreSelectedFacet!]!) {\n search(\n first: $first\n after: $after\n sort: $sort\n term: $term\n selectedFacets: $selectedFacets\n ) {\n products {\n pageInfo {\n totalCount\n }\n edges {\n node {\n id: productID\n slug\n sku\n brand {\n brandName: name\n name\n }\n name\n gtin\n isVariantOf {\n productGroupID\n name\n }\n image {\n url\n alternateName\n }\n offers {\n lowPrice\n offers {\n price\n listPrice\n quantity\n seller {\n identifier\n }\n }\n }\n }\n }\n }\n facets {\n key\n label\n type\n values {\n label\n value\n selected\n quantity\n }\n }\n }\n}\n",
"BrowserProductPageQuery": "query BrowserProductPageQuery($locator: [IStoreSelectedFacet!]!) {\n product(locator: $locator) {\n id: productID\n slug\n seo {\n title\n description\n }\n brand {\n name\n }\n sku\n gtin\n name\n description\n breadcrumbList {\n itemListElement {\n item\n name\n position\n }\n }\n image {\n url\n alternateName\n }\n offers {\n lowPrice\n highPrice\n priceCurrency\n offers {\n price\n priceValidUntil\n priceCurrency\n availability\n itemCondition\n seller {\n identifier\n }\n listPrice\n }\n }\n isVariantOf {\n productGroupID\n name\n }\n }\n}\n",
"ServerProductPageQuery": "query ServerProductPageQuery {\n site {\n siteMetadata {\n title\n description\n titleTemplate\n siteUrl\n }\n }\n}\n",
"HomePageQuery": "query HomePageQuery {\n site {\n siteMetadata {\n title\n description\n titleTemplate\n }\n }\n}\n",
"SearchPageQuery": "query SearchPageQuery {\n site {\n siteMetadata {\n titleTemplate\n title\n description\n }\n }\n}\n",
"CollectionPageQuery": "query CollectionPageQuery($id: String!) {\n site {\n siteMetadata {\n titleTemplate\n title\n description\n }\n }\n collection: storeCollection(id: {eq: $id}) {\n seo {\n title\n description\n }\n breadcrumbList {\n itemListElement {\n item\n name\n position\n }\n }\n meta {\n selectedFacets {\n key\n value\n }\n }\n }\n}\n",
"BrowserProductQuery": "query BrowserProductQuery($locator: [IStoreSelectedFacet!]!) {\n product(locator: $locator) {\n id: productID\n sku\n name\n gtin\n isVariantOf {\n productGroupID\n name\n }\n image {\n url\n alternateName\n }\n brand {\n name\n }\n offers {\n offers {\n price\n listPrice\n seller {\n identifier\n }\n }\n }\n }\n}\n",
"ProductPageQuery": "query ProductPageQuery($id: String!) {\n site {\n siteMetadata {\n title\n description\n titleTemplate\n siteUrl\n }\n }\n product: storeProduct(id: {eq: $id}) {\n id: productID\n slug\n seo {\n title\n description\n }\n brand {\n name\n }\n sku\n gtin\n name\n description\n breadcrumbList {\n itemListElement {\n item\n name\n position\n }\n }\n image {\n url\n alternateName\n }\n offers {\n lowPrice\n highPrice\n priceCurrency\n offers {\n price\n priceValidUntil\n priceCurrency\n availability\n itemCondition\n seller {\n identifier\n }\n listPrice\n }\n }\n isVariantOf {\n productGroupID\n name\n }\n }\n}\n",
"ValidateCartMutation": "mutation ValidateCartMutation($cart: IStoreCart!) {\n validateCart(cart: $cart) {\n order {\n orderNumber\n acceptedOffer {\n seller {\n identifier\n }\n quantity\n price\n listPrice\n itemOffered {\n sku\n name\n image {\n url\n alternateName\n }\n }\n }\n }\n messages {\n text\n status\n }\n }\n}\n",
"ProductsQuery": "query ProductsQuery($first: Int!, $after: String!, $sort: StoreSort!, $term: String!, $selectedFacets: [IStoreSelectedFacet!]!) {\n search(\n first: $first\n after: $after\n sort: $sort\n term: $term\n selectedFacets: $selectedFacets\n ) {\n products {\n pageInfo {\n totalCount\n }\n edges {\n node {\n id: productID\n slug\n sku\n brand {\n brandName: name\n name\n }\n name\n gtin\n isVariantOf {\n productGroupID\n name\n }\n image {\n url\n alternateName\n }\n offers {\n lowPrice\n offers {\n price\n listPrice\n quantity\n seller {\n identifier\n }\n }\n }\n }\n }\n }\n }\n}\n",
"BrowserProductQuery": "query BrowserProductQuery($locator: [IStoreSelectedFacet!]!) {\n product(locator: $locator) {\n id: productID\n slug\n seo {\n title\n description\n }\n brand {\n name\n }\n sku\n gtin\n name\n description\n breadcrumbList {\n itemListElement {\n item\n name\n position\n }\n }\n image {\n url\n alternateName\n }\n offers {\n lowPrice\n highPrice\n priceCurrency\n offers {\n price\n priceValidUntil\n priceCurrency\n availability\n itemCondition\n seller {\n identifier\n }\n listPrice\n }\n }\n isVariantOf {\n productGroupID\n name\n }\n }\n}\n"
"ProductsQuery": "query ProductsQuery($first: Int!, $after: String!, $sort: StoreSort!, $term: String!, $selectedFacets: [IStoreSelectedFacet!]!) {\n search(\n first: $first\n after: $after\n sort: $sort\n term: $term\n selectedFacets: $selectedFacets\n ) {\n products {\n pageInfo {\n totalCount\n }\n edges {\n node {\n id: productID\n slug\n sku\n brand {\n brandName: name\n name\n }\n name\n gtin\n isVariantOf {\n productGroupID\n name\n }\n image {\n url\n alternateName\n }\n offers {\n lowPrice\n offers {\n price\n listPrice\n quantity\n seller {\n identifier\n }\n }\n }\n }\n }\n }\n }\n}\n"
}
2 changes: 1 addition & 1 deletion gatsby-browser.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import React from 'react'
import { SessionProvider, UIProvider, CartProvider } from '@faststore/sdk'

import ErrorBoundary from './src/sdk/error/ErrorBoundary'
import Layout from './src/views/Layout'
import Layout from './src/Layout'
import TestProvider from './src/sdk/tests'
import { validateCart } from './src/sdk/cart/validate'
import AnalyticsHandler from './src/sdk/analytics'
Expand Down
2 changes: 1 addition & 1 deletion gatsby-ssr.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import React from 'react'
import { SessionProvider, UIProvider, CartProvider } from '@faststore/sdk'

import ErrorBoundary from './src/sdk/error/ErrorBoundary'
import Layout from './src/views/Layout'
import Layout from './src/Layout'
import TestProvider from './src/sdk/tests'
import { validateCart } from './src/sdk/cart/validate'
import AnalyticsHandler from './src/sdk/analytics'
Expand Down
0 src/views/Layout.tsx → src/Layout.tsx
View file
File renamed without changes.
46 changes: 29 additions & 17 deletions src/components/sections/ProductDetails/ProductDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,29 +6,39 @@ import { useBuyButton } from 'src/sdk/cart/useBuyButton'
import { useImage } from 'src/sdk/image/useImage'
import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
import type { ProductDetailsFragment_ProductFragment } from '@generated/graphql'
import { useProduct } from 'src/sdk/product/useProduct'

interface Props {
product: ProductDetailsFragment_ProductFragment
}

const styles = {
listPrice: { textDecoration: 'line-through' },
}
function ProductDetails({ product: staleProduct }: Props) {
// Stale while revalidate the product for fetching the new price etc
const { data, isValidating } = useProduct(staleProduct.id, {
product: staleProduct,
})

if (!data) {
throw new Error('NotFound')
}

function ProductDetails({ product }: Props) {
const {
id,
sku,
gtin: referenceId,
name: variantName,
brand: { name: brandName },
isVariantOf: { name, productGroupID: productId },
image: [img],
offers: {
offers: [{ price, listPrice, seller }],
product: {
id,
sku,
gtin: referenceId,
name: variantName,
brand: { name: brandName },
isVariantOf: { name, productGroupID: productId },
image: [img],
offers: {
offers: [{ price, listPrice, seller }],
},
},
} = product
} = data

const formattedPrice = useFormattedPrice(price)
const formattedListPrice = useFormattedPrice(listPrice)
const image = useImage(img.url, 'product.details')
const buyProps = useBuyButton({
id,
Expand All @@ -51,9 +61,11 @@ function ProductDetails({ product }: Props) {
<div>
<h2>{variantName}</h2>
<GatsbyImage image={image} alt={img.alternateName} loading="eager" />
<div style={styles.listPrice}>{useFormattedPrice(listPrice)}</div>
<div>{useFormattedPrice(price)}</div>
<Button {...buyProps}>Add to cart</Button>
<div className="line-through">{formattedListPrice}</div>
<div className="min-h-[2rem]">{isValidating ? '' : formattedPrice}</div>
<Button {...buyProps} disabled={isValidating}>
Add to cart
</Button>
</div>
)
}
Expand Down
60 changes: 0 additions & 60 deletions src/pages/[slug]/p.tsx
View file

This file was deleted.

Loading

0 comments on commit 5d6d481

Please sign in to comment.