Fix ShopPayButton flickering

buildheadless · Dec 8, 2023 · 1ae8730 · 1ae8730
1 parent 445b689
commit 1ae8730
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 25 deletions.
diff --git a/templates/hydrogen-theme/app/components/blocks/AddToCartButtonBlock.tsx b/templates/hydrogen-theme/app/components/blocks/AddToCartButtonBlock.tsx
@@ -9,9 +9,11 @@ import type {loader} from '~/routes/($locale).products.$productHandle';
 
 import {ProductForm} from '../product/ProductForm';
 
-export function AddToCartButtonBlock(
-  props: InferType<typeof ADD_TO_CART_BUTTON_BLOCK>,
-) {
+export type AddToCartButtonBlockProps = InferType<
+  typeof ADD_TO_CART_BUTTON_BLOCK
+>;
+
+export function AddToCartButtonBlock(props: AddToCartButtonBlockProps) {
   const loaderData = useLoaderData<typeof loader>();
   const variantsPromise = loaderData.variants;
 

diff --git a/templates/hydrogen-theme/app/components/blocks/PriceBlock.tsx b/templates/hydrogen-theme/app/components/blocks/PriceBlock.tsx
@@ -9,7 +9,9 @@ import type {loader} from '~/routes/($locale).products.$productHandle';
 
 import {VariantPrice} from '../product/VariantPrice';
 
-export function PriceBlock(props: InferType<typeof PRICE_BLOCK>) {
+export type PriceBlockProps = InferType<typeof PRICE_BLOCK>;
+
+export function PriceBlock(props: PriceBlockProps) {
   const loaderData = useLoaderData<typeof loader>();
   const variantsPromise = loaderData.variants;
 

diff --git a/templates/hydrogen-theme/app/components/blocks/ShopifyDescriptionBlock.tsx b/templates/hydrogen-theme/app/components/blocks/ShopifyDescriptionBlock.tsx
@@ -5,9 +5,11 @@ import {useProduct} from '@shopify/hydrogen-react';
 
 import type {SHOPIFY_DESCRIPTION_BLOCK} from '~/qroq/blocks';
 
-export function ShopifyDescriptionBlock(
-  props: InferType<typeof SHOPIFY_DESCRIPTION_BLOCK>,
-) {
+export type ShopifyDescriptionBlockProps = InferType<
+  typeof SHOPIFY_DESCRIPTION_BLOCK
+>;
+
+export function ShopifyDescriptionBlock(props: ShopifyDescriptionBlockProps) {
   const {product} = useProduct() as {product: ProductQuery['product']};
 
   return product ? (

diff --git a/templates/hydrogen-theme/app/components/blocks/ShopifyTitleBlock.tsx b/templates/hydrogen-theme/app/components/blocks/ShopifyTitleBlock.tsx
@@ -5,9 +5,9 @@ import {useProduct} from '@shopify/hydrogen-react';
 
 import type {SHOPIFY_TITLE_BLOCK} from '~/qroq/blocks';
 
-export function ShopifyTitleBlock(
-  props: InferType<typeof SHOPIFY_TITLE_BLOCK>,
-) {
+export type ShopifyTitleBlockProps = InferType<typeof SHOPIFY_TITLE_BLOCK>;
+
+export function ShopifyTitleBlock(props: ShopifyTitleBlockProps) {
   const {product} = useProduct() as {product: ProductQuery['product']};
 
   return <h1>{product?.title}</h1>;

diff --git a/templates/hydrogen-theme/app/components/product/ProductDetails.tsx b/templates/hydrogen-theme/app/components/product/ProductDetails.tsx
@@ -1,5 +1,10 @@
 import {PortableText} from '@portabletext/react';
+import {useMemo} from 'react';
 
+import type {AddToCartButtonBlockProps} from '../blocks/AddToCartButtonBlock';
+import type {PriceBlockProps} from '../blocks/PriceBlock';
+import type {ShopifyDescriptionBlockProps} from '../blocks/ShopifyDescriptionBlock';
+import type {ShopifyTitleBlockProps} from '../blocks/ShopifyTitleBlock';
 import type {ProductInformationSectionProps} from '../sections/ProductInformationSection';
 
 import {AddToCartButtonBlock} from '../blocks/AddToCartButtonBlock';
@@ -8,24 +13,30 @@ import {ShopifyDescriptionBlock} from '../blocks/ShopifyDescriptionBlock';
 import {ShopifyTitleBlock} from '../blocks/ShopifyTitleBlock';
 
 export function ProductDetails(props: {data: ProductInformationSectionProps}) {
+  const components = useMemo(
+    () => ({
+      types: {
+        addToCartButton: (props: {value: AddToCartButtonBlockProps}) => {
+          return <AddToCartButtonBlock {...props.value} />;
+        },
+        price: (props: {value: PriceBlockProps}) => (
+          <PriceBlock {...props.value} />
+        ),
+        shopifyDescription: (props: {value: ShopifyDescriptionBlockProps}) => (
+          <ShopifyDescriptionBlock {...props.value} />
+        ),
+        shopifyTitle: (props: {value: ShopifyTitleBlockProps}) => (
+          <ShopifyTitleBlock {...props.value} />
+        ),
+      },
+    }),
+    [],
+  );
+
   return (
     <div className="space-y-4">
       {props.data.richtext && (
-        <PortableText
-          components={{
-            types: {
-              addToCartButton: ({value}) => {
-                return <AddToCartButtonBlock {...value} />;
-              },
-              price: ({value}) => <PriceBlock {...value} />,
-              shopifyDescription: ({value}) => (
-                <ShopifyDescriptionBlock {...value} />
-              ),
-              shopifyTitle: ({value}) => <ShopifyTitleBlock {...value} />,
-            },
-          }}
-          value={props.data.richtext}
-        />
+        <PortableText components={components} value={props.data.richtext} />
       )}
     </div>
   );