@faststore/core 3.44.2 → 3.46.0

package/src/components/account/orders/MyAccountOrderDetails/MyAccountStatusCard/styles.scss

@@ -0,0 +1,205 @@
+[data-fs-order-status-card] {
+  // --------------------------------------------------------
+  // Design Tokens for Order Status Card
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-order-status-card-gap                     : var(--fs-spacing-1);
+  --fs-order-status-card-padding                 : var(--fs-spacing-3) var(--fs-spacing-2);
+  --fs-order-status-card-bkg-color               : var(--fs-color-neutral-1);
+  --fs-order-status-card-border-radius           : var(--fs-border-radius-medium);
+
+  // Step Icon
+  --fs-order-status-step-icon-size              : var(--fs-spacing-4);
+  --fs-order-status-step-icon-half-size         : calc(var(--fs-order-status-step-icon-size) / 2);
+  --fs-order-status-step-icon-border            : var(--fs-border-width) solid var(--fs-border-color-light);
+  --fs-order-status-step-icon-border-radius     : var(--fs-border-radius-circle);
+  --fs-order-status-step-icon-margin            : var(--fs-spacing-0);
+
+  // Step Icon States
+  --fs-order-status-step-icon-completed-color   : #08a822;
+  --fs-order-status-step-icon-failed-color      : #5c5c5c;
+  --fs-order-status-step-icon-loading-color     : var(--fs-color-neutral-4);
+  --fs-order-status-step-icon-text-color        : var(--fs-color-neutral-0);
+
+  // Step Content
+  --fs-order-status-step-content-gap            : var(--fs-spacing-0);
+  --fs-order-status-step-label-size             : var(--fs-text-size-2);
+  --fs-order-status-step-label-weight           : var(--fs-text-weight-medium);
+  --fs-order-status-step-label-line-height      : 1.25;
+  --fs-order-status-step-details-size           : var(--fs-text-size-1);
+
+  // Step States Colors
+  --fs-order-status-step-loading-color          : var(--fs-color-neutral-5);
+  --fs-order-status-step-completed-color        : var(--fs-color-text);
+  --fs-order-status-step-failed-color           : var(--fs-color-text);
+  --fs-order-status-step-not-started-color      : var(--fs-color-disabled-text);
+
+  // Connector
+  --fs-order-status-connector-color             : var(--fs-border-color-light);
+  --fs-order-status-connector-completed-color   : var(--fs-order-status-step-icon-completed-color);
+  --fs-order-status-connector-spacing           : var(--fs-spacing-0);
+
+  // Desktop Specific
+  --fs-order-status-step-desktop-height         : 7.75rem;
+  --fs-order-status-step-desktop-min-width      : 6.25rem;
+  --fs-order-status-step-desktop-max-width      : 9rem;
+  --fs-order-status-connector-desktop-spacing   : 0.625rem;
+
+  [data-fs-card-body] {
+    @include media(">=notebook") {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  [data-fs-order-status-content] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--fs-order-status-card-gap);
+    width: 100%;
+    overflow-x: auto;
+
+    @include media(">=notebook") {
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+    }
+  }
+
+  [data-fs-shipping-step] {
+    position: relative;
+    display: flex;
+    gap: var(--fs-spacing-1);
+    align-items: center;
+    width: 100%;
+    padding: var(--fs-order-status-card-padding);
+
+    &[data-fs-shipping-status="loading"] {
+      z-index: -1;
+      background-color: var(--fs-order-status-card-bkg-color);
+      border-radius: var(--fs-order-status-card-border-radius);
+    }
+
+    @include media(">=notebook") {
+      flex: 1;
+      flex-direction: column;
+      gap: var(--fs-spacing-2);
+      align-items: center;
+      width: clamp(var(--fs-order-status-step-desktop-min-width), calc((100% - (5 * var(--fs-spacing-2))) / 6), var(--fs-order-status-step-desktop-max-width));
+      min-width: var(--fs-order-status-step-desktop-min-width);
+      max-width: var(--fs-order-status-step-desktop-max-width);
+      height: var(--fs-order-status-step-desktop-height);
+      text-align: center;
+    }
+
+    [data-fs-shipping-step-icon] {
+      position: relative;
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+      width: var(--fs-order-status-step-icon-size);
+      height: var(--fs-order-status-step-icon-size);
+      margin: var(--fs-order-status-step-icon-margin);
+
+      [data-fs-icon] {
+        color: var(--fs-color-neutral-0);
+      }
+
+      &[data-fs-shipping-step-completed] {
+        background-color: var(--fs-order-status-step-icon-completed-color);
+        border-radius: var(--fs-order-status-step-icon-border-radius);
+
+        [class*="icon"] {
+          color: var(--fs-order-status-step-icon-text-color);
+        }
+      }
+
+      &[data-fs-shipping-step-failed] {
+        background-color: var(--fs-order-status-step-icon-failed-color);
+        border-radius: var(--fs-order-status-step-icon-border-radius);
+
+        [class*="icon"] {
+          color: var(--fs-order-status-step-icon-text-color);
+        }
+      }
+
+      &[data-fs-shipping-step-loading] {
+        background-color: var(--fs-order-status-step-icon-loading-color);
+        border-radius: var(--fs-order-status-step-icon-border-radius);
+
+        [class*="icon"] {
+          color: var(--fs-order-status-step-icon-text-color);
+        }
+      }
+
+      &:not([data-fs-shipping-step-completed]):not([data-fs-shipping-step-loading]) {
+        border: var(--fs-order-status-step-icon-border);
+        border-radius: var(--fs-order-status-step-icon-border-radius);
+      }
+    }
+
+    [data-fs-shipping-step-content] {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      gap: var(--fs-order-status-step-content-gap);
+
+      @include media(">=notebook") {
+        text-align: center;
+      }
+    }
+
+    [data-fs-shipping-step-label] {
+      font-size: var(--fs-order-status-step-label-size);
+      font-weight: var(--fs-order-status-step-label-weight);
+      line-height: var(--fs-order-status-step-label-line-height);
+      color: var(--fs-color-text);
+    }
+
+    [data-fs-shipping-step-details] {
+      display: flex;
+      font-size: var(--fs-order-status-step-details-size);
+      color: var(--fs-color-text-light);
+
+      @include media(">=notebook") {
+        flex-direction: column;
+      }
+    }
+
+    [data-fs-shipping-connector] {
+      position: absolute;
+      background-color: var(--fs-order-status-connector-color);
+
+      &[data-fs-shipping-connector-status="completed"] {
+        background-color: var(--fs-order-status-connector-completed-color);
+      }
+    }
+  }
+
+  [data-fs-shipping-status="loading"] {
+    [data-fs-shipping-step-label] {
+      color: var(--fs-order-status-step-loading-color);
+    }
+  }
+
+  [data-fs-shipping-status="completed"] {
+    [data-fs-shipping-step-label] {
+      color: var(--fs-order-status-step-completed-color);
+    }
+  }
+
+  [data-fs-shipping-status="not-started"] {
+    [data-fs-shipping-step-label] {
+      color: var(--fs-order-status-step-not-started-color);
+    }
+  }
+
+  [data-fs-shipping-status="failed"] {
+    [data-fs-shipping-step-label] {
+      color: var(--fs-order-status-step-failed-color);
+    }
+  }
+}

