TEC-4141: Refactored so that the PurchaseSummary component receives t…

…he property children to display the child component's information.
vissimo-group · Mar 26, 2024 · 0dc90fc · 0dc90fc
1 parent a55ae12
commit 0dc90fc
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 15 deletions.
diff --git a/src/components/PurchaseSummary/PurchaseSummary.stories.tsx b/src/components/PurchaseSummary/PurchaseSummary.stories.tsx
@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react'
 import { PurchaseSummary } from './index'
 import { PurchaseSummaryProps } from './type'
+import { PurchaseSummaryAccordion } from './PurchaseSummaryAccordion'
 
 export default {
   title: 'Components/PurchaseSummary',
@@ -86,6 +87,7 @@ export const WithDiscounts: Story = {
     title: '',
     productsLabel: 'Valor dos produtos',
     deliveryValue: 'Valor da entrega',
+    discountLabel: 'Total de descontos',
     totalItems: 1,
     labelItensText: 'item',
     productsPrice: 178.6,
@@ -106,7 +108,15 @@ export const WithDiscounts: Story = {
       },
     ],
   },
-  render: (args) => <PurchaseSummary {...args} />,
+  render: (args) => (
+    <PurchaseSummary {...args}>
+      <PurchaseSummaryAccordion
+        title={args.discountLabel}
+        total={args.totalDiscount}
+        listDiscount={args.discounts}
+      />
+    </PurchaseSummary>
+  ),
 }
 
 export const WithoutDiscounts: Story = {

diff --git a/src/components/PurchaseSummary/index.tsx b/src/components/PurchaseSummary/index.tsx
@@ -16,8 +16,6 @@ import {
   PurchaseSummaryPaymentInstallments,
 } from './style'
 
-import { PurchaseSummaryAccordion } from './PurchaseSummaryAccordion/index'
-
 const PurchaseSummary: React.FC<PurchaseSummaryProps> = ({
   title,
   productsLabel,
@@ -26,13 +24,10 @@ const PurchaseSummary: React.FC<PurchaseSummaryProps> = ({
   labelItensText,
   productsPrice,
   deliveryCost,
-  totalDiscount,
   totalPrice,
   installmentPayment,
-  discounts,
+  children,
 }) => {
-  const hasDiscounts = discounts && discounts.length > 0
-
   return (
     <PurchaseSummaryContainer>
       {title && <PurchaseSummaryTitle>{title}</PurchaseSummaryTitle>}
@@ -59,14 +54,8 @@ const PurchaseSummary: React.FC<PurchaseSummaryProps> = ({
         </PurchaseSummaryItemContainer>
       )}
 
-      {hasDiscounts && (
-        <PurchaseSummaryItemContainer>
-          <PurchaseSummaryAccordion
-            title="Total de descontos"
-            total={totalDiscount}
-            listDiscount={discounts}
-          />
-        </PurchaseSummaryItemContainer>
+      {children && (
+        <PurchaseSummaryItemContainer>{children}</PurchaseSummaryItemContainer>
       )}
 
       <PurchaseSummaryLineDivider />

diff --git a/src/components/PurchaseSummary/type.ts b/src/components/PurchaseSummary/type.ts
@@ -10,6 +10,8 @@ type PurchaseSummaryProps = {
   totalPrice: number
   installmentPayment?: string
   discounts: Array<PurchaseSummaryDiscountItemProps>
+  children?: React.ReactNode
+  discountLabel: string
 }
 
 type PurchaseSummaryDiscountItemProps = {