Add ProductCard variant with discount code

HedvigInsurance · Sep 19, 2024 · 4eb7c1a · 4eb7c1a
1 parent c4af48d
commit 4eb7c1a
Show file tree

Hide file tree

Showing 2 changed files with 135 additions and 3 deletions.
diff --git a/apps/store/src/components/ProductCard/Discount/Discount.tsx b/apps/store/src/components/ProductCard/Discount/Discount.tsx
@@ -16,7 +16,7 @@ import Collapsible from '@/components/Collapsible/Collapsible'
 import { TextField } from '@/components/TextField/TextField'
 import { formInput, formSubmitButton } from './Discount.css'
 
-const FORM_CAMPAIGN_CODE = 'campaignCode'
+export const FORM_CAMPAIGN_CODE = 'campaignCode'
 
 type RootProps = Omit<ComponentProps<typeof Collapsible.Root>, 'open'>
 const DiscountRoot = ({ children, defaultOpen, ...props }: RootProps) => {
@@ -97,7 +97,7 @@ const DiscountCode = ({ children, className, code, ...props }: CodeProps) => {
         <Text as="span" size="xs">
           {code}
         </Text>
-        <input hidden value={code} readOnly />
+        <input hidden name={FORM_CAMPAIGN_CODE} value={code} readOnly />
         <IconButton variant="ghost" style={{ padding: 0 }} data-no-hover>
           <CrossIconSmall color={tokens.colors.textTertiary} />
         </IconButton>

diff --git a/apps/store/src/components/ProductCard/ProductCard.stories.tsx b/apps/store/src/components/ProductCard/ProductCard.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import { useState, type ComponentProps } from 'react'
+import { type FormEvent, useState, type ComponentProps } from 'react'
 import {
   Alert,
   Badge,
@@ -19,6 +19,7 @@ import { CurrencyCode } from '@/services/graphql/graphql'
 import { InputStartDay } from '../InputDay/InputStartDay'
 import { Price } from '../Price'
 import { DetailsList } from './DetailsList/DetailsList'
+import { Discount, FORM_CAMPAIGN_CODE } from './Discount/Discount'
 import { Divider } from './Divider'
 import { ProductCardDetails } from './ProductCardDetails'
 
@@ -338,3 +339,134 @@ export const WithSwitching: Story = {
     variant: 'primary',
   },
 }
+
+export const WithDiscount: Story = {
+  render: (args: Controls) => {
+    const [shouldAutoSwitch, setShouldAutoSwitch] = useState(true)
+    const [discountCode, setDiscountCode] = useState<string | null>('BANK')
+
+    const removeDiscount = () => {
+      setDiscountCode(null)
+    }
+
+    const addDiscount = (event: FormEvent<HTMLFormElement>) => {
+      const formData = new FormData(event.currentTarget)
+      const code = formData.get(FORM_CAMPAIGN_CODE) as string
+
+      setDiscountCode(code)
+    }
+
+    return (
+      <div style={{ maxWidth: '400px' }}>
+        <Card.Root variant={args.variant}>
+          <Card.Aside>
+            <IconButton variant="secondary">
+              <CrossIcon />
+            </IconButton>
+          </Card.Aside>
+          <Card.Header>
+            <Card.Media>
+              <BasePillow fill={tokens.colors.amber300} />
+            </Card.Media>
+            <Card.Heading>
+              <Card.Title>Homeowner Insurance</Card.Title>
+              <Card.Subtitle>Bellmansgatan 19A</Card.Subtitle>
+            </Card.Heading>
+          </Card.Header>
+
+          <ProductCardDetails.Root>
+            <ProductCardDetails.Trigger>
+              {(isOpen) => (isOpen ? 'Hide details' : 'Show details')}
+            </ProductCardDetails.Trigger>
+
+            <ProductCardDetails.Content className={sprinkles({ paddingBlock: 'md' })}>
+              <Text className={sprinkles({ mb: 'xxs' })}>Details</Text>
+              <DetailsList.Root size="md" className={sprinkles({ mb: 'md' })}>
+                <DetailsList.Item>
+                  <DetailsList.Label>Home type</DetailsList.Label>
+                  <DetailsList.Value>Homeowner</DetailsList.Value>
+                </DetailsList.Item>
+
+                <DetailsList.Item>
+                  <DetailsList.Label>Address</DetailsList.Label>
+                  <DetailsList.Value>Bellmansgatan 19A</DetailsList.Value>
+                </DetailsList.Item>
+
+                <DetailsList.Item>
+                  <DetailsList.Label>Zip code</DetailsList.Label>
+                  <DetailsList.Value>118 47</DetailsList.Value>
+                </DetailsList.Item>
+              </DetailsList.Root>
+              <Button variant="secondary" size="medium" fullWidth>
+                Edit information
+              </Button>
+            </ProductCardDetails.Content>
+          </ProductCardDetails.Root>
+
+          <div className={yStack({ gap: 'xxs' })}>
+            <ToggleCard.Root>
+              <ToggleCard.Label>Automatic switching</ToggleCard.Label>
+              <ToggleCard.Switch checked={shouldAutoSwitch} onCheckedChange={setShouldAutoSwitch} />
+              <ToggleCard.Description>
+                Hedvig will cancel your current insurance at Folksam. Your insurance at Hedvig
+                activates automatically when it expires
+              </ToggleCard.Description>
+            </ToggleCard.Root>
+
+            {!shouldAutoSwitch ? <InputStartDay /> : null}
+          </div>
+
+          <Discount.Root
+            defaultOpen={!!discountCode}
+            onOpenChange={(isOpen) => !isOpen && removeDiscount()}
+          >
+            {discountCode ? (
+              <Discount.Code code={discountCode} onSubmit={removeDiscount}>
+                -20% for 3 months
+              </Discount.Code>
+            ) : (
+              <Discount.Form onSubmit={addDiscount} />
+            )}
+          </Discount.Root>
+
+          <Divider />
+
+          <DetailsList.Root>
+            <DetailsList.Item>
+              <DetailsList.Label>
+                Homeowner Insurance{' '}
+                <Badge color="pinkFill1" size="tiny">
+                  Max
+                </Badge>
+              </DetailsList.Label>
+              <DetailsList.Value>379 kr/mo</DetailsList.Value>
+            </DetailsList.Item>
+
+            <DetailsList.Item>
+              <DetailsList.Label>Extended travel 60 days</DetailsList.Label>
+              <DetailsList.Value>79 kr/mo</DetailsList.Value>
+            </DetailsList.Item>
+          </DetailsList.Root>
+
+          <Divider />
+
+          <DetailsList.Root size="md">
+            <DetailsList.Item className={sprinkles({ color: 'textPrimary' })}>
+              <DetailsList.Label>Total</DetailsList.Label>
+              <DetailsList.Value>
+                <Price
+                  className={sprinkles({ justifyContent: 'flex-end' })}
+                  currencyCode={CurrencyCode.Sek}
+                  amount={458}
+                />
+              </DetailsList.Value>
+            </DetailsList.Item>
+          </DetailsList.Root>
+        </Card.Root>
+      </div>
+    )
+  },
+  args: {
+    variant: 'primary',
+  },
+}