@faststore/core 3.44.2 → 3.45.0

package/src/components/account/MyAccountDrawer/ProfileSummary/ProfileSummary.tsx

@@ -0,0 +1,67 @@
+import { Button, Icon } from '@faststore/ui'
+import Link from 'next/link'
+import type { ReactNode } from 'react'
+import { useSession } from 'src/sdk/session'
+
+export type ProfileSummaryProps = {
+  onLogoutClick?: (storeConfig: unknown) => void
+  orgName: string
+  bordered?: boolean
+  showManageLink?: boolean
+  person: {
+    image?: ReactNode
+    name: string
+    role?: string
+  }
+}
+
+export const ProfileSummary = ({
+  onLogoutClick,
+  person: { image, name, role },
+  orgName,
+  bordered = false,
+  showManageLink = false,
+  ...otherProps
+}: ProfileSummaryProps) => {
+  const { b2b } = useSession()
+  return (
+    <section
+      data-fs-profile-summary
+      data-fs-profile-summary-bordered={bordered}
+      {...otherProps}
+    >
+      <div data-fs-profile-summary-header>
+        <h2 data-fs-profile-summary-org-name>{orgName}</h2>
+        {showManageLink && (
+          <Link
+            data-fs-profile-summary-org-link
+            href={
+              b2b?.unitId
+                ? `/buyer-portal/org-unit/${b2b?.unitId}`
+                : '/buyer-portal'
+            }
+          >
+            Manage <Icon name="OpenInNew" width={23} height={23} />
+          </Link>
+        )}
+      </div>
+      <div data-fs-profile-summary-person-actions>
+        <div data-fs-profile-summary-person-image>
+          {image ?? <Icon name="Profile" width={14} height={14} />}
+        </div>
+        <div data-fs-profile-summary-person-data>
+          <p data-fs-profile-summary-person-name>{name}</p>
+          {role && <p data-fs-profile-summary-person-role>{role}</p>}
+        </div>
+        <Button
+          data-fs-profile-summary-logout-button
+          onClick={onLogoutClick}
+          variant="tertiary"
+          size="small"
+        >
+          Logout
+        </Button>
+      </div>
+    </section>
+  )
+}

package/src/components/account/MyAccountDrawer/ProfileSummary/profile-summary.scss

@@ -0,0 +1,91 @@
+[data-fs-profile-summary] {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background-color: white;
+
+  &[data-fs-profile-summary-bordered="true"] {
+    border: var(--fs-border-width) solid #e0e0e0;
+    border-radius: var(--fs-border-radius);
+  }
+}
+
+[data-fs-profile-summary-header] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+  font-size: var(--fs-text-size-legend);
+  font-weight: var(--fs-text-weight-semibold);
+  border-bottom: var(--fs-border-width) solid #e0e0e0;
+
+  [data-fs-profile-summary-org-name] {
+    font-size: var(--fs-text-size-1);
+    font-weight: var(--fs-text-weight-medium);
+    color: black;
+  }
+
+  [data-fs-profile-summary-org-link] {
+    display: flex;
+    gap: var(--fs-spacing-1);
+    align-items: center;
+    font-size: var(--fs-text-size-1);
+    font-weight: var(--fs-text-weight-semibold);
+    color: var(--fs-color-link);
+    text-decoration: none;
+    transition: text-decoration 0.5s ease;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+[data-fs-profile-summary-person-actions] {
+  display: flex;
+  justify-content: space-between;
+  padding: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+
+  [data-fs-profile-summary-person-image] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--fs-spacing-6);
+    height: var(--fs-spacing-6);
+    margin-right: var(--fs-spacing-3);
+    overflow: hidden;
+    color: var(--fs-border-color-active);
+    background-color: #cbe9ff;
+    border-radius: var(--fs-border-radius-pill);
+  }
+
+  [data-fs-profile-summary-person-data] {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: var(--fs-spacing-0);
+    font-size: var(--fs-text-size-legend);
+
+    [data-fs-profile-summary-person-name] {
+      font-weight: var(--fs-text-weight-medium);
+      color: var(--fs-color-text);
+    }
+
+    [data-fs-profile-summary-person-role] {
+      font-weight: var(--fs-text-weight-semibold);
+      color: var(--fs-color-text-light);
+    }
+  }
+
+  [data-fs-profile-summary-logout-button] {
+    --fs-button-tertiary-text-color-hover: var(--fs-color-danger-text);
+    --fs-button-tertiary-text-color-active: var(--fs-color-danger-text);
+
+    [data-fs-button-wrapper] {
+      padding: calc(var(--fs-spacing-2) - var(--fs-spacing-0)) 1.375rem;
+      color: var(--fs-color-danger-text);
+      border: var(--fs-border-width) solid var(--fs-border-color-light);
+      border-radius: var(--fs-border-radius-pill);
+    }
+  }
+}

