@faststore/core 4.4.0-dev.0 → 4.4.0-dev.1

package/src/components/account/{MyAccountDrawer → Drawer}/ProfileSummary/ProfileSummary.tsx

@@ -1,6 +1,7 @@
 import { Button, Icon } from '@faststore/ui'
 import Link from 'next/link'
 import type { ReactNode } from 'react'
+import { useAccountNavigationLabels } from 'src/sdk/account/accountPageContext'
 import { useSession } from 'src/sdk/session'
 
 export type ProfileSummaryProps = {
@@ -8,6 +9,8 @@ export type ProfileSummaryProps = {
   orgName: string
   bordered?: boolean
   showManageLink?: boolean
+  manageLabel?: string
+  logoutLabel?: string
   person: {
     image?: ReactNode
     name: string
@@ -21,9 +24,16 @@ export const ProfileSummary = ({
   orgName,
   bordered = false,
   showManageLink = false,
+  manageLabel: manageLabelProp,
+  logoutLabel: logoutLabelProp,
   ...otherProps
 }: ProfileSummaryProps) => {
   const { b2b } = useSession()
+  const navigationLabels = useAccountNavigationLabels()
+  const manageLabel =
+    manageLabelProp ?? navigationLabels?.manageLabel ?? 'Manage'
+  const logoutLabel =
+    logoutLabelProp ?? navigationLabels?.logoutLabel ?? 'Logout'
 
   return (
     <section
@@ -38,7 +48,7 @@ export const ProfileSummary = ({
             data-fs-profile-summary-org-link
             href={`/pvt/organization-account/org-unit/${b2b?.unitId}`}
           >
-            Manage <Icon name="OpenInNew" width={23} height={23} />
+            {manageLabel} <Icon name="OpenInNew" width={23} height={23} />
           </Link>
         )}
       </div>
@@ -58,7 +68,7 @@ export const ProfileSummary = ({
           variant="tertiary"
           size="small"
         >
-          Logout
+          {logoutLabel}
         </Button>
       </div>
     </section>

package/src/components/account/Layout/Layout.tsx

@@ -0,0 +1,46 @@
+import type { PropsWithChildren } from 'react'
+import menuRoutes from 'src/customizations/src/myAccount/navigation'
+import {
+  type AccountNavigationLabels,
+  USER_DETAILS_ROUTE,
+  getExtraMyAccountRoutes,
+  getMyAccountRoutes,
+} from 'src/sdk/account/getMyAccountRoutes'
+import Menu from '../Menu'
+import styles from '../section.module.scss'
+
+export type LayoutProps = {
+  accountName: string
+  isRepresentative?: boolean
+  navigationLabels?: AccountNavigationLabels
+}
+
+const ROUTES_ONLY_FOR_REPRESENTATIVE = [USER_DETAILS_ROUTE]
+
+const Layout = ({
+  children,
+  accountName,
+  isRepresentative = true,
+  navigationLabels,
+}: PropsWithChildren<LayoutProps>) => {
+  const menuItems = navigationLabels
+    ? getMyAccountRoutes({
+        routes: getExtraMyAccountRoutes(menuRoutes),
+        labels: navigationLabels,
+      })
+    : menuRoutes
+
+  const routes = isRepresentative
+    ? menuItems
+    : menuItems.filter(
+        ({ route }) => !ROUTES_ONLY_FOR_REPRESENTATIVE.includes(route)
+      )
+
+  return (
+    <section className={styles.layout}>
+      <Menu accountName={accountName} items={routes} />
+      <div data-fs-account-layout-content>{children}</div>
+    </section>
+  )
+}
+export default Layout

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

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

package/src/components/account/{MyAccountLayout → Layout}/styles.scss

@@ -9,8 +9,8 @@
   @include meta.load-css("~@faststore/ui/src/components/atoms/Input/styles.scss");
   @include meta.load-css("~@faststore/ui/src/components/molecules/LinkButton/styles.scss");
   @include meta.load-css("~@faststore/ui/src/components/molecules/SearchInputField/styles.scss");
-  @include meta.load-css("../MyAccountMenu/styles.scss");
-  @include meta.load-css("../components/MyAccountHeader/styles.scss");
+  @include meta.load-css("../Menu/styles.scss");
+  @include meta.load-css("../components/Header/styles.scss");
 
   display: grid;
   grid-template-rows: auto 1fr;

package/src/components/account/{MyAccountMenu/MyAccountMenu.tsx → Menu/Menu.tsx}

@@ -3,6 +3,7 @@ import { useRouter } from 'next/router'
 
 import styles from '../section.module.scss'
 
+import { useAccountNavigationLabels } from 'src/sdk/account/accountPageContext'
 import useScreenResize from 'src/sdk/ui/useScreenResize'
 
 interface NavItem {
@@ -10,14 +11,13 @@ interface NavItem {
   route: string
 }
 
-export interface MyAccountMenuProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+export interface MenuProps extends React.HTMLAttributes<HTMLDivElement> {
   avatarImageUrl?: string
   accountName: string
   items: NavItem[]
 }
 
-const Nav = ({ items }: Pick<MyAccountMenuProps, 'items'>) => {
+const Nav = ({ items }: Pick<MenuProps, 'items'>) => {
   const router = useRouter()
   const currentRoute = router.pathname
 
@@ -38,12 +38,10 @@ const Nav = ({ items }: Pick<MyAccountMenuProps, 'items'>) => {
   )
 }
 
-const MyAccountMenu = ({
-  avatarImageUrl,
-  accountName,
-  items,
-}: MyAccountMenuProps) => {
+const Menu = ({ avatarImageUrl, accountName, items }: MenuProps) => {
   const { isDesktop } = useScreenResize()
+  const navigationLabels = useAccountNavigationLabels()
+  const switchLabel = navigationLabels?.switchLabel ?? 'Switch'
 
   return (
     <div className={styles.menu}>
@@ -62,7 +60,7 @@ const MyAccountMenu = ({
             variant="secondary"
             size="small"
           >
-            Switch
+            {switchLabel}
           </Button>
         </div>
       ) : null}
@@ -71,4 +69,4 @@ const MyAccountMenu = ({
   )
 }
 
-export default MyAccountMenu
+export default Menu

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

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

package/src/components/account/UserDetails/UserDetails.tsx

@@ -0,0 +1,54 @@
+import Tag from '../components/Tag'
+import AccountTable from '../components/Table'
+import AccountHeader from '../components/Header'
+import {
+  type UserDetailsSectionLabels,
+  resolveUserDetailsLabels,
+} from './userDetailsLabels'
+import styles from './styles.module.scss'
+
+type UserDetailsProps = {
+  userDetails: {
+    username: string
+    name: string
+    email: string
+    phone: string
+    role: string[]
+    orgUnit: string
+  }
+  labels?: UserDetailsSectionLabels
+}
+
+export default function UserDetails({
+  userDetails: { username, name, email, phone, role, orgUnit },
+  labels: labelsProp,
+}: UserDetailsProps) {
+  const labels = resolveUserDetailsLabels(labelsProp)
+
+  return (
+    <section className={styles.section}>
+      <AccountHeader pageTitle={labels.pageTitle} />
+      <div data-fs-user-details-container>
+        <AccountTable
+          rows={[
+            { heading: labels.nameLabel, data: name ? name : '–' },
+            { heading: labels.usernameLabel, data: username ? username : '–' },
+            { heading: labels.phoneLabel, data: phone ? phone : '–' },
+            { heading: labels.emailLabel, data: email },
+            {
+              heading: labels.roleLabel,
+              data: (
+                <span data-fs-user-details-row-tags>
+                  {role.map((r) => (
+                    <Tag key={r}>{r}</Tag>
+                  ))}
+                </span>
+              ),
+            },
+            { heading: labels.orgUnitLabel, data: orgUnit },
+          ]}
+        />
+      </div>
+    </section>
+  )
+}

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

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

package/src/components/account/{MyAccountUserDetails → UserDetails}/styles.module.scss

@@ -2,8 +2,8 @@
 
 @layer components {
   .section {
-    @include meta.load-css("../components/MyAccountTag/styles.scss");
-    @include meta.load-css("../components/MyAccountTable/styles.scss");
+    @include meta.load-css("../components/Tag/styles.scss");
+    @include meta.load-css("../components/Table/styles.scss");
 
     // --------------------------------------------------------
     // Design Tokens

package/src/components/account/UserDetails/userDetailsLabels.ts

@@ -0,0 +1,25 @@
+export type UserDetailsSectionLabels = {
+  pageTitle?: string
+  nameLabel?: string
+  usernameLabel?: string
+  emailLabel?: string
+  phoneLabel?: string
+  roleLabel?: string
+  orgUnitLabel?: string
+}
+
+export const defaultUserDetailsLabels: Required<UserDetailsSectionLabels> = {
+  pageTitle: 'User details',
+  nameLabel: 'Name',
+  usernameLabel: 'Username',
+  emailLabel: 'Email',
+  phoneLabel: 'Phone number',
+  roleLabel: 'Role',
+  orgUnitLabel: 'Organizational unit',
+}
+
+export function resolveUserDetailsLabels(
+  labels?: UserDetailsSectionLabels
+): Required<UserDetailsSectionLabels> {
+  return { ...defaultUserDetailsLabels, ...labels }
+}

package/src/components/account/components/{MyAccountAccordion/MyAccountAccordion.tsx → Accordion/Accordion.tsx}

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

package/src/components/account/components/{MyAccountAccordion/MyAccountAccordionButton.tsx → Accordion/AccordionButton.tsx}

@@ -4,17 +4,13 @@ import {
 } from '@faststore/ui'
 import type { ReactNode } from 'react'
 
-interface MyAccountAccordionButtonProps {
+interface AccordionButtonProps {
   title: string
   summary: string
   children?: ReactNode
 }
 
-function MyAccountAccordionButton({
-  title,
-  summary,
-  children,
-}: MyAccountAccordionButtonProps) {
+function AccordionButton({ title, summary, children }: AccordionButtonProps) {
   return (
     <UIAccordionButton
       collapsedIcon={<UIIcon name="CaretDown" />}
@@ -32,4 +28,4 @@ function MyAccountAccordionButton({
   )
 }
 
-export default MyAccountAccordionButton
+export default AccordionButton

package/src/components/account/components/{MyAccountAccordion/MyAccountAccordionItem.tsx → Accordion/AccordionItem.tsx}

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

package/src/components/account/components/{MyAccountAccordion/MyAccountAccordionPanel.tsx → Accordion/AccordionPanel.tsx}

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

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

@@ -0,0 +1,4 @@
+export { default as Accordion } from './Accordion'
+export { default as AccordionButton } from './AccordionButton'
+export { default as AccordionItem } from './AccordionItem'
+export { default as AccordionPanel } from './AccordionPanel'

package/src/components/account/components/{MyAccountCard/MyAccountCard.tsx → Card/Card.tsx}

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

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

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

package/src/components/account/components/{MyAccountHeader/MyAccountHeader.tsx → Header/Header.tsx}

@@ -1,8 +1,8 @@
-interface MyAccountHeaderProps {
+interface HeaderProps {
   pageTitle: string
 }
 
-function MyAccountHeader({ pageTitle }: MyAccountHeaderProps) {
+function Header({ pageTitle }: HeaderProps) {
   return (
     <header data-fs-account-header>
       <h1 data-fs-account-header-title>{pageTitle}</h1>
@@ -10,4 +10,4 @@ function MyAccountHeader({ pageTitle }: MyAccountHeaderProps) {
   )
 }
 
-export default MyAccountHeader
+export default Header

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

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

package/src/components/account/components/StatusBadge/StatusBadge.tsx

@@ -0,0 +1,43 @@
+import type { OrderStatusCmsLabels } from 'src/utils/userOrderStatus'
+import {
+  getLocalizedOrderStatusMap,
+  getOrderStatusLabel,
+  type OrderStatusKey,
+  type OrderStatusMapValue,
+} from 'src/utils/userOrderStatus'
+
+function getStatusVariant({
+  status,
+  statusMap,
+}: {
+  status: string
+  statusMap: Record<OrderStatusKey, OrderStatusMapValue>
+}) {
+  return (
+    (statusMap[status as OrderStatusKey] as OrderStatusMapValue)?.variant ||
+    'neutral'
+  )
+}
+
+function StatusBadge({
+  status,
+  statusFallback,
+  statusLabels,
+}: {
+  status: string
+  statusFallback?: string
+  statusLabels?: OrderStatusCmsLabels
+}) {
+  const statusMap = getLocalizedOrderStatusMap(statusLabels)
+
+  return (
+    <span
+      data-fs-my-account-badge
+      data-fs-my-account-badge-variant={getStatusVariant({ status, statusMap })}
+    >
+      {getOrderStatusLabel({ status, cmsLabels: statusLabels, statusFallback })}
+    </span>
+  )
+}
+
+export default StatusBadge

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

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

package/src/components/account/components/{MyAccountTable/MyAccountTable.tsx → Table/Table.tsx}

@@ -1,11 +1,11 @@
-interface MyAccountTableProps {
+interface TableProps {
   rows?: Array<{
     heading: string
     data: React.ReactNode | string
   }>
 }
 
-function MyAccountTable({ rows, ...props }: MyAccountTableProps) {
+function Table({ rows, ...props }: TableProps) {
   return (
     <table data-fs-account-table {...props}>
       <tbody data-fs-account-table-body>
@@ -20,4 +20,4 @@ function MyAccountTable({ rows, ...props }: MyAccountTableProps) {
   )
 }
 
-export default MyAccountTable
+export default Table

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

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

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

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

package/src/components/account/index.ts

@@ -1,2 +1,2 @@
-export { default as MyAccountLayout } from './MyAccountLayout'
-export { default as MyAccountMenu } from './MyAccountMenu'
+export { default as Layout } from './Layout'
+export { default as Menu } from './Menu'

package/src/components/account/orders/ListOrders/FilterSlider/FilterFacetDateRange/FilterFacetDateRange.tsx

@@ -0,0 +1,128 @@
+import { InputField } from '@faststore/ui'
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react'
+
+export interface FilterFacetDateRangeProps {
+  /**
+   * The from value of the Range Facet
+   */
+  from: string
+  /**
+   * The to value of the Range Facet
+   */
+  to: string
+  /**
+   * The function to be called when the date range changes
+   */
+  setDisabled: (disabled: boolean) => void
+  fromLabel?: string
+  toLabel?: string
+  invalidDateRangeLabel?: string
+}
+
+const FilterFacetDateRange = forwardRef<
+  {
+    clear: () => void
+    getDataRangeFacet: () => {
+      key: string
+      value: { from: string; to: string }
+    }
+  },
+  FilterFacetDateRangeProps
+>(
+  (
+    {
+      to,
+      from,
+      setDisabled,
+      fromLabel = 'From',
+      toLabel = 'To',
+      invalidDateRangeLabel = 'Invalid date range',
+    },
+    ref
+  ) => {
+    const inputFromRef = useRef<HTMLInputElement>(null)
+    const inputToRef = useRef<HTMLInputElement>(null)
+    const [inputFromError, setInputFromError] = useState<string>()
+    const [inputToError, setInputToError] = useState<string>()
+
+    const [dateRange, setDateRange] = useState<{ from: string; to: string }>({
+      from,
+      to,
+    })
+
+    function onEnd(value: { from: string; to: string }) {
+      if (!value.from || !value.to) {
+        setInputFromError(undefined)
+        setInputToError(undefined)
+        setDisabled(false)
+        return
+      }
+
+      if (new Date(value.from) > new Date(value.to)) {
+        setInputFromError(invalidDateRangeLabel)
+        setDisabled(true)
+      } else {
+        setInputFromError(undefined)
+        setInputToError(undefined)
+        setDisabled(false)
+      }
+    }
+
+    function onChangeInputFrom(value: string) {
+      setDateRange({ ...dateRange, from: String(value) })
+      onEnd?.({ ...dateRange, from: String(value) })
+    }
+
+    function onChangeInputTo(value: string) {
+      setDateRange({ ...dateRange, to: String(value) })
+      onEnd?.({ ...dateRange, to: String(value) })
+    }
+
+    useImperativeHandle(ref, () => ({
+      clear: () => {
+        setInputFromError(undefined)
+        setInputToError(undefined)
+        setDateRange({ from: '', to: '' })
+        if (inputFromRef.current) inputFromRef.current.value = ''
+        if (inputToRef.current) inputToRef.current.value = ''
+      },
+      getDataRangeFacet: () => {
+        return {
+          key: 'dateRange',
+          value: dateRange,
+        }
+      },
+    }))
+
+    return (
+      <div data-fs-list-orders-filters-date-range>
+        <div data-fs-list-orders-filters-date-range-inputs>
+          <InputField
+            id="date-range-from"
+            label={fromLabel}
+            type="date"
+            inputMode="text"
+            error={inputFromError}
+            inputRef={inputFromRef}
+            value={dateRange.from}
+            onChange={(e) => onChangeInputFrom(e.target.value)}
+            onBlur={() => !inputFromError && onEnd?.(dateRange)}
+          />
+          <InputField
+            id="date-range-to"
+            label={toLabel}
+            type="date"
+            inputMode="text"
+            error={inputToError}
+            inputRef={inputToRef}
+            value={dateRange.to}
+            onChange={(e) => onChangeInputTo(e.target.value)}
+            onBlur={() => !inputToError && onEnd?.(dateRange)}
+          />
+        </div>
+      </div>
+    )
+  }
+)
+
+export default FilterFacetDateRange

package/src/components/account/orders/ListOrders/FilterSlider/FilterFacetDateRange/index.ts

@@ -0,0 +1,2 @@
+export { default } from './FilterFacetDateRange'
+export type { FilterFacetDateRangeProps } from './FilterFacetDateRange'

package/src/components/account/orders/{MyAccountListOrders/MyAccountFilterSlider/MyAccountFilterFacetPendingApproval/MyAccountFilterFacetPendingApproval.tsx → ListOrders/FilterSlider/FilterFacetPendingApproval/FilterFacetPendingApproval.tsx}

@@ -2,7 +2,7 @@ import { Toggle } from '@faststore/ui'
 import { useMemo } from 'react'
 import type { SelectedFacet } from 'src/sdk/search/useMyAccountFilter'
 
-export interface MyAccountFilterFacetPendingApprovalProps {
+export interface FilterFacetPendingApprovalProps {
   /**
    * Current selected facets from filter context
    */
@@ -13,10 +13,10 @@ export interface MyAccountFilterFacetPendingApprovalProps {
   dispatch: (action: { type: 'toggleFacet' | 'setFacet'; payload: any }) => void
 }
 
-function MyAccountFilterFacetPendingApproval({
+function FilterFacetPendingApproval({
   selected,
   dispatch,
-}: MyAccountFilterFacetPendingApprovalProps) {
+}: FilterFacetPendingApprovalProps) {
   const isSelected = useMemo(
     () =>
       selected.some((f) => f.key === 'pendingMyApproval' && f.value === 'true'),
@@ -59,4 +59,4 @@ function MyAccountFilterFacetPendingApproval({
   )
 }
 
-export default MyAccountFilterFacetPendingApproval
+export default FilterFacetPendingApproval

package/src/components/account/orders/ListOrders/FilterSlider/FilterFacetPendingApproval/index.ts

@@ -0,0 +1,2 @@
+export { default } from './FilterFacetPendingApproval'
+export type { FilterFacetPendingApprovalProps } from './FilterFacetPendingApproval'