package/src/components/account/orders/MyAccountOrderDetails/MyAccountStatusCard/useConnectorPositioning.ts

@@ -0,0 +1,74 @@
+import { useEffect } from 'react'
+import useScreenResize from 'src/sdk/ui/useScreenResize'
+
+export function useConnectorPositioning(
+  containerRef: React.RefObject<HTMLDivElement>
+) {
+  const { isDesktop, isMobile, isTablet } = useScreenResize()
+
+  useEffect(() => {
+    const container = containerRef.current
+    if (!container) return
+
+    const calculateContainerGap = () => {
+      // Get all steps
+      const steps = container.querySelectorAll(
+        '[data-fs-shipping-step]'
+      ) as NodeListOf<HTMLElement>
+
+      if (steps.length === 0) return
+
+      // Get container width
+      const containerWidth = container.offsetWidth
+
+      // Calculate total step width
+      let totalStepWidth = 0
+      steps.forEach((step) => {
+        totalStepWidth += step.offsetWidth
+      })
+
+      // Calculate gap width
+      const numberOfGaps = steps.length - 1
+      const totalGapSpace = containerWidth - totalStepWidth
+      const gapWidth = totalGapSpace / numberOfGaps
+
+      return gapWidth
+    }
+
+    const setUpConnectorPositioning = () => {
+      const connectors = container.querySelectorAll(
+        '[data-fs-shipping-connector]'
+      ) as NodeListOf<HTMLElement>
+
+      if (connectors.length === 0) return
+
+      if (isDesktop) {
+        const containerGap = calculateContainerGap()
+        connectors.forEach((connector) => {
+          connector.style.top =
+            'calc(1rem + var(--fs-order-status-step-icon-margin) + var(--fs-order-status-step-icon-half-size))'
+          connector.style.left =
+            'calc(50% + var(--fs-order-status-step-icon-half-size) + var(--fs-order-status-card-gap))'
+          connector.style.width = `calc(((50% - var(--fs-order-status-step-icon-half-size) - var(--fs-order-status-card-gap)) * 2) + ${containerGap}px)`
+          connector.style.height = 'var(--fs-border-width)'
+        })
+      } else {
+        connectors.forEach((connector) => {
+          connector.style.top =
+            'calc(50% + var(--fs-order-status-step-icon-half-size) + var(--fs-order-status-connector-spacing))'
+          connector.style.left =
+            'calc(var(--fs-spacing-2) + var(--fs-order-status-step-icon-half-size) + var(--fs-order-status-step-icon-margin))'
+          connector.style.width = 'var(--fs-border-width)'
+          connector.style.height =
+            'calc((50% - var(--fs-order-status-step-icon-half-size)) + var(--fs-order-status-card-gap) + (50% - var(--fs-order-status-step-icon-half-size)) - (var(--fs-order-status-connector-spacing) * 2))'
+        })
+      }
+    }
+
+    // Calculate on mount and window resize
+    setUpConnectorPositioning()
+    window.addEventListener('resize', setUpConnectorPositioning)
+
+    return () => window.removeEventListener('resize', setUpConnectorPositioning)
+  }, [containerRef, isDesktop])
+}

