Feat: Uses OutOfStock component from FSUI (#70)

CHANGELOG.md

@@ -17,6 +17,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - `add_to_cart` and `remove_from_cart` analytics events to `CartItem` ([#43](https://github.com/vtex-sites/gatsby.store/pull/43))
 
 ### Changed
+
+- `OutOfStock` component ([#70](https://github.com/vtex-sites/nextjs.store/pull/70))
 - Displays 5 products on product suggestion for better mobile experience ([#73](https://github.com/vtex-sites/gatsby.store/pull/73))
 - Uses CSS Modules on `ProductGallery` section [#54](https://github.com/vtex-sites/gatsby.store/pull/54)
 - Uses CSS Modules on `ProductCard` component [#54](https://github.com/vtex-sites/gatsby.store/pull/54)

src/components/product/OutOfStock/OutOfStock.stories.mdx

@@ -0,0 +1,46 @@
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'
+import { SessionProvider } from '@faststore/sdk'
+
+
+import OutOfStock from '.'
+
+<Meta
+  title="Organisms/OutOfStock"
+  argTypes={{
+    buttonIcon: { control: false, },
+    notificationMsgIcon: { control: false, },
+  }}
+  component={OutOfStock}
+/>
+
+<header>
+
+# Out of Stock
+
+Out of Stock are used to announce to users that the product is out of stock. And ask for their contact to let they know when the product arrives.
+
+</header>
+
+The `OutOfStock` component uses [FastStore UI OutOfStock](https://www.faststore.dev/reference/ui/organisms/OutOfStock) as base.
+
+### Import
+
+`import OutOfStock from '../components/product/OutOfStock'`
+
+### Usage
+
+<Canvas>
+  <Story
+    name="OutOfStock"
+    args={{
+      title:
+        'Out of Stock',
+      buttonText: 'Notify me',
+      notificationMsg: 'Notify me when available',
+    }}
+  >
+    {(args) => <SessionProvider initialState={{}}><OutOfStock {...args} /></SessionProvider>}
+  </Story>
+</Canvas>
+
+<ArgsTable story="OutOfStock" />

src/components/product/OutOfStock/OutOfStock.tsx

@@ -1,5 +1,9 @@
 import { useSession } from '@faststore/sdk'
-import { Form } from '@faststore/ui'
+import {
+  OutOfStock as UIOutOfStock,
+  OutOfStockTitle as UIOutOfStockTitle,
+  OutOfStockMessage as UIOutOfStockMessage,
+} from '@faststore/ui'
 import { useState } from 'react'
 import Button from 'src/components/ui/Button'
 import Icon from 'src/components/ui/Icon'
@@ -60,7 +64,6 @@ function OutOfStock(props: OutOfStockProps) {
       <Icon name={defaultIconName} width={16} height={16} />
     ),
     onSubmit,
-    testId = 'store-out-of-stock',
   } = props
 
   const reset = () => {
@@ -91,33 +94,29 @@ function OutOfStock(props: OutOfStockProps) {
   }
 
   return (
-    <section data-store-out-of-stock data-testid={testId} aria-live="polite">
-      <Form data-out-of-stock-form onSubmit={handleSubmit}>
-        <p className="text__title-subsection">{title}</p>
-        <p data-store-out-of-stock-subtitle>
-          {notificationMsgIcon} {notificationMsg}
-        </p>
-        <div>
-          <InputText
-            id="out-of-stock-email"
-            value={email}
-            label="Email"
-            aria-label="Email"
-            onChange={(e) => setEmail(e.target.value)}
-          />
-          <Button
-            data-store-out-of-stock-button
-            type="submit"
-            disabled={disabled}
-            variant="primary"
-            icon={buttonIcon}
-            iconPosition="left"
-          >
-            {buttonText}
-          </Button>
-        </div>
-      </Form>
-    </section>
+    <UIOutOfStock onSubmit={handleSubmit}>
+      <UIOutOfStockTitle>{title}</UIOutOfStockTitle>
+      <UIOutOfStockMessage>
+        {notificationMsgIcon} {notificationMsg}
+      </UIOutOfStockMessage>
+      <InputText
+        id="out-of-stock-email"
+        value={email}
+        label="Email"
+        aria-label="Email"
+        onChange={(e) => setEmail(e.target.value)}
+      />
+      <Button
+        data-store-out-of-stock-button
+        type="submit"
+        disabled={disabled}
+        variant="primary"
+        icon={buttonIcon}
+        iconPosition="left"
+      >
+        {buttonText}
+      </Button>
+    </UIOutOfStock>
   )
 }
 

src/components/product/OutOfStock/out-of-stock.scss

@@ -5,19 +5,19 @@
   flex-direction: column;
   margin-top: var(--fs-spacing-4);
 
-  .text__title-subsection {
+  [data-out-of-stock-title] {
     margin-bottom: var(--fs-spacing-0);
   }
-}
 
-[data-store-out-of-stock-button] {
-  width: 100%;
-  margin-top: var(--fs-spacing-3);
-}
+  [data-out-of-stock-message] {
+    display: flex;
+    column-gap: var(--fs-spacing-0);
+    align-items: center;
+    margin-bottom: var(--fs-spacing-3);
+  }
 
-[data-store-out-of-stock-subtitle] {
-  display: flex;
-  column-gap: var(--fs-spacing-0);
-  align-items: center;
-  margin-bottom: var(--fs-spacing-3);
+  [data-store-button] {
+    width: 100%;
+    margin-top: var(--fs-spacing-3);
+  }
 }