@faststore/core 22.42.6

package/src/components/ui/Select/select.module.scss

@@ -0,0 +1,85 @@
+@import "src/styles/scaffold";
+
+.fs-select[data-fs-select] {
+  // --------------------------------------------------------
+  // Design Tokens for Select
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-select-height                      : var(--fs-spacing-6);
+  --fs-select-min-height                  : var(--fs-control-tap-size);
+  --fs-select-padding                     : var(--fs-spacing-1) var(--fs-spacing-5) var(--fs-spacing-1) var(--fs-spacing-2);
+
+  --fs-select-text-color                  : var(--fs-color-link);
+
+  --fs-select-border-radius               : var(--fs-border-radius);
+
+  --fs-select-bkg                         : transparent;
+  --fs-select-bkg-color-focus             : var(--fs-color-primary-bkg-light);
+  --fs-select-bkg-color-hover             : var(--fs-select-bkg-color-focus);
+
+  --fs-select-transition-timing           : var(--fs-transition-timing);
+  --fs-select-transition-property         : var(--fs-transition-property);
+  --fs-select-transition-function         : var(--fs-transition-function);
+
+  // Label
+  --fs-select-label-color                 : var(--fs-color-text-light);
+  --fs-select-label-margin-right          : var(--fs-spacing-1);
+
+  // Icon
+  --fs-select-icon-color                  : var(--fs-color-link);
+  --fs-select-icon-position-right         : var(--fs-spacing-2);
+
+  // Disabled
+  --fs-select-disabled-text-color         : var(--fs-color-disabled-text);
+  --fs-select-disabled-text-opacity       : 1;
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: fit-content;
+
+  select {
+    padding: var(--fs-select-padding);
+    color: var(--fs-select-text-color);
+    background: var(--fs-select-bkg);
+    border: 0;
+    border-radius: var(--fs-select-border-radius);
+    box-shadow: 0;
+    transition: var(--fs-select-transition-property) var(--fs-select-transition-timing) var(--fs-select-transition-function);
+    appearance: none;
+
+    @include focus-ring-visible;
+
+    &:focus { background-color: var(--fs-select-bkg-color-focus); }
+
+    &:hover:not(:disabled) { background-color: var(--fs-select-bkg-color-hover); }
+
+    &:disabled {
+      color: var(--fs-select-disabled-text-color);
+      cursor: not-allowed;
+      opacity: var(--fs-select-disabled-text-opacity);
+      + [data-fs-select-icon] { display: none; }
+    }
+
+    @include media("<notebook") { min-height: var(--fs-select-min-height); }
+
+    @include media(">=notebook") { height: var(--fs-select-height); }
+  }
+
+  [data-fs-select-label] {
+    margin-right: var(--fs-select-label-margin-right);
+    color: var(--fs-select-label-color);
+  }
+
+  [data-fs-select-icon] {
+    position: absolute;
+    right: var(--fs-select-icon-position-right);
+    color: var(--fs-select-icon-color);
+    pointer-events: none;
+  }
+}

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

@@ -0,0 +1,140 @@
+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-text-size"
+    value="var(--fs-text-size-legend)"
+  />
+</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)"
+  />
+</TokenTable>
+
+### Header
+
+<TokenTable>
+  <TokenRow
+    token="--fs-shipping-simulation-header-padding-top"
+    value="var(--fs-spacing-3)"
+  />
+</TokenTable>
+
+### Subtitle
+
+<TokenTable>
+  <TokenRow
+    token="--fs-shipping-simulation-subtitle-size"
+    value="var(--fs-text-size-2)"
+  />
+  <TokenRow
+    token="--fs-shipping-simulation-subtitle-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="var(--fs-border-radius)"
+  />
+</TokenTable>

package/src/components/ui/ShippingSimulation/ShippingSimulation.tsx