package/src/components/account/orders/MyAccountOrderDetails/MyAccountSummaryCard/MyAccountSummaryCard.tsx

@@ -0,0 +1,92 @@
+import MyAccountCard from 'src/components/account/components/MyAccountCard'
+import { useFormatPrice } from 'src/components/account/utils/useFormatPrice'
+import { useSession } from 'src/sdk/session'
+
+// Interface for order totals (items, shipping, discounts)
+// TODO: Use type from API
+interface Total {
+  id: string
+  name: string
+  value: number
+}
+
+// Interface for payment transactions
+// TODO: Use type from API
+interface Transaction {
+  isActive: boolean
+  payments: Array<{
+    value: number
+    referenceValue: number
+  }>
+}
+
+interface MyAccountSummaryCardProps {
+  totals: Total[]
+  currencyCode: string
+  transactions: Transaction[]
+}
+
+function MyAccountSummaryCard({
+  totals,
+  currencyCode,
+  transactions,
+}: MyAccountSummaryCardProps) {
+  const formatPrice = useFormatPrice()
+
+  // Calculate any payment surcharges from active transactions
+  const calculatePaymentSurcharge = () => {
+    let surchargeAmount = 0
+
+    transactions.forEach((transaction) => {
+      if (transaction.isActive) {
+        transaction.payments.forEach((payment) => {
+          const baseAmount =
+            payment.referenceValue === 0
+              ? payment.value
+              : payment.referenceValue
+          const additionalCharge = payment.value - baseAmount
+          surchargeAmount += additionalCharge
+        })
+      }
+    })
+
+    return surchargeAmount
+  }
+
+  const getDisplayTotals = () => {
+    const surchargeAmount = calculatePaymentSurcharge()
+
+    if (surchargeAmount > 0) {
+      const interestLineItem = {
+        id: 'Interest',
+        name: 'Interest',
+        value: surchargeAmount,
+      }
+
+      return [...totals, interestLineItem]
+    }
+
+    return totals
+  }
+
+  const displayTotals = getDisplayTotals()
+
+  const totalAmount = displayTotals.reduce((sum, total) => sum + total.value, 0)
+
+  return (
+    <MyAccountCard title="Summary" data-fs-order-summary-card>
+      {displayTotals.map((total) => (
+        <div key={total.id} data-fs-order-summary-item>
+          <span>{total.name}</span>
+          <span>{formatPrice(total.value, currencyCode)}</span>
+        </div>
+      ))}
+      <div data-fs-order-summary-item data-fs-order-summary-total>
+        <span>Total</span>
+        <span>{formatPrice(totalAmount, currencyCode)}</span>
+      </div>
+    </MyAccountCard>
+  )
+}
+
+export default MyAccountSummaryCard

