Merge pull request #274 from iFixit/improve-product-list-item-pricing

Improve product list item pricing

frontend/components/product-list/sections/FilterableProductsSection/ProductGrid.tsx

@@ -9,11 +9,10 @@ import {
    ProductCardRating,
    ProductCardTitle,
 } from '@components/common';
-import { computeDiscountPercentage } from '@helpers/commerce-helpers';
-import { useAuthenticatedUser } from '@ifixit/auth-sdk';
 import { useAppContext } from '@ifixit/ui';
 import { ProductSearchHit } from '@models/product-list';
 import * as React from 'react';
+import { useProductSearchHitPricing } from './useProductSearchHitPricing';
 
 export type ProductGridProps = React.PropsWithChildren<unknown>;
 
@@ -40,32 +39,10 @@ export interface ProductGridItemProps {
 }
 
 export function ProductGridItem({ product }: ProductGridItemProps) {
-   const user = useAuthenticatedUser();
    const appContext = useAppContext();
 
-   const proTierPrice = React.useMemo(() => {
-      const proTier = user.data?.discountTier ?? null;
-      if (proTier) {
-         const priceString = product.price_tiers?.[proTier];
-         return priceString == null ? null : parseFloat(priceString);
-      }
-      return null;
-   }, [user.data?.discountTier, product.price_tiers]);
-
-   const isDiscounted =
-      product.compare_at_price != null &&
-      product.compare_at_price > product.price_float;
-
-   const percentage = isDiscounted
-      ? computeDiscountPercentage(
-           product.price_float * 100,
-           product.compare_at_price! * 100
-        )
-      : 0;
-
-   const price = proTierPrice ?? product.price_float;
-   const compareAtPrice =
-      proTierPrice == null ? product.compare_at_price : undefined;
+   const { price, compareAtPrice, isDiscounted, percentage } =
+      useProductSearchHitPricing(product);
 
    return (
       <LinkBox as="article" display="block" w="full">

frontend/components/product-list/sections/FilterableProductsSection/ProductList.tsx

@@ -14,12 +14,11 @@ import {
    VStack,
 } from '@chakra-ui/react';
 import { Rating } from '@components/ui';
-import { computeDiscountPercentage } from '@helpers/commerce-helpers';
-import { useAuthenticatedUser } from '@ifixit/auth-sdk';
 import { useAppContext } from '@ifixit/ui';
 import { ProductSearchHit } from '@models/product-list';
 import Image from 'next/image';
 import * as React from 'react';
+import { useProductSearchHitPricing } from './useProductSearchHitPricing';
 
 export type ProductListProps = React.PropsWithChildren<unknown>;
 
@@ -42,29 +41,10 @@ export interface ProductListItemProps {
 }
 
 export function ProductListItem({ product }: ProductListItemProps) {
-   const user = useAuthenticatedUser();
    const appContext = useAppContext();
 
-   const proTierPrice = React.useMemo(() => {
-      const proTier = user.data?.discountTier ?? null;
-      return (proTier ? product.price_tiers?.[proTier] : null) ?? null;
-   }, [user.data?.discountTier, product.price_tiers]);
-
-   const isDiscounted =
-      proTierPrice == null &&
-      product.compare_at_price != null &&
-      product.compare_at_price > product.price_float;
-
-   const price = proTierPrice ?? product.price_float;
-   const compareAtPrice =
-      proTierPrice == null ? product.compare_at_price : null;
-
-   const percentage = isDiscounted
-      ? computeDiscountPercentage(
-           product.price_float * 100,
-           product.compare_at_price! * 100
-        )
-      : 0;
+   const { price, compareAtPrice, isDiscounted, percentage } =
+      useProductSearchHitPricing(product);
 
    const productHeadingId = `product-heading-${product.handle}`;
 

frontend/components/product-list/sections/FilterableProductsSection/useProductSearchHitPricing.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { useAuthenticatedUser } from '@ifixit/auth-sdk';
+import { ProductSearchHit } from '@models/product-list';
+import { computeDiscountPercentage } from '@helpers/commerce-helpers';
+
+export type ProductSearchHitPricing = {
+   price: number;
+   compareAtPrice: number | undefined;
+   isDiscounted: boolean;
+   percentage: number;
+};
+export function useProductSearchHitPricing(
+   product: ProductSearchHit
+): ProductSearchHitPricing {
+   const user = useAuthenticatedUser();
+
+   let proTierPrice: number | null = null;
+   const discountTier = user.data?.discountTier ?? null;
+   if (discountTier) {
+      const priceString = product.price_tiers?.[discountTier];
+      proTierPrice = priceString == null ? null : parseFloat(priceString);
+   }
+
+   const price = proTierPrice ?? product.price_float;
+   const compareAtPrice = product.compare_at_price ?? product.price_float;
+   const isDiscounted = compareAtPrice != null && compareAtPrice > price;
+
+   const percentage = isDiscounted
+      ? computeDiscountPercentage(price * 100, compareAtPrice! * 100)
+      : 0;
+
+   return {
+      price,
+      compareAtPrice,
+      isDiscounted,
+      percentage,
+   };
+}