Tec 4141 front resumo componentes de subtotais ds

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chardonnay",
-  "version": "1.0.22",
+  "version": "1.0.23",
   "description": "A mobile first frontend framework made with wine",
   "homepage": "https://vissimo-group.github.io/chardonnay/",
   "main": "./dist/index.js",

src/components/PurchaseSummary/PurchaseSummary.stories.tsx

@@ -0,0 +1,89 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { PurchaseSummary } from './index'
+import { PurchaseSummaryProps } from './type'
+
+export default {
+  title: 'Components/PurchaseSummary',
+  component: PurchaseSummary,
+  tags: ['autodocs'],
+  argTypes: {
+    description: {
+      control: 'text',
+    },
+    totalitems: {
+      control: 'text',
+    },
+    productsPrice: {
+      control: 'number',
+    },
+    deliveryCost: {
+      control: 'number',
+    },
+    totalDiscount: {
+      control: 'number',
+    },
+    totalPrice: {
+      control: 'number',
+    },
+    installmentPayment: {
+      control: 'text',
+    },
+    discounts: {
+      control: 'object',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ padding: '16px', backgroundColor: '#f0f0f0' }}>
+        <Story />
+      </div>
+    ),
+  ],
+} as Meta<PurchaseSummaryProps>
+
+type Story = StoryObj<PurchaseSummaryProps>
+
+export const EmptyDiscounts: Story = {
+  args: {
+    productsLabel: 'Valor dos produtos',
+    deliveryValue: 'Valor da entrega',
+    totalitems: 2,
+    labelItensText: 'itens',
+    productsPrice: 178.6,
+    deliveryCost: 15.0,
+    totalDiscount: 29.35,
+    totalPrice: 90,
+    installmentPayment: '2x de 59,85 sem juros',
+    discounts: [],
+  },
+  render: (args) => <PurchaseSummary {...args} />,
+}
+
+export const Default: Story = {
+  name: 'Default',
+  args: {
+    title: '',
+    productsLabel: 'Valor dos produtos',
+    deliveryValue: 'Valor da entrega',
+    totalitems: 1,
+    labelItensText: 'item',
+    productsPrice: 178.6,
+    deliveryCost: 15.0,
+    totalDiscount: 29.35,
+    totalPrice: 90,
+    installmentPayment: '2x de 59,85 sem juros',
+    discounts: [
+      {
+        id: 1,
+        title: 'Cupom de desconto',
+        value: '31,00',
+      },
+      {
+        id: 2,
+        title: 'Cashback',
+        value: '11,50',
+      },
+    ],
+  },
+  render: (args) => <PurchaseSummary {...args} />,
+}

src/components/PurchaseSummary/PurchaseSummaryAccordion/index.tsx

@@ -0,0 +1,50 @@
+import { useState } from 'react'
+import { ChevronDown, ChevronUp } from 'semillon'
+import {
+  AccordionContainer,
+  AccordionHeader,
+  AccordionContent,
+  AccordionItem,
+} from './style'
+import { PurchaseSummaryAccordionProps } from './type'
+
+export function PurchaseSummaryAccordion({
+  title,
+  value,
+  listDiscount,
+}: PurchaseSummaryAccordionProps) {
+  const [isOpen, setIsOpen] = useState(false)
+
+  const toggleAccordion = () => {
+    setIsOpen(!isOpen)
+  }
+
+  return (
+    <AccordionContainer>
+      <AccordionHeader onClick={toggleAccordion}>
+        <span>{title}</span>
+        <span className="chevronIcon">
+          {isOpen ? (
+            <ChevronDown size={16} color="#1C1C1C" />
+          ) : (
+            <ChevronUp size={16} color="#1C1C1C" />
+          )}
+        </span>
+        <span className="priceHeader">-{value}</span>
+      </AccordionHeader>
+
+      {isOpen && listDiscount && listDiscount.length > 0 && (
+        <AccordionContent>
+          <ul>
+            {listDiscount.map((item) => (
+              <AccordionItem key={item.id}>
+                <li>{item.title}</li>
+                <span className="itemValue">-R$ {item.value}</span>
+              </AccordionItem>
+            ))}
+          </ul>
+        </AccordionContent>
+      )}
+    </AccordionContainer>
+  )
+}