package/src/components/account/orders/MyAccountOrderDetails/MyAccountSummaryCard/index.ts

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

package/src/components/account/orders/MyAccountOrderDetails/MyAccountSummaryCard/styles.scss

@@ -0,0 +1,45 @@
+[data-fs-order-summary-card] {
+  // --------------------------------------------------------
+  // Design Tokens for Order Summary Card
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-order-summary-card-gap                     : var(--fs-spacing-1);
+  --fs-order-summary-card-item-font-size          : var(--fs-text-size-2);
+  --fs-order-summary-card-item-line-height        : var(--fs-spacing-4);
+  --fs-order-summary-card-item-letter-spacing     : -2%;
+  --fs-order-summary-card-item-font-weight        : var(--fs-text-weight-regular);
+  --fs-order-summary-card-total-font-weight       : var(--fs-text-weight-semibold);
+  --fs-order-summary-card-total-border            : 1px solid var(--fs-border-color-light);
+  --fs-order-summary-card-total-margin-top        : var(--fs-spacing-2);
+  --fs-order-summary-card-total-padding-top       : var(--fs-spacing-2);
+
+  [data-fs-card-body] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--fs-order-summary-card-gap);
+
+    [data-fs-order-summary-item] {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      span {
+        font-size: var(--fs-order-summary-card-item-font-size);
+        font-weight: var(--fs-order-summary-card-item-font-weight);
+        line-height: var(--fs-order-summary-card-item-line-height);
+        letter-spacing: var(--fs-order-summary-card-item-letter-spacing);
+      }
+
+      &[data-fs-order-summary-total] {
+        padding-top: var(--fs-order-summary-card-total-padding-top);
+        margin-top: var(--fs-order-summary-card-total-margin-top);
+        border-top: var(--fs-order-summary-card-total-border);
+
+        span {
+          font-weight: var(--fs-order-summary-card-total-font-weight);
+        }
+      }
+    }
+  }
+}

package/src/components/account/orders/MyAccountOrderDetails/index.ts

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

package/src/components/account/orders/MyAccountOrderDetails/section.module.scss

