Feat: [Refinements] Creates ShippingSimulation

src/components/regionalization/Regionalization.stories.mdx

@@ -48,7 +48,7 @@ Regionalization uses a behavior from VTEX Intelligent Search called [Availabilit
 
 Stores that have more than one registered white label seller usually have specific inventories for each region. This is the case for supermarkets, for example.
 
-With the Regionalization feature enabled, if a customer enters their ZIP code while browsing the store (before checkout), only products available in the corresponding region will be displayed in the search results.
+With the Regionalization feature enabled, if a customer enters their Postal Code while browsing the store (before checkout), only products available in the corresponding region will be displayed in the search results.
 
 ### Steps
 

src/components/regionalization/RegionalizationInput/RegionalizationInput.tsx

@@ -34,7 +34,7 @@ function RegionInput({ closeModal }: Props) {
 
       closeModal()
     } catch (error) {
-      setErrorMessage('You entered an invalid Zip Code')
+      setErrorMessage('You entered an invalid Postal Code')
     }
   }
 
@@ -44,7 +44,7 @@ function RegionInput({ closeModal }: Props) {
         inputRef={inputRef}
         id="postal-code-input"
         error={errorMessage}
-        label="Zip Code"
+        label="Postal Code"
         actionable
         value={input}
         onInput={(e) => {

src/components/regionalization/RegionalizationModal/RegionalizationModalContent.tsx

@@ -39,7 +39,7 @@ function RegionalizationModalContent({
           <RegionalizationInput closeModal={() => onClose?.()} />
         </div>
         <Link href="/" data-fs-regionalization-modal-link>
-          {"Don't know my Postal Code"}
+          {"I don't know my Postal Code"}
           <Icon name="ArrowSquareOut" width={18} height={18} />
         </Link>
       </div>

src/components/sections/ProductDetails/ProductDetails.tsx

@@ -11,6 +11,7 @@ import { ImageGallery } from 'src/components/ui/ImageGallery'
 import Price from 'src/components/ui/Price'
 import ProductTitle from 'src/components/ui/ProductTitle'
 import QuantitySelector from 'src/components/ui/QuantitySelector'
+import ShippingSimulation from 'src/components/ui/ShippingSimulation'
 import { useBuyButton } from 'src/sdk/cart/useBuyButton'
 import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
 import { useProduct } from 'src/sdk/product/useProduct'
@@ -183,6 +184,8 @@ function ProductDetails({ product: staleProduct }: Props) {
           )}
         </section>
 
+        <ShippingSimulation />
+
         <section className="product-details__content">
           <article className="product-details__description">
             <h2 className="text__title-subsection">Description</h2>

src/components/sections/ProductDetails/product-details.scss

@@ -16,7 +16,7 @@
 
   @include media(">=tablet") {
     display: grid;
-    grid-template-rows: repeat(4, minmax(0, max-content));
+    grid-template-rows: repeat(2, minmax(0, min-content)) 270px minmax(0, max-content);
     grid-template-columns: repeat(12, 1fr);
     row-gap: 0;
     column-gap: var(--fs-spacing-4);
@@ -66,12 +66,12 @@
   }
 
   @include media(">=tablet") {
-    grid-row: 2 / span 3;
+    grid-row: 2;
     grid-column: 8 / span 5;
+    height: 100%;
     padding: var(--fs-spacing-5);
     border: var(--fs-border-width) solid var(--fs-border-color-light);
     border-top: 0;
-    border-radius: 0 0 var(--fs-border-radius) var(--fs-border-radius);
   }
 
   @include media(">=notebook") { grid-column: 9 / span 4; }

src/components/ui/ImageGallery/image-gallery.module.scss

@@ -24,7 +24,7 @@
 
   @include media(">=tablet") {
     left: 0;
-    grid-row: 1 / span 2;
+    grid-row: 1 / span 3;
     grid-column: span 7;
     width: 100%;
     margin-bottom: var(--fs-spacing-7);

src/components/ui/InputText/InputText.tsx

@@ -36,6 +36,7 @@ type ActionableInputText =
       onSubmit?: never
       onClear?: never
       buttonActionText?: string
+      displayClearButton?: never
     }
   | {
       /**
@@ -54,6 +55,10 @@ type ActionableInputText =
        * The text displayed on the Button. Suggestion: maximum 9 characters.
        */
       buttonActionText?: string
+      /**
+       * Boolean that controls the clear button.
+       */
+      displayClearButton?: boolean
     }
 
 export type InputTextProps = DefaultProps &
@@ -65,6 +70,7 @@ const InputText = ({
   label,
   type = 'text',
   error,
+  displayClearButton,
   actionable,
   buttonActionText = 'Apply',
   onSubmit,
@@ -97,7 +103,7 @@ const InputText = ({
       <UILabel htmlFor={id}>{label}</UILabel>
 
       {shouldDisplayButton &&
-        (error ? (
+        (displayClearButton || error ? (
           <Button
             variant="tertiary"
             data-fs-button-icon

src/components/ui/ShippingSimulation/ShippingSimulation.stories.mdx

@@ -0,0 +1,153 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+import ShippingSimulation from '.'
+import {
+  TokenTable,
+  TokenRow,
+  TokenDivider,
+} from 'src/../.storybook/components'
+
+<Meta
+  title="Features/ShippingSimulation"
+  component={ShippingSimulation}
+  argTypes={{
+    testId: {
+      table: {
+        disable: true,
+      },
+    },
+  }}
+/>
+
+export const TemplateProvider = (args) => {
+  return <ShippingSimulation {...args} style={{ border: 0 }} />
+}
+
+<header>
+
+# Shipping Simulation
+
+This feature lets customers set the `PostalCode` and see the shipping options in the `PDP`.
+
+</header>
+
+## Overview
+
+The `ShippingSimulation` component uses [FastStore UI Table](https://www.faststore.dev/reference/ui/molecules/Table), and [InputText](/docs/atoms-inputtext-⚠%EF%B8%8F--default) as base.
+
+### Steps
+
+1. First, the available `ShippingSimulation` loads if any `PostalCode` is set using the [Regionalization](/docs/features-regionalization-overview--default-button).
+2. If there is no `PostalCode` in the [Regionalization](/docs/features-regionalization-overview--default-button), the user can set the desired shipping `PostalCode`.
+3. Updates `ShippingSimulation`.
+4. Gets notified if there are no available options.
+
+---
+
+## Usage
+
+`import ShippingSimulation from 'src/components/ui/ShippingSimulation'`
+
+<Canvas>
+  <Story name="default">{TemplateProvider.bind({})}</Story>
+</Canvas>
+
+<TokenTable>
+  <TokenRow
+    token="--fs-shipping-simulation-font-size"
+    value="var(--fs-text-size-legend)"
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-shipping-simulation-padding"
+    value="var(--fs-spacing-5)"
+  />
+  <TokenRow
+    token="--fs-shipping-simulation-border-width"
+    value="var(--fs-border-width)"
+  />
+  <TokenRow
+    token="--fs-shipping-simulation-border-color"
+    value="var(--fs-border-color-light)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-shipping-simulation-border-radius-bottom"
+    value="var(--fs-border-radius)"
+  />
+</TokenTable>
+
+---
+
+## Nested Elements
+
+### Title
+
+<TokenTable>
+  <TokenRow
+    token="--fs-shipping-simulation-title-padding-bottom"
+    value="var(--fs-spacing-2)"
+  />
+</TokenTable>
+
+### Link
+
+<TokenTable>
+  <TokenRow
+    token="--fs-shipping-simulation-link-padding-top"
+    value="var(--fs-spacing-1)"
+  />
+  <TokenRow
+    token="--fs-shipping-simulation-link-padding-bottom"
+    value="var(--fs-spacing-4)"
+  />
+</TokenTable>
+
+### Subtitle
+
+<TokenTable>
+  <TokenRow
+    token="--fs-shipping-simulation-subtitle-text-size"
+    value="var(--fs-text-size-2)"
+  />
+  <TokenRow
+    token="--fs-shipping-simulation-subtitle-text-weight"
+    value="var(--fs-text-weight-bold)"
+  />
+  <TokenRow token="--fs-shipping-simulation-subtitle-line-height" value="1.5" />
+</TokenTable>
+
+### Location
+
+<TokenTable>
+  <TokenRow
+    token="--fs-shipping-simulation-location-padding-bottom"
+    value="var(--fs-spacing-2)"
+  />
+</TokenTable>
+
+### Table
+
+<TokenTable>
+  <TokenRow
+    token="--fs-shipping-simulation-table-row-bkg-color"
+    value="var(--fs-color-main-0)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-shipping-simulation-table-row-even-bkg-color"
+    value="transparent"
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-shipping-simulation-table-cell-padding"
+    value="var(--fs-spacing-2)"
+  />
+  <TokenRow
+    token="--fs-shipping-simulation-table-cell-text-size"
+    value="var(--fs-text-size-2)"
+  />
+  <TokenRow
+    token="--fs-shipping-simulation-table-cell-border-radius"
+    value=".25rem"
+  />
+</TokenTable>

src/components/ui/ShippingSimulation/ShippingSimulation.tsx

@@ -0,0 +1,107 @@
+import { Table, TableBody, TableCell, TableRow } from '@faststore/ui'
+import type { HTMLAttributes } from 'react'
+
+import Price from 'src/components/ui/Price'
+import { usePriceFormatter } from 'src/sdk/product/useFormattedPrice'
+
+import Icon from '../Icon'
+import InputText from '../InputText'
+import Link from '../Link'
+import styles from './shipping-simulation.module.scss'
+import { useShippingSimulation } from './useShippingSimulation'
+
+interface ShippingSimulationProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress,
+   * testing-library, and jest).
+   */
+  testId?: string
+}
+
+function ShippingSimulation({
+  testId = 'store-shipping-simulation',
+  ...otherProps
+}: ShippingSimulationProps) {
+  const { dispatch, input, shippingSimulation, handleSubmit, handleOnInput } =
+    useShippingSimulation()
+
+  const {
+    postalCode: shippingPostalCode,
+    displayClearButton,
+    errorMessage,
+  } = input
+
+  const { location: shippingLocation, options: shippingOptions } =
+    shippingSimulation
+
+  const formatter = usePriceFormatter()
+
+  const hasShippingOptions = !!shippingOptions && shippingOptions.length > 0
+
+  return (
+    <section
+      className={styles.fsShippingSimulation}
+      data-fs-shipping-simulation
+      data-fs-shipping-simulation-empty={!hasShippingOptions ? 'true' : 'false'}
+      data-testid={testId}
+      {...otherProps}
+    >
+      <h2 className="text__title-subsection" data-fs-shipping-simulation-title>
+        Shipping
+      </h2>
+
+      <InputText
+        actionable
+        error={errorMessage}
+        id="shipping-postal-code"
+        label="Postal Code"
+        value={shippingPostalCode}
+        onInput={handleOnInput}
+        onSubmit={handleSubmit}
+        onClear={() => dispatch({ type: 'clear' })}
+        displayClearButton={displayClearButton}
+      />
+
+      <Link href="/" data-fs-shipping-simulation-link>
+        {"I don't know my Postal Code"}
+        <Icon name="ArrowSquareOut" width={18} height={18} />
+      </Link>
+
+      {hasShippingOptions && (
+        <>
+          <h3 data-fs-shipping-simulation-subtitle>Shipping options</h3>
+          <p className="text__body" data-fs-shipping-simulation-location>
+            {shippingLocation}
+          </p>
+
+          <Table data-fs-shipping-simulation-table>
+            <TableBody>
+              {shippingOptions.map((option) => (
+                <TableRow
+                  key={option.carrier}
+                  data-fs-shipping-simulation-table-row
+                >
+                  <TableCell data-fs-shipping-simulation-table-cell>
+                    {option.carrier}
+                  </TableCell>
+                  <TableCell data-fs-shipping-simulation-table-cell>
+                    {option.estimate}
+                  </TableCell>
+                  <TableCell data-fs-shipping-simulation-table-cell>
+                    <Price
+                      formatter={formatter}
+                      value={option.price}
+                      SRText="price"
+                    />
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </>
+      )}
+    </section>
+  )
+}
+
+export default ShippingSimulation

src/components/ui/ShippingSimulation/index.tsx

@@ -0,0 +1 @@
+export { default } from './ShippingSimulation'