refactor: show discount percentage data from back

Author: pooriaset

src/app/[locale]/(main)/(container)/cart/page.tsx

@@ -238,6 +238,16 @@ const Page = () => {
                               }}
                             />
                           )}
+                          {!isOutOfStock && (
+                            <PriceLabel
+                              value={_item.total}
+                              TypographyProps={{
+                                sx: {
+                                  fontWeight: 600,
+                                },
+                              }}
+                            />
+                          )}
                         </Stack>
                         {!isLast && <Divider />}
                       </Stack>

src/app/[locale]/(main)/(container)/products/[...params]/components/BuyBox.tsx

@@ -1,12 +1,12 @@
 'use client';
 
 import { useProductContext } from '@/app/[locale]/(main)/(container)/products/[...params]/hooks/useProductContext';
-import { Variations } from '@/app/[locale]/(main)/(container)/products/types/common';
 import CartItemController from '@/components/CartItemController/CartItemController';
 import useNewDialog from '@/components/Dialog/hooks/useNewDialog';
 import ButtonWithLoading from '@/components/common/ButtonWithLoading';
 import { getFragmentData } from '@/graphql/types';
 import {
+  GetSingleProductQuery,
   ProductVariationContentSliceFragmentDoc,
   StockStatusEnum,
 } from '@/graphql/types/graphql';
@@ -48,34 +48,26 @@ const listItems = [
 ];
 
 export interface BuyBoxProps {
-  variations: Variations;
-  stockStatus: StockStatusEnum | null | undefined;
+  product: Extract<
+    NonNullable<GetSingleProductQuery['product']>,
+    { __typename?: 'VariableProduct' }
+  >;
 }
 