@@ -0,0 +1,114 @@
+.page {
+  @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Badge/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Button/styles.scss";
+  @import "@faststore/ui/src/components/molecules/Card/styles.scss";
+  @import "../../components/MyAccountAccordion/styles.scss";
+  @import "../../components/MyAccountCard/styles.scss";
+  @import "../../components/MyAccountStatusBadge/styles.scss";
+  @import "./MyAccountSummaryCard/styles.scss";
+  @import "./MyAccountOrderedByCard/styles.scss";
+  @import "./MyAccountDeliveryCard/styles.scss";
+  @import "./MyAccountPaymentCard/styles.scss";
+  @import "./MyAccountDeliveryOptionAccordion/styles.scss";
+  @import "./MyAccountOrderActions/styles.scss";
+  @import "./MyAccountStatusCard/styles.scss";
+  @import "./MyAccountMoreInformationCard/styles.scss";
+
+  // --------------------------------------------------------
+  // Design Tokens
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-order-details-padding                        : var(--fs-spacing-5) 20px;
+
+  // Header
+  --fs-order-details-header-gap                     : var(--fs-spacing-3);
+  --fs-order-details-header-margin-bottom           : var(--fs-spacing-4);
+  --fs-order-details-header-padding                 : 0;
+  --fs-order-details-header-weight                  : var(--fs-text-weight-semibold);
+  --fs-order-details-header-size                    : var(--fs-text-size-4);
+  --fs-order-details-header-line-height             : 1.33;
+
+  // Content
+  --fs-order-details-content-gap                     : var(--fs-spacing-4);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  padding: var(--fs-order-details-padding);
+
+  @include media (">=notebook") {
+    --fs-order-details-padding                      : 0;
+  }
+
+  [data-fs-order-details-header] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--fs-order-details-header-gap);
+    align-items: flex-start;
+    justify-content: space-between;
+    padding: var(--fs-order-details-header-padding);
+    margin-bottom: var(--fs-order-details-header-margin-bottom);
+
+    @include media (">tablet") {
+      --fs-order-details-header-gap                 : var(--fs-spacing-2);
+      --fs-order-details-header-margin-bottom       : 0;
+      --fs-order-details-header-padding             : var(--fs-spacing-6) 0;
+
+      flex-flow: row;
+      align-items: center;
+    }
+
+    [data-fs-order-details-header-title] {
+      display: flex;
+      flex-direction: row;
+      gap: var(--fs-spacing-1);
+      align-items: center;
+
+      [data-fs-order-details-header-back-button] {
+        flex-shrink: 0;
+      }
+
+      [data-fs-order-details-header-title-wrapper] {
+        display: flex;
+        flex-direction: column;
+        gap: var(--fs-spacing-1);
+        align-items: center;
+
+        @include media(">tablet") {
+          flex-flow: row wrap;
+          align-items: center;
+        }
+      }
+
+      [data-fs-order-details-header-title-text] {
+        font-size: var(--fs-order-details-header-size);
+        font-weight: var(--fs-order-details-header-weight);
+        line-height: var(--fs-order-details-header-line-height);
+
+        @include truncate-title(1);
+      }
+    }
+  }
+
+  [data-fs-order-details-content] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--fs-order-details-content-gap);
+
+    @include media (">=notebook") {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    [data-fs-order-status-card] {
+      grid-column: span 2;
+    }
+
+    [data-fs-delivery-option-accordion] {
+      grid-column: span 2;
+    }
+  }
+}

package/src/components/account/utils/useFormatPrice.ts

@@ -0,0 +1,18 @@
+import { useSession } from 'src/sdk/session'
+import { useCallback } from 'react'
+
+// Format price values according to the specified currency (converts cents to standard units)
+export const useFormatPrice = () => {
+  const { locale } = useSession()
+
+  return useCallback(
+    (value: number, currencyCode: string) => {
+      return new Intl.NumberFormat(locale, {
+        style: 'currency',
+        currency: currencyCode,
+        minimumFractionDigits: 2,
+      }).format(value / 100)
+    },
+    [locale]
+  )
+}

package/src/components/cms/RenderSections.tsx

@@ -88,7 +88,7 @@ export const LazyLoadingSection = ({
   )
 }
 