@@ -0,0 +1,109 @@
+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 && (
+        <>
+          <header data-fs-shipping-simulation-header>
+            <h3 data-fs-shipping-simulation-subtitle>Shipping options</h3>
+            <p className="text__body" data-fs-shipping-simulation-location>
+              {shippingLocation}
+            </p>
+          </header>
+
+          <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

package/src/components/ui/ShippingSimulation/index.ts

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

package/src/components/ui/ShippingSimulation/shipping-simulation.module.scss

@@ -0,0 +1,96 @@
+.fs-shipping-simulation {
+  // --------------------------------------------------------
+  // Design Tokens for Shipping Simulation
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-shipping-simulation-text-size                : var(--fs-text-size-legend);
+
+  // Title
+  --fs-shipping-simulation-title-padding-bottom     : var(--fs-spacing-2);
+
+  // Link
+  --fs-shipping-simulation-link-padding-top         : var(--fs-spacing-1);
+
+  // Header
+  --fs-shipping-simulation-header-padding-top       : var(--fs-spacing-3);
+
+  // Subtitle
+  --fs-shipping-simulation-subtitle-size            : var(--fs-text-size-2);
+  --fs-shipping-simulation-subtitle-weight          : var(--fs-text-weight-bold);
+  --fs-shipping-simulation-subtitle-line-height     : 1.5;
+
+  // Location
+  --fs-shipping-simulation-location-padding-bottom  : var(--fs-spacing-2);
+
+  // Table
+  --fs-shipping-simulation-table-row-bkg-color      : var(--fs-color-main-0);
+  --fs-shipping-simulation-table-row-even-bkg-color : transparent;
+
+  --fs-shipping-simulation-table-cell-padding       : var(--fs-spacing-2);
+  --fs-shipping-simulation-table-cell-text-size     : var(--fs-text-size-2);
+  --fs-shipping-simulation-table-cell-border-radius : var(--fs-border-radius);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  font-size: var(--fs-shipping-simulation-text-size);
+
+  [data-fs-shipping-simulation-title] {
+    padding-bottom: var(--fs-shipping-simulation-title-padding-bottom);
+  }
+
+  [data-fs-shipping-simulation-link] {
+    display: flex;
+    align-items: center;
+    padding-top: var(--fs-shipping-simulation-link-padding-top);
+
+    svg {
+      margin-left: var(--fs-spacing-0);
+    }
+  }
+
+  [data-fs-shipping-simulation-header] {
+    padding-top: var(--fs-shipping-simulation-header-padding-top);
+  }
+
+  [data-fs-shipping-simulation-subtitle] {
+    font-size: var(--fs-shipping-simulation-subtitle-size);
+    font-weight: var(--fs-shipping-simulation-subtitle-weight);
+    line-height: var(--fs-shipping-simulation-subtitle-line-height);
+  }
+
+  [data-fs-shipping-simulation-location] {
+    padding-bottom: var(--fs-shipping-simulation-location-padding-bottom);
+  }
+
+  [data-fs-shipping-simulation-table] {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  [data-fs-shipping-simulation-table-row] {
+    background-color: var(--fs-shipping-simulation-table-row-bkg-color);
+
+    &:nth-child(even) {
+      background-color: var(--fs-shipping-simulation-table-row-even-bkg-color);
+    }
+  }
+
+  [data-fs-shipping-simulation-table-cell] {
+    padding: var(--fs-shipping-simulation-table-cell-padding);
+    font-size: var(--fs-shipping-simulation-table-cell-text-size);
+
+    &:first-child {
+      border-top-left-radius: var(--fs-shipping-simulation-table-cell-border-radius);
+      border-bottom-left-radius: var(--fs-shipping-simulation-table-cell-border-radius);
+    }
+
+    &:last-child {
+      text-align: right;
+      border-top-right-radius: var(--fs-shipping-simulation-table-cell-border-radius);
+      border-bottom-right-radius: var(--fs-shipping-simulation-table-cell-border-radius);
+    }
+  }
+}

package/src/components/ui/ShippingSimulation/useShippingSimulation.ts

@@ -0,0 +1,225 @@
+import type { ChangeEvent } from 'react'
+import { useCallback, useEffect, useReducer } from 'react'
+
+import { useSession } from 'src/sdk/session'
+
+type InputProps = {
+  postalCode?: string
+  displayClearButton?: boolean
+  errorMessage?: string
+}
+
+type ShippingOptionProps = {
+  carrier: string
+  estimate: string
+  price: number
+}
+
+type ShippingSimulationProps = {
+  location?: string
+  options?: ShippingOptionProps[]
+}
+
+type State = {
+  input: InputProps
+  shippingSimulation: ShippingSimulationProps
+}
+
+type Action =
+  | {
+      type: 'update'
+      payload: State
+    }
+  | {
+      type: 'onInput'
+      payload: InputProps
+    }
+  | {
+      type: 'onError'
+      payload: Partial<InputProps>
+    }
+  | {
+      type: 'clear'
+    }
+
+// TODO Remove Mocked data after API integration
+const mockShippingOptions: ShippingOptionProps[] = [
+  {
+    carrier: 'Regular',
+    estimate: '12 days',
+    price: 21,
+  },
+  {
+    carrier: 'Fedex',
+    estimate: '12 days',
+    price: 23,
+  },
+  {
+    carrier: 'Same day',
+    estimate: '1 day',
+    price: 89,
+  },
+  {
+    carrier: 'DHL',
+    estimate: '1 day',
+    price: 100,
+  },
+]
+
+const mockShippingSimulation: ShippingSimulationProps = {
+  location: 'Street Default — Newark, NY',
+  options: mockShippingOptions,
+}
+
+const createEmptySimulation = () => ({
+  input: {
+    postalCode: '',
+    displayClearButton: false,
+    errorMessage: '',
+  },
+  shippingSimulation: {
+    location: '',
+    options: [],
+  },
+})
+
+const reducer = (state: State, action: Action) => {
+  const { type } = action
+
+  switch (type) {
+    case 'clear': {
+      return createEmptySimulation()
+    }
+
+    case 'update': {
+      const { payload } = action
+
+      return {
+        input: {
+          ...state.input,
+          ...payload.input,
+        },
+        shippingSimulation: {
+          ...state.shippingSimulation,
+          ...payload.shippingSimulation,
+        },
+      }
+    }
+
+    case 'onInput': {
+      const { payload } = action
+
+      return {
+        ...state,
+        input: {
+          ...payload,
+        },
+      }
+    }
+
+    case 'onError': {
+      const { payload } = action
+
+      return {
+        ...state,
+        input: {
+          ...state.input,
+          ...payload,
+        },
+      }
+    }
+
+    default:
+      throw new Error(`Action ${type} not implemented`)
+  }
+}
+
+export const useShippingSimulation = () => {
+  const { postalCode: sessionPostalCode } = useSession()
+  const [{ input, shippingSimulation }, dispatch] = useReducer(
+    reducer,
+    null,
+    createEmptySimulation
+  )
+
+  const { postalCode: shippingPostalCode } = input
+
+  useEffect(() => {
+    if (!sessionPostalCode || shippingPostalCode) {
+      return
+    }
+
+    // Use sessionPostalCode if there is no shippingPostalCode
+    // TODO update mock after API integration
+    dispatch({
+      type: 'update',
+      payload: {
+        input: {
+          postalCode: sessionPostalCode,
+          displayClearButton: true,
+          errorMessage: '',
+        },
+        shippingSimulation: {
+          location: mockShippingSimulation?.location,
+          options: mockShippingSimulation?.options ?? [],
+        },
+      },
+    })
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sessionPostalCode])
+
+  const handleSubmit = useCallback(() => {
+    try {
+      // TODO update mock after API integration
+      dispatch({
+        type: 'update',
+        payload: {
+          input: {
+            displayClearButton: true,
+            errorMessage: '',
+          },
+          shippingSimulation: {
+            location: `Street from ${shippingPostalCode} Postal Code.`,
+            options: mockShippingOptions ?? [],
+          },
+        },
+      })
+    } catch (error) {
+      dispatch({
+        type: 'onError',
+        payload: {
+          displayClearButton: true,
+          errorMessage: 'You entered an invalid Postal Code',
+        },
+      })
+    }
+  }, [shippingPostalCode])
+
+  const handleOnInput = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+    const currentValue = e.currentTarget.value
+
+    if (currentValue) {
+      dispatch({
+        type: 'onInput',
+        payload: {
+          postalCode: currentValue,
+          displayClearButton: false,
+          errorMessage: '',
+        },
+      })
+    } else {
+      dispatch({
+        type: 'clear',
+      })
+    }
+  }, [])
+
+  return {
+    input,
+    shippingSimulation,
+    dispatch,
+    handleSubmit,
+    handleOnInput,
+  }
+}