Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve product list item pricing #274

Merged
merged 3 commits into from May 5, 2022
Merged

Improve product list item pricing #274

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7c2ecca
refactor: Improve product item pricing
dhmacs Apr 21, 2022
7273d71
Merge branch 'main' into improve-product-list-item-pricing
dhmacs May 4, 2022
9015d2a
refactor(product list): Simplify code
dhmacs May 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
31 changes: 7 additions & 24 deletions frontend/components/product-list/sections/FilterableProductsSection/ProductGrid.tsx
View file
Open in desktop
Expand Up @@ -14,6 +14,7 @@ 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>;

Expand All @@ -40,32 +41,14 @@ 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">
Expand Down
28 changes: 7 additions & 21 deletions frontend/components/product-list/sections/FilterableProductsSection/ProductList.tsx
View file
Open in desktop
Expand Up @@ -20,6 +20,7 @@ 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>;

Expand All @@ -42,29 +43,14 @@ 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}`;

Expand Down
44 changes: 44 additions & 0 deletions .../components/product-list/sections/FilterableProductsSection/useProductSearchHitPricing.ts
View file
Open in desktop
@@ -0,0 +1,44 @@
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();

const proTierPrice = React.useMemo(() => {
dhmacs marked this conversation as resolved.
Show resolved Hide resolved
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 isProUser = proTierPrice != null;

const price = proTierPrice ?? product.price_float;
const compareAtPrice = isProUser
? product.compare_at_price ?? product.price_float
: product.compare_at_price;
dhmacs marked this conversation as resolved.
Show resolved Hide resolved
const isDiscounted = compareAtPrice != null && compareAtPrice > price;

const percentage = isDiscounted
? computeDiscountPercentage(price * 100, compareAtPrice! * 100)
: 0;

return {
price,
compareAtPrice,
isDiscounted,
percentage,
};
}