-const RenderSectionsBase = ({
+export const RenderSectionsBase = ({
   sections = [],
   components,
   isInteractive,

package/src/components/navigation/Navbar/Navbar.tsx

@@ -10,7 +10,10 @@ import Link from 'src/components/ui/Link'
 import Logo from 'src/components/ui/Logo'
 import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
 
+import storeConfig from 'discovery.config'
 import dynamic from 'next/dynamic'
+import { OrganizationSignInButton } from 'src/components/account/MyAccountDrawer/OrganizationSignInButton'
+import { useSession } from 'src/sdk/session'
 import useScreenResize from 'src/sdk/ui/useScreenResize'
 import type { NavbarProps as SectionNavbarProps } from '../../sections/Navbar'
 
@@ -98,9 +101,16 @@ function Navbar({
   const scrollDirection = useScrollDirection()
   const { openNavbar, navbar: displayNavbar } = useUI()
   const { isDesktop, isMobile } = useScreenResize()
+  const { person, b2b } = useSession()
 
   const searchMobileRef = useRef<SearchInputRef>(null)
   const [searchExpanded, setSearchExpanded] = useState(false)
+  const isFaststoreMyAccountEnabled =
+    storeConfig.experimental?.enableFaststoreMyAccount
+
+  const isRepresentative = b2b?.isRepresentative
+
+  const isOrganizationEnabled = isFaststoreMyAccountEnabled && isRepresentative
 
   const handlerExpandSearch = useCallback(() => {
     setSearchExpanded(true)
@@ -176,7 +186,12 @@ function Navbar({
                 aria-hidden={!searchExpanded}
               />
             )}
-            {!isMobile && <ButtonSignIn.Component {...signInButton} />}
+            {!isMobile &&
+              (isOrganizationEnabled ? (
+                <OrganizationSignInButton icon={signInButton.icon} />
+              ) : (
+                <ButtonSignIn.Component {...signInButton} />
+              ))}
 
             <CartToggle {...cart} />
           </NavbarButtons.Component>

package/src/components/navigation/NavbarSlider/NavbarSlider.tsx

@@ -1,15 +1,18 @@
 import { useFadeEffect, useUI } from '@faststore/ui'
 import { Suspense } from 'react'
 
+import storeConfig from 'discovery.config'
+import NavbarLinks from 'src/components/navigation/NavbarLinks'
 import { ButtonSignInFallback } from 'src/components/ui/Button'
 import Link from 'src/components/ui/Link'
-import NavbarLinks from 'src/components/navigation/NavbarLinks'
 import Logo from 'src/components/ui/Logo'
 
 import type { NavbarProps } from '../Navbar'
 
-import styles from './section.module.scss'
+import { OrganizationSignInButton } from 'src/components/account/MyAccountDrawer/OrganizationSignInButton'
 import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
+import { useSession } from 'src/sdk/session'
+import styles from './section.module.scss'
 
 interface NavbarSliderProps {
   logo: NavbarProps['logo']
@@ -36,6 +39,14 @@ function NavbarSlider({
 
   const { closeNavbar } = useUI()
   const { fade, fadeOut } = useFadeEffect()
+  const { b2b } = useSession()
+
+  const isFaststoreMyAccountEnabled =
+    storeConfig.experimental?.enableFaststoreMyAccount
+
+  const isRepresentative = b2b?.isRepresentative
+
+  const isOrganizationEnabled = isFaststoreMyAccountEnabled && isRepresentative
 
   return (
     <NavbarSliderWrapper.Component
@@ -65,7 +76,11 @@ function NavbarSlider({
       </NavbarSliderContent.Component>
       <NavbarSliderFooter.Component {...NavbarSliderFooter.props}>
         <Suspense fallback={<ButtonSignInFallback />}>
-          <ButtonSignIn.Component {...signInButton} />
+          {isOrganizationEnabled ? (
+            <OrganizationSignInButton icon={signInButton.icon} />
+          ) : (
+            <ButtonSignIn.Component {...signInButton} />
+          )}
         </Suspense>
       </NavbarSliderFooter.Component>
     </NavbarSliderWrapper.Component>

package/src/customizations/src/myAccount/extensions/orders/[id]/after.tsx

@@ -0,0 +1,7 @@
+// placeholder for the after component
+
+function After() {
+  return <></>
+}
+
+export default After

package/src/customizations/src/myAccount/extensions/orders/[id]/before.tsx

@@ -0,0 +1,7 @@
+// placeholder for the before component
+
+function Before() {
+  return <></>
+}
+
+export default Before

package/src/customizations/src/myAccount/extensions/orders/after.tsx

@@ -0,0 +1,7 @@
+// placeholder for the after component
+
+function After() {
+  return <></>
+}
+
+export default After