-const BuyBox: FC<BuyBoxProps> = ({ variations, stockStatus }) => {
+const BuyBox: FC<BuyBoxProps> = ({ product }) => {
   const { params } = useParams();
 
   const { isMobile } = useAppContext();
   const t = useTranslations();
 
   const { selectedVariantId } = useProductContext();
 
-  const sortBySalePriceVariations = variations?.nodes.sort((a, b) => {
-    const first = getFragmentData(ProductVariationContentSliceFragmentDoc, a);
-    const second = getFragmentData(ProductVariationContentSliceFragmentDoc, b);
-
-    return (
-      (extractNumbers(first?.salePrice) ?? 0) -
-      (extractNumbers(second?.salePrice) ?? 0)
-    );
-  });
-
   const _variant = useMemo(() => {
     if (!selectedVariantId) {
-      return sortBySalePriceVariations?.[0];
+      return null;
     }
 
-    return variations?.nodes.find((item) => {
+    return product.variations?.nodes.find((item) => {
       const fragment = getFragmentData(
         ProductVariationContentSliceFragmentDoc,
         item,
@@ -119,7 +111,11 @@ const BuyBox: FC<BuyBoxProps> = ({ variations, stockStatus }) => {
 
   const height = 55;
 
-  const outOfStock = stockStatus === StockStatusEnum.OutOfStock;
+  const isOutOfStock = product.stockStatus === StockStatusEnum.OutOfStock;
+
+  const discountPercentage =
+    (variant === null && product?.discountPercentage) ||
+    (variant !== null && variant?.discountPercentage);
 
   return (
     <>
@@ -129,7 +125,7 @@ const BuyBox: FC<BuyBoxProps> = ({ variations, stockStatus }) => {
         value={variant!}
       />
 
-      {outOfStock ? (
+      {isOutOfStock ? (
         <Typography
           color="error"
           variant="h6"
@@ -192,16 +188,24 @@ const BuyBox: FC<BuyBoxProps> = ({ variations, stockStatus }) => {
                 gap: 0.5,
               }}
             >
-              {variant?.price !== variant?.regularPrice && (
+              {!!discountPercentage && (
                 <>
                   <OldPrice
-                    value={variant?.regularPrice}
+                    value={
+                      variant ? variant?.regularPrice : product.regularPrice
+                    }
                     TypographyProps={{
                       variant: 'body1',
                     }}
                   />
 
-                  <DiscountPercentage value={profitMarginPercentage} />
+                  <DiscountPercentage
+                    value={
+                      variant
+                        ? variant.discountPercentage
+                        : product.discountPercentage
+                    }
+                  />
                 </>
               )}
             </Box>
@@ -210,7 +214,7 @@ const BuyBox: FC<BuyBoxProps> = ({ variations, stockStatus }) => {
                 variant: 'h6',
                 fontWeight: 600,
               }}
-              value={variant?.salePrice}
+              value={variant ? variant.price : product.price}
             />
           </Box>
 

src/app/[locale]/(main)/(container)/products/[...params]/page.tsx

@@ -99,10 +99,7 @@ const Page: FC<PageProps> = async ({ params: { params } }) => {
         <Grid item md={3} xs={12}>
           <Card variant="outlined">
             <CardContent>
-              <BuyBox
-                stockStatus={product.stockStatus}
-                variations={product.variations}
-              />
+              <BuyBox product={product} />
             </CardContent>
           </Card>
         </Grid>

src/components/VariableProductItem/VariableProductItem.tsx

@@ -2,21 +2,16 @@
 
 import { Box, Card, CardContent, Typography } from '@mui/material';
 
+import { StockStatusEnum } from '@/graphql/types/graphql';
 import { useAppContext } from '@/hooks/useAppContext';
-import {
-  extractNumbers,
-  getMinOfRangePrice,
-  getProfitPercentage,
-} from '@/utils/price';
 import { Link as NextLink } from '@/navigation';
+import Image from 'next/image';
 import { FC } from 'react';
 import DiscountPercentage from '../common/DiscountPercentage';
-import Image from 'next/image';
 import OldPrice from '../common/OldPrice';
+import OutOfStock from '../common/OutOfStock';
 import PriceLabel from '../common/PriceLabel';
 import { VariableProduct } from './types';
-import { StockStatusEnum } from '@/graphql/types/graphql';
-import OutOfStock from '../common/OutOfStock';
 
 export interface ProductItemProps {
   data: VariableProduct;
@@ -25,11 +20,6 @@ export interface ProductItemProps {
 const VariableProductItem: FC<ProductItemProps> = ({ data }) => {
   const { isMobile, variantImageSize } = useAppContext();
 
-  const profitMarginPercentage = getProfitPercentage(
-    extractNumbers(getMinOfRangePrice(data.price)),
-    extractNumbers(data.regularPrice),
-  );
-
   const outOfStock = data.stockStatus === StockStatusEnum.OutOfStock;
 
   return (
@@ -102,7 +92,7 @@ const VariableProductItem: FC<ProductItemProps> = ({ data }) => {
               ) : (
                 <>
                   {data.onSale && (
-                    <DiscountPercentage value={profitMarginPercentage} />
+                    <DiscountPercentage value={data.discountPercentage ?? 0} />
                   )}
 
                   <Box>

src/components/common/DiscountPercentage.tsx

@@ -1,17 +1,20 @@
-"use client";
-import { Chip } from "@mui/material";
-import React, { FC } from "react";
+'use client';
+import { Chip } from '@mui/material';
+import React, { FC } from 'react';
 
 export interface DiscountPercentageProps {
-  value: number;
+  value?: number | null;
 }
 
 const DiscountPercentage: FC<DiscountPercentageProps> = ({ value }) => {
+  if (!value) {
+    return null;
+  }
   return (
     <Chip
       size="small"
       color="error"
-      label={`${value}%`}
+      label={`${Math.floor(value)}%`}
       sx={{
         fontWeight: 600,
         fontSize: (theme) => theme.typography.caption.fontSize,

src/graphql/queries/cart.ts

@@ -55,6 +55,8 @@ export const ProductVariationContentSlice = gql`
     price
     regularPrice
     salePrice
+    discountAmount
+    discountPercentage
     stockStatus
   }
 `;

src/graphql/queries/products.ts

@@ -42,6 +42,8 @@ export const GET_VARIABLE_PRODUCTS_QUERY = gql`
           regularPrice
           salePrice
           stockStatus
+          discountAmount
+          discountPercentage
         }
       }
     }
@@ -94,6 +96,11 @@ export const GET_SINGLE_VARIABLE_PRODUCT_QUERY = gql`
         stockStatus
         slug
         averageRating
+        price
+        regularPrice
+        salePrice
+        discountPercentage
+        discountAmount
         variations(where: { stockStatus: IN_STOCK }) {
           nodes {
             ...ProductVariationContentSlice