package/src/components/account/MyAccountLayout/MyAccountLayout.tsx

@@ -1,6 +1,6 @@
 import type { PropsWithChildren } from 'react'
-import MyAccountMenu from '../MyAccountMenu'
 import menuRoutes from 'src/customizations/src/myAccount/navigation'
+import MyAccountMenu from '../MyAccountMenu'
 import styles from '../section.module.scss'
 
 export type MyAccountLayoutProps = {}
@@ -17,7 +17,7 @@ const MyAccountLayout = ({
   return (
     <div className={styles.layout}>
       <MyAccountMenu accountName={mockedUserName} items={menuRoutes} />
-      {children}
+      <section>{children}</section>
     </div>
   )
 }

package/src/components/account/MyAccountLayout/styles.scss

@@ -1,5 +1,10 @@
 .layout {
+  @import "@faststore/ui/src/components/atoms/Badge/styles.scss";
   @import "@faststore/ui/src/components/atoms/Button/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Input/styles.scss";
+  @import "@faststore/ui/src/components/molecules/LinkButton/styles.scss";
+  @import "@faststore/ui/src/components/molecules/SearchInputField/styles.scss";
   @import "../MyAccountMenu/styles.scss";
 
   display: grid;
@@ -8,10 +13,9 @@
 
   @include media(">=notebook") {
     grid-template-rows: none;
-    grid-template-columns: max(300px) auto;
-    gap: var(--fs-spacing-8);
-    max-width: var(--fs-grid-max-width);
-    padding: 0;
+    grid-template-columns: max(300px) 1fr;
+    gap: var(--fs-spacing-3);
+    max-width: var(--fs-grid-breakpoint-desktop);
     margin: 0 auto;
   }
 }

package/src/components/account/MyAccountMenu/styles.scss

@@ -52,6 +52,7 @@
   &:hover,
   &[data-is-selected="true"] {
     background-color: var(--fs-color-tertiary-bkg-hover);
+    transition: background-color 0.5s ease;
   }
 
   &:active {
@@ -89,8 +90,8 @@
 @include media(">=notebook") {
   grid-template-rows: none;
   grid-template-columns: max(300px) 80%;
-  gap: var(--fs-spacing-8);
-  padding: 0 var(--fs-spacing-8);
+  gap: var(--fs-spacing-3);
+  padding: 0 var(--fs-spacing-3) 0 var(--fs-spacing-6);
 
   .menu {
     padding: 0;

package/src/components/account/components/BottomSheet/BottomSheet.tsx

@@ -0,0 +1,58 @@
+import type { ReactNode } from 'react'
+import {
+  Modal as UIModal,
+  type ModalProps,
+  type OverlayProps,
+} from '@faststore/ui'
+
+export interface BottomSheetProps extends Omit<ModalProps, 'title'> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+  /**
+   * A boolean value that represents the state of the BottomSheet
+   */
+  isOpen?: boolean
+  /**
+   * Represents the fade effect of the BottomSheet.
+   */
+  fade?: 'in' | 'out'
+  /**
+   * Props forwarded to the `Overlay` component.
+   */
+  overlayProps?: OverlayProps
+  /**
+   * This function is called whenever the user clicks outside
+   * the modal content
+   */
+  onDismiss?: () => void
+  children: ReactNode
+}
+
+function BottomSheet({
+  testId = 'fs-bottom-sheet',
+  isOpen,
+  fade = 'out',
+  children,
+  overlayProps,
+  onDismiss,
+  ...otherProps
+}: BottomSheetProps) {
+  return (
+    <UIModal
+      data-fs-modal={null}
+      data-fs-bottom-sheet
+      data-fs-bottom-sheet-state={fade}
+      isOpen={isOpen}
+      onDismiss={onDismiss}
+      testId={testId}
+      overlayProps={overlayProps}
+      {...otherProps}
+    >
+      {children}
+    </UIModal>
+  )
+}
+
+export default BottomSheet

package/src/components/account/components/BottomSheet/styles.scss

@@ -0,0 +1,35 @@
+[data-fs-bottom-sheet] {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: var(--fs-z-index-high);
+  width: 100%;
+  padding: var(--fs-spacing-3);
+  margin: 0;
+  background-color: var(--fs-color-body-bkg);
+  transition: transform var(--fs-transition-timing) ease-in;
+  transform: translateY(100%);
+
+  &[data-fs-bottom-sheet-state="in"] {
+    transform: translateY(0);
+  }
+
+  &[data-fs-bottom-sheet-state="out"] {
+    transform: translateY(100%);
+  }
+
+  [data-fs-modal-header] {
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--fs-spacing-1) 0 var(--fs-spacing-3);
+
+    [data-fs-modal-header-title] {
+      font-size: var(--fs-text-size-lead);
+      font-weight: var(--fs-text-weight-bold);
+      line-height: 1.2;
+    }
+  }
+}

package/src/components/account/components/MyAccountAccordion/MyAccountAccordion.tsx

@@ -0,0 +1,13 @@
+import { Accordion as UIAccordion, type AccordionProps } from '@faststore/ui'
+
+interface MyAccountAccordionProps extends AccordionProps {}
+
+function MyAccountAccordion({ children, ...props }: MyAccountAccordionProps) {
+  return (
+    <UIAccordion {...props} data-fs-my-account-accordion>
+      {children}
+    </UIAccordion>
+  )
+}
+
+export default MyAccountAccordion

package/src/components/account/components/MyAccountAccordion/MyAccountAccordionButton.tsx

@@ -0,0 +1,35 @@
+import {
+  AccordionButton as UIAccordionButton,
+  Icon as UIIcon,
+} from '@faststore/ui'
+import type { ReactNode } from 'react'
+
+interface MyAccountAccordionButtonProps {
+  title: string
+  summary: string
+  children?: ReactNode
+}
+
+function MyAccountAccordionButton({
+  title,
+  summary,
+  children,
+}: MyAccountAccordionButtonProps) {
+  return (
+    <UIAccordionButton
+      collapsedIcon={<UIIcon name="CaretDown" />}
+      expandedIcon={<UIIcon name="CaretUp" />}
+      data-fs-my-account-accordion-button
+      type="button"
+    >
+      <div data-fs-my-account-accordion-header>
+        <UIIcon name="Package" />
+        <span data-fs-my-account-accordion-header-title>{title}</span>
+      </div>
+      <p data-fs-my-account-accordion-summary>{summary}</p>
+      {children}
+    </UIAccordionButton>
+  )
+}
+
+export default MyAccountAccordionButton

package/src/components/account/components/MyAccountAccordion/MyAccountAccordionItem.tsx

@@ -0,0 +1,21 @@
+import { AccordionItem as UIAccordionItem } from '@faststore/ui'
+import type { ReactNode } from 'react'
+
+interface MyAccountAccordionItemProps {
+  index: number
+  children: ReactNode
+}
+
+function MyAccountAccordionItem({
+  children,
+  index,
+  ...props
+}: MyAccountAccordionItemProps) {
+  return (
+    <UIAccordionItem index={index} {...props} data-fs-my-account-accordion-item>
+      {children}
+    </UIAccordionItem>
+  )
+}
+
+export default MyAccountAccordionItem

package/src/components/account/components/MyAccountAccordion/MyAccountAccordionPanel.tsx

@@ -0,0 +1,16 @@
+import { AccordionPanel as UIAccordionPanel } from '@faststore/ui'
+import type { ReactNode } from 'react'
+
+interface MyAccountAccordionPanelProps {
+  children: ReactNode
+}
+
+function MyAccountAccordionPanel({ children }: MyAccountAccordionPanelProps) {
+  return (
+    <UIAccordionPanel>
+      <div data-fs-my-account-accordion-content>{children}</div>
+    </UIAccordionPanel>
+  )
+}
+
+export default MyAccountAccordionPanel

package/src/components/account/components/MyAccountAccordion/index.ts

@@ -0,0 +1,4 @@
+export { default as MyAccountAccordion } from './MyAccountAccordion'
+export { default as MyAccountAccordionButton } from './MyAccountAccordionButton'
+export { default as MyAccountAccordionItem } from './MyAccountAccordionItem'
+export { default as MyAccountAccordionPanel } from './MyAccountAccordionPanel'

package/src/components/account/components/MyAccountAccordion/styles.scss

@@ -0,0 +1,88 @@
+[data-fs-my-account-accordion] {
+  // --------------------------------------------------------
+  // Design Tokens
+  // --------------------------------------------------------
+
+  // Accordion
+  --fs-accordion-item-border-bottom-width          : 0;
+  --fs-accordion-button-padding                    : var(--fs-spacing-4);
+  --fs-accordion-button-font-size                  : var(--fs-text-size-base);
+  --fs-accordion-button-font-weight                : var(--fs-text-weight-regular);
+  --fs-accordion-panel-padding-bottom              : var(--fs-spacing-4);
+
+  background-color: var(--fs-color-neutral-0);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  border: var(--fs-border-width) solid var(--fs-border-color-light);
+  border-radius: var(--fs-border-radius);
+
+  [data-fs-my-account-accordion-button] {
+    width: 100%;
+
+    &[data-fs-accordion-button="expanded"], &:hover {
+      background: var(--fs-color-secondary-bkg-light-active);
+      border-radius: var(--fs-border-radius);
+    }
+
+    &[data-fs-accordion-button="expanded"] {
+      border-bottom: var(--fs-border-width) solid var(--fs-border-color-light);
+    }
+
+    [data-fs-button-wrapper] {
+      padding: var(--fs-spacing-4);
+
+      span:first-child {
+        width: 100%;
+        padding: 0;
+
+        @include media(">=notebook") {
+          display: flex;
+          flex: 1;
+          align-items: center;
+          justify-content: space-between;
+        }
+      }
+    }
+
+    [data-fs-my-account-accordion-header] {
+      display: flex;
+      gap: var(--fs-spacing-2);
+      align-items: center;
+
+      [data-fs-icon] {
+        flex-shrink: 0;
+        color: var(--fs-color-neutral-4);
+      }
+
+      [data-fs-my-account-accordion-header-title] {
+        font-size: var(--fs-text-size-3);
+        font-weight: var(--fs-text-weight-semibold);
+        line-height: 1.5;
+        color: var(--fs-color-text);
+        text-align: start;
+
+        @include truncate-title(1);
+      }
+    }
+
+    [data-fs-my-account-accordion-summary] {
+      flex-shrink: 0;
+      padding-left: calc(var(--fs-spacing-4) + var(--fs-spacing-2)); // icon + padding
+      font-size: var(--fs-text-size-1);
+      font-weight: var(--fs-text-weight-medium);
+      line-height: 1.5;
+      color: var(--fs-color-text-light);
+      text-align: start;
+    }
+  }
+
+  [data-fs-accordion-panel] {
+    [data-fs-my-account-accordion-content] {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+}

package/src/components/account/components/MyAccountCard/MyAccountCard.tsx

@@ -0,0 +1,13 @@
+import { type CardProps, Card as UICard } from '@faststore/ui'
+
+interface MyAccountCardProps extends CardProps {}
+
+function MyAccountCard({ children, ...props }: MyAccountCardProps) {
+  return (
+    <UICard {...props} data-fs-my-account-card>
+      {children}
+    </UICard>
+  )
+}
+
+export default MyAccountCard

package/src/components/account/components/MyAccountCard/index.ts

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

package/src/components/account/components/MyAccountCard/styles.scss

@@ -0,0 +1,23 @@
+[data-fs-card][data-fs-my-account-card] {
+  --fs-card-border-radius                           : var(--fs-spacing-0);
+
+  [data-fs-card-header] {
+    --fs-card-header-padding                        : 20px var(--fs-spacing-4);
+    --fs-card-header-bkg-color                      : var(--fs-color-body-bkg);
+    --fs-card-header-font-weight                    : var(--fs-text-weight-semibold);
+
+    font-size: var(--fs-text-size-3);
+
+    [data-fs-card-title] {
+      display: flex;
+      gap: var(--fs-spacing-3);
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+    }
+  }
+
+  [data-fs-card-body] {
+    --fs-card-body-padding                          : var(--fs-spacing-1) var(--fs-spacing-4) var(--fs-spacing-4);
+  }
+}

package/src/components/account/components/MyAccountStatusBadge/MyAccountStatusBadge.tsx

@@ -0,0 +1,28 @@
+import {
+  orderStatusMap,
+  type OrderStatusKey,
+  type OrderStatusMapValue,
+} from 'src/utils/userOrderStatus'
+
+function getStatusVariant({ status }: { status: string }) {
+  return (
+    (orderStatusMap[status as OrderStatusKey] as OrderStatusMapValue)
+      ?.variant || 'neutral'
+  )
+}
+
+function MyAccountStatusBadge({
+  status,
+  statusFallback,
+}: { status: string; statusFallback?: string }) {
+  return (
+    <span
+      data-fs-my-account-badge
+      data-fs-my-account-badge-variant={getStatusVariant({ status })}
+    >
+      {orderStatusMap[status as OrderStatusKey]?.label || statusFallback || '-'}
+    </span>
+  )
+}
+
+export default MyAccountStatusBadge

package/src/components/account/components/MyAccountStatusBadge/index.ts

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

package/src/components/account/components/MyAccountStatusBadge/styles.scss

@@ -0,0 +1,54 @@
+[data-fs-my-account-badge] {
+  // --------------------------------------------------------
+  // Design Tokens
+  // --------------------------------------------------------
+
+  // SITUATIONS
+  --fs-color-success-bkg: #e9fce3;
+  --fs-color-warning-bkg: #ffedcd;
+  --fs-color-neutral-bkg: #f5f5f5;
+
+  --fs-my-account-badge-padding                                  : var(--fs-spacing-0) var(--fs-spacing-2);
+  --fs-my-account-badge-line-height                              : 1;
+  --fs-my-account-badge-color                                    : var(--fs-color-text);
+  --fs-my-account-badge-border                                   : 1px none transparent;
+  --fs-my-account-badge-border-radius                            : var(--fs-border-radius-pill);
+  --fs-my-account-badge-success-bkg                              : var(--fs-color-success-bkg);
+  --fs-my-account-badge-success-border                           : var(--fs-color-success-bkg);
+  --fs-my-account-badge-warning-bkg                              : var(--fs-color-warning-bkg);
+  --fs-my-account-badge-warning-border                           : var(--fs-color-warning-bkg);
+  --fs-my-account-badge-neutral-bkg                              : var(--fs-color-neutral-bkg);
+  --fs-my-account-badge-neutral-border                           : var(--fs-color-neutral-bkg);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  display: inline-block;
+  width: fit-content;
+  min-width: -webkit-fill-available;
+  min-width: fit-content;
+  height: fit-content;
+  padding: var(--fs-my-account-badge-padding);
+  overflow: hidden;
+  line-height: var(--fs-my-account-badge-line-height);
+  color: var(--fs-my-account-badge-color);
+  white-space: nowrap;
+  border: var(--fs-my-account-badge-border);
+  border-radius: var(--fs-my-account-badge-border-radius);
+}
+
+[data-fs-my-account-badge][data-fs-my-account-badge-variant="success"] {
+  background-color: var(--fs-my-account-badge-success-bkg);
+  border-color: var(--fs-my-account-badge-success-border);
+}
+
+[data-fs-my-account-badge][data-fs-my-account-badge-variant="warning"] {
+  background-color: var(--fs-my-account-badge-warning-bkg);
+  border-color: var(--fs-my-account-badge-warning-border);
+}
+
+[data-fs-my-account-badge][data-fs-my-account-badge-variant="neutral"] {
+  background-color: var(--fs-my-account-badge-neutral-bkg);
+  border-color: var(--fs-my-account-badge-neutral-border);
+}