src/components/PurchaseSummary/PurchaseSummaryAccordion/style.tsx

@@ -0,0 +1,75 @@
+import styled from 'styled-components'
+import { Colors, mediaQueries } from '../../../tokens'
+
+export const AccordionContainer = styled.div`
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-size: 14px;
+`
+
+export const AccordionHeader = styled.div`
+  width: 100%;
+  background-color: ${Colors.light.neutral.neutral100};
+  color: ${Colors.light.neutral.neutral500};
+
+  display: flex;
+  justify-content: space-between;
+  cursor: pointer;
+  margin-bottom: 8px !important;
+
+  .chevronIcon {
+    color: ${Colors.light.neutral.neutral100};
+    font-size: 14px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    margin-left: 7px;
+  }
+
+  .priceHeader {
+   margin-left: auto;
+   cursor: pointer;
+   color: ${Colors.light.feedback.feedbackInfo100};
+  }
+`
+
+export const AccordionContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  ul {
+    padding: 0 0 0 11px;
+    margin: 0;
+  }
+
+  @media screen and (max-width: ${mediaQueries.screenXxs}) {
+    ul {
+      padding: 0 0 0 8px;
+      font-size: 12px;
+
+      li {
+        font-size: 12px;
+      }
+    }
+  }
+`
+
+export const AccordionItem = styled.li`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding-left: 16px;
+
+  li {
+    font-size: 14px;
+    color: ${Colors.light.neutral.neutral500};
+    padding-left: 8px;
+  }
+
+  .itemValue {
+    color: ${Colors.light.action.action100};
+  }
+`

src/components/PurchaseSummary/PurchaseSummaryAccordion/type.ts

@@ -0,0 +1,9 @@
+import { DiscountItem } from '../type'
+
+type PurchaseSummaryAccordionProps = {
+  title: string
+  value: number | string
+  listDiscount?: Array<DiscountItem>
+}
+
+export type { PurchaseSummaryAccordionProps }

src/components/PurchaseSummary/index.tsx

@@ -0,0 +1,81 @@
+import React from 'react'
+import { PurchaseSummaryProps } from './type'
+import {
+  Container,
+  Title,
+  ItemContainer,
+  ItemText,
+  ProductsPrice,
+  DeliveryPrice,
+  ItemsTitle,
+  LineDivider,
+  Footer,
+  FooterItems,
+  FooterTitle,
+  PaymentInstallments,
+  Total,
+} from './style'
+
+import { PurchaseSummaryAccordion } from './PurchaseSummaryAccordion/index'
+
+const PurchaseSummary: React.FC<PurchaseSummaryProps> = ({
+  title,
+  productsLabel,
+  deliveryValue,
+  totalitems,
+  labelItensText,
+  productsPrice,
+  deliveryCost,
+  totalDiscount,
+  totalPrice,
+  installmentPayment,
+  discounts,
+}) => {
+  const hasDiscounts = discounts && discounts.length > 0;
+
+  return (
+    <Container>
+      {title && <Title>{title}</Title>}
+      <ItemContainer>
+        <ItemText>
+          {productsLabel}
+          <ItemsTitle>
+            ({totalitems} {labelItensText})
+          </ItemsTitle>
+          <ProductsPrice>{productsPrice}</ProductsPrice>
+        </ItemText>
+      </ItemContainer>
+
+      {deliveryValue && (
+        <ItemContainer>
+          <ItemText>
+            {deliveryValue}
+            <DeliveryPrice >{deliveryCost}</DeliveryPrice>
+          </ItemText>
+        </ItemContainer> 
+      )}
+
+      {hasDiscounts && (
+        <ItemContainer>
+          <PurchaseSummaryAccordion
+            title="Total de descontos"
+            value={totalDiscount}
+            listDiscount={discounts}
+          />
+        </ItemContainer>
+      )}
+
+      <LineDivider />
+
+      <Footer>
+        <FooterTitle>Total</FooterTitle>
+        <FooterItems>
+          <Total>R${totalPrice}</Total>
+          {installmentPayment && <PaymentInstallments>{installmentPayment}</PaymentInstallments>}
+        </FooterItems>
+      </Footer>
+    </Container>
+  )
+}
+
+export { PurchaseSummary }