@faststore/core 3.64.0 → 3.65.0

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

@@ -1,26 +1,15 @@
-import { Button as UIButton, Icon as UIIcon, useUI } from '@faststore/ui'
-import useScreenResize from 'src/sdk/ui/useScreenResize'
-import MyAccountOrderActionModal, {
-  useOrderActionModal,
-} from 'src/components/account/orders/MyAccountOrderDetails/MyAccountOrderActionModal'
+import {
+  Dropdown,
+  DropdownButton,
+  DropdownItem,
+  DropdownMenu,
+  Icon as UIIcon,
+  useUI,
+  IconButton as UIIconButton,
+} from '@faststore/ui'
+import { useState } from 'react'
+import MyAccountOrderActionModal from 'src/components/account/orders/MyAccountOrderDetails/MyAccountOrderActionModal'
 import { useCancelOrder } from 'src/sdk/account/useCancelOrder'
-import { useApproveOrder } from 'src/sdk/account/useApproveOrder'
-import { useRejectOrder } from 'src/sdk/account/useRejectOrder'
-
-const TOASTS_CONFIG = {
-  cancel: {
-    success: 'Order canceled successfully',
-    error: "Order couldn't be canceled due to a technical issue. Try again.",
-  },
-  approve: {
-    success: 'Order approved successfully',
-    error: "Order couldn't be approved due to a technical issue. Try again.",
-  },
-  reject: {
-    success: 'Order rejected successfully',
-    error: "Order couldn't be rejected due to a technical issue. Try again.",
-  },
-}
 
 interface MyAccountOrderActionsProps {
   allowCancellation: boolean
@@ -33,21 +22,12 @@ export default function MyAccountOrderActions({
   orderId,
   customerEmail,
 }: MyAccountOrderActionsProps) {
-  const { isMobile, isTablet } = useScreenResize()
-  const { isOpen, actionType, fade, openDialog, closeDialog } =
-    useOrderActionModal()
+  const [isCancelOpen, setIsCancelOpen] = useState<boolean>(false)
   const { pushToast } = useUI()
 
-  const { cancelOrder, loading: cancelLoading } = useCancelOrder()
-  const { approveOrder, loading: approveLoading } = useApproveOrder()
-  const { rejectOrder, loading: rejectLoading } = useRejectOrder()
-
-  const loading =
-    (actionType === 'cancel' && cancelLoading) ||
-    (actionType === 'approve' && approveLoading) ||
-    (actionType === 'reject' && rejectLoading)
+  const { cancelOrder, loading } = useCancelOrder()
 
-  const handleConfirm = async (type: string) => {
+  const handleCancel = async () => {
     const data = {
       orderId,
       customerEmail,
@@ -55,99 +35,66 @@ export default function MyAccountOrderActions({
       reason: '',
     }
 
-    const actions = {
-      cancel: cancelOrder,
-      approve: approveOrder,
-      reject: rejectOrder,
-    }
-
     try {
-      const action = actions[type as keyof typeof actions]
+      await cancelOrder({ data: data })
 
-      if (!action) {
-        throw new Error(`Invalid action type: ${type}`)
-      }
-
-      // Execute the action
-      await action({ data: data })
-
-      closeDialog()
+      setIsCancelOpen(false)
       pushToast({
         status: 'INFO',
-        message: TOASTS_CONFIG[type as keyof typeof TOASTS_CONFIG].success,
+        message: 'Order canceled successfully',
         icon: <UIIcon width={30} height={30} name="CircleWavyCheck" />,
       })
     } catch (error) {
       pushToast({
         status: 'ERROR',
-        message: TOASTS_CONFIG[type as keyof typeof TOASTS_CONFIG].error,
+        message: "Order couldn't be canceled due to a technical issue.",
         icon: <UIIcon width={30} height={30} name="CircleWavyWarning" />,
       })
     }
   }
 
+  // Don't render if no actions are available
+  if (!allowCancellation) {
+    return null
+  }
+
   return (
     <>
-      <div data-fs-order-details-header-actions>
-        {allowCancellation && (
-          <UIButton
-            variant="secondary"
-            data-fs-order-details-header-actions-cancel
-            size={isMobile || isTablet ? 'regular' : 'small'}
-            type="button"
-            onClick={() => openDialog('cancel')}
-          >
-            Cancel order
-          </UIButton>
-        )}
-        {/* TODO: This will be replaced for approval flow with buying policies */}
-        {/* {isMobile || isTablet ? (
-          <UIIconButton
-            aria-label="Reject"
-            icon={<UIIcon name="XCircle" />}
-            variant="tertiary"
-            type="button"
-            onClick={() => openDialog('reject')}
-          />
-        ) : (
-          <UIButton
-            variant="secondary"
-            size="small"
-            icon={<UIIcon name="XCircle" />}
-            type="button"
-            onClick={() => openDialog('reject')}
-          >
-            Reject
-          </UIButton>
-        )}
-        {isMobile || isTablet ? (
-          <UIIconButton
-            aria-label="Approve"
-            icon={<UIIcon name="CircleCheck" />}
-            variant="primary"
-            type="button"
-            onClick={() => openDialog('approve')}
-          />
-        ) : (
-          <UIButton
-            variant="primary"
-            size="small"
-            icon={<UIIcon name="CircleCheck" />}
-            type="button"
-            onClick={() => openDialog('approve')}
-          >
-            Approve
-          </UIButton>
-        )} */}
+      <div data-fs-order-actions>
+        <Dropdown>
+          <DropdownButton aria-label="View More" data-fs-dropdown-button>
+            <UIIcon
+              name="DotsThree"
+              width={20}
+              height={20}
+              data-fs-dropdown-icon
+            />
+          </DropdownButton>
+          <DropdownMenu align="right">
+            {allowCancellation && (
+              <DropdownItem
+                type="button"
+                onClick={() => setIsCancelOpen(true)}
+                style={{
+                  color: 'var(--fs-color-text)',
+                }}
+              >
+                Cancel order
+              </DropdownItem>
+            )}
+          </DropdownMenu>
+        </Dropdown>
       </div>
 
       <MyAccountOrderActionModal
-        isOpen={isOpen}
+        isOpen={isCancelOpen}
         loading={loading}
-        fade={fade}
-        actionType={actionType}
-        onClose={closeDialog}
-        onConfirm={handleConfirm}
+        title="Cancel order"
+        message="Are you sure you want to cancel this order? This action can't be undone."
+        confirmText="Cancel order"
+        danger
+        onClose={() => setIsCancelOpen(false)}
+        onConfirm={handleCancel}
       />
     </>
   )

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

@@ -1,33 +1,10 @@
-[data-fs-order-details-header-actions] {
+[data-fs-order-actions] {
   display: flex;
-  flex-flow: row wrap;
+  flex-flow: row;
+  flex-shrink: 0;
   align-items: center;
 
-  [data-fs-order-details-header-actions-cancel] {
-    --fs-button-secondary-text-color: var(--fs-color-danger-text);
-    --fs-button-secondary-bkg-color-hover: var(--fs-button-secondary-text-color);
-  }
-
-  @include media("<=tablet") {
-    position: fixed;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: var(--fs-z-index-top);
-    gap: var(--fs-spacing-1);
-    justify-content: flex-end;
-    padding: 1.25rem;
-    background: var(--fs-color-body-bkg);
-    border-top: var(--fs-border-width) solid var(--fs-color-neutral-2);
-    box-shadow: 0 -1px 15px 0 rgb(0 0 0 / 10.2%);
-
-    [data-fs-order-details-header-actions-cancel] {
-      margin-right: auto;
-    }
-  }
-
-  @include media(">tablet") {
-    flex-flow: row;
-    flex-shrink: 0;
+  [data-fs-dropdown-button] {
+    width: var(--fs-spacing-7);
   }
 }

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

@@ -1,5 +1,3 @@
-import type { ServerOrderDetailsQueryQuery } from '@generated/graphql'
-
 import { Icon as UIIcon, IconButton as UIIconButton } from '@faststore/ui'
 import MyAccountStatusCard from 'src/components/account/orders/MyAccountOrderDetails/MyAccountStatusCard'
 import MyAccountDeliveryCard from './MyAccountDeliveryCard'
@@ -8,17 +6,18 @@ import MyAccountOrderActions from './MyAccountOrderActions'
 import MyAccountOrderedByCard from './MyAccountOrderedByCard'
 import MyAccountPaymentCard from './MyAccountPaymentCard'
 import MyAccountSummaryCard from './MyAccountSummaryCard'
+import MyAccountBuyingPolicyAlert from './MyAccountBuyingPolicyAlert'
 
 import type { OrderStatusKey } from 'src/utils/userOrderStatus'
 import MyAccountStatusBadge from '../../components/MyAccountStatusBadge'
 import MyAccountMoreInformationCard from './MyAccountMoreInformationCard'
 import styles from './section.module.scss'
+import type { ServerOrderDetailsQueryQuery } from '@generated/graphql'
 
 export interface MyAccountOrderDetailsProps {
   order: ServerOrderDetailsQueryQuery['userOrder']
 }
 
-// This constant is used to determine if we should go back in history or redirect to the orders page
 const MIN_HISTORY_LENGTH_TO_GO_BACK = 2
 
 export default function MyAccountOrderDetails({
@@ -51,14 +50,24 @@ export default function MyAccountOrderDetails({
             />
           </div>
         </div>
+
         <MyAccountOrderActions
           allowCancellation={order.allowCancellation}
           orderId={order.orderId}
           customerEmail={order.clientProfileData?.email}
         />
       </header>
+
       <main data-fs-order-details-content>
+        {order.ruleForAuthorization && (
+          <MyAccountBuyingPolicyAlert
+            ruleForAuthorization={order.ruleForAuthorization}
+            onAuthorizationComplete={() => window.location.reload()}
+          />
+        )}
+
         <MyAccountOrderedByCard clientProfileData={order.clientProfileData} />
+
         <MyAccountDeliveryCard
           deliveryOptionsData={order.deliveryOptionsData}
           fields={
@@ -66,12 +75,15 @@ export default function MyAccountOrderDetails({
               ?.fields || []
           }
         />
+
         <MyAccountStatusCard status={order.status as OrderStatusKey} />
+
         <MyAccountPaymentCard
           currencyCode={order.storePreferencesData.currencyCode}
           paymentData={order.paymentData}
           allowCancellation={order.allowCancellation}
         />
+
         <MyAccountSummaryCard
           totals={order.totals}
           currencyCode={order.storePreferencesData.currencyCode}
@@ -89,6 +101,7 @@ export default function MyAccountOrderDetails({
             )}
           />
         ))}
+
         {moreInformationCustomFields?.length > 0 && (
           <MyAccountMoreInformationCard fields={moreInformationCustomFields} />
         )}

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

@@ -1,10 +1,8 @@
-import { useSession } from 'src/sdk/session'
 import MyAccountCard from '../../../components/MyAccountCard'
 import MyAccountPaymentFlagsIcon from './MyAccountPaymentFlagsIcon'
-import { useCallback } from 'react'
 import { Link } from '@faststore/ui'
-import type { ServerOrderDetailsQueryQuery } from '@generated/graphql'
 import { useFormatPrice } from '../../../utils/useFormatPrice'
+import type { ServerOrderDetailsQueryQuery } from '@generated/graphql'
 
 export type OrderPaymentData =
   ServerOrderDetailsQueryQuery['userOrder']['paymentData']

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

@@ -1,8 +1,11 @@
 .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/Loader/styles.scss";
   @import "@faststore/ui/src/components/atoms/Button/styles.scss";
   @import "@faststore/ui/src/components/molecules/Card/styles.scss";
+  @import "@faststore/ui/src/components/molecules/Alert/styles.scss";
+  @import "@faststore/ui/src/components/molecules/Dropdown/styles.scss";
   @import "../../components/MyAccountAccordion/styles.scss";
   @import "../../components/MyAccountCard/styles.scss";
   @import "../../components/MyAccountStatusBadge/styles.scss";
@@ -14,6 +17,7 @@
   @import "./MyAccountOrderActions/styles.scss";
   @import "./MyAccountStatusCard/styles.scss";
   @import "./MyAccountMoreInformationCard/styles.scss";
+  @import "./MyAccountBuyingPolicyAlert/styles.scss";
 
   // --------------------------------------------------------
   // Design Tokens
@@ -44,7 +48,7 @@
 
   [data-fs-order-details-header] {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     gap: var(--fs-order-details-header-gap);
     align-items: flex-start;
     justify-content: space-between;
@@ -53,7 +57,6 @@
     @include media (">=tablet") {
       --fs-order-details-header-gap                 : var(--fs-spacing-2);
 
-      flex-flow: row;
       align-items: center;
     }
 
@@ -112,6 +115,14 @@
       grid-column: span 2;
     }
 
+    [data-fs-buying-policy-alert] {
+      grid-column: span 2;
+    }
+
+    [data-fs-pending-policies-alert] {
+      grid-column: span 2;
+    }
+
     [data-fs-delivery-option-accordion] {
       grid-column: span 2;
     }

package/src/components/account/profile/i18n.ts

@@ -0,0 +1,7 @@
+export const strings = {
+  profile: 'Profile',
+  name: 'Name',
+  email: 'Email',
+  id: 'ID',
+  createdDate: 'Created date',
+}

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

@@ -0,0 +1 @@
+export * from './profile'

package/src/components/account/profile/profile.module.scss

@@ -0,0 +1,89 @@
+@layer components {
+  .section {
+    [data-fs-account-profile-header] {
+      padding-block: var(--fs-spacing-6);
+      padding-inline: var(--fs-spacing-11);
+    }
+
+    [data-fs-account-profile-body] {
+      padding-inline: var(--fs-spacing-11);
+    }
+
+    [data-fs-account-profile-title] {
+      font-family: var(--fs-text-face-title);
+      font-size: var(--fs-text-size-4);
+      font-weight: var(--fs-text-weight-semibold);
+    }
+
+    [data-fs-account-profile-table] {
+      display: grid;
+      grid-template-columns: minmax(11.25rem, auto) 1fr;
+      width: 100%;
+      border-spacing: 0;
+      border-collapse: collapse;
+    }
+
+    [data-fs-account-profile-table-body] {
+      display: contents;
+      gap: var(--fs-spacing-1);
+    }
+
+    [data-fs-account-profile-table-row] {
+      display: contents;
+
+      &:last-child {
+        > [data-fs-account-profile-table-heading] {
+          border-bottom: none;
+        }
+
+        > [data-fs-account-profile-table-data] {
+          border-bottom: none;
+        }
+      }
+    }
+
+    [data-fs-account-profile-table-heading] {
+      padding-block: var(--fs-spacing-4);
+      font-family: var(--fs-text-face-body);
+      font-size: var(--fs-text-size-2);
+      font-weight: var(--fs-text-weight-regular);
+      color: var(--fs-color-text-light);
+      text-align: left;
+      border-bottom: var(--fs-border-width) solid var(--fs-border-color-light);
+    }
+
+    [data-fs-account-profile-table-data] {
+      padding-block: var(--fs-spacing-4);
+      padding-inline: var(--fs-spacing-1);
+      font-family: var(--fs-text-face-body);
+      font-size: var(--fs-text-size-2);
+      font-weight: var(--fs-text-weight-regular);
+      color: var(--fs-color-text);
+      border-bottom: var(--fs-border-width) solid var(--fs-border-color-light);
+    }
+
+    @include media("<notebook") {
+      [data-fs-account-profile-header] {
+        padding-inline: var(--fs-spacing-4);
+      }
+
+      [data-fs-account-profile-body] {
+        padding-inline: var(--fs-spacing-4);
+      }
+
+      [data-fs-account-profile-table] {
+        grid-template-columns: 1fr;
+      }
+
+      [data-fs-account-profile-table-heading] {
+        padding-block: var(--fs-spacing-4) 0;
+        border-bottom: none;
+      }
+
+      [data-fs-account-profile-table-data] {
+        padding-block: var(--fs-spacing-1) var(--fs-spacing-4);
+        padding-inline: 0;
+      }
+    }
+  }
+}

package/src/components/account/profile/profile.tsx

@@ -0,0 +1,63 @@
+import { strings } from './i18n'
+import styles from './profile.module.scss'
+import { useDateFormatter } from './use-date-formatter'
+
+interface UserProfile {
+  name: string | null
+  email: string | null
+  id: string | null
+  createdDate?: string | null
+}
+
+export interface ProfileSectionProps {
+  profile?: UserProfile
+  locale?: string
+}
+
+/*
+ * Renders the /account/profile section
+ */
+export function ProfileSection({
+  profile,
+  locale = 'en-US',
+}: ProfileSectionProps) {
+  const { formatStringDate } = useDateFormatter(locale)
+
+  return (
+    <div data-fs-account-profile-section className={styles.section}>
+      <header data-fs-account-profile-header>
+        <h1 data-fs-account-profile-title>{strings.profile}</h1>
+      </header>
+      <section data-fs-account-profile-body>
+        <table data-fs-account-profile-table>
+          <tbody data-fs-account-profile-table-body>
+            <tr data-fs-account-profile-table-row>
+              <th data-fs-account-profile-table-heading>{strings.name}</th>
+              <td data-fs-account-profile-table-data>{profile?.name}</td>
+            </tr>
+            <tr data-fs-account-profile-table-row>
+              <th data-fs-account-profile-table-heading>{strings.email}</th>
+              <td data-fs-account-profile-table-data>
+                <a href={`mailto:${profile?.email}`}>{profile?.email}</a>
+              </td>
+            </tr>
+            <tr data-fs-account-profile-table-row>
+              <th data-fs-account-profile-table-heading>{strings.id}</th>
+              <td data-fs-account-profile-table-data>{profile?.id}</td>
+            </tr>
+            {profile.createdDate && (
+              <tr data-fs-account-profile-table-row>
+                <th data-fs-account-profile-table-heading>
+                  {strings.createdDate}
+                </th>
+                <td data-fs-account-profile-table-data>
+                  {formatStringDate(profile.createdDate)}
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </section>
+    </div>
+  )
+}

package/src/components/account/profile/use-date-formatter.ts

@@ -0,0 +1,25 @@
+import { useCallback, useMemo } from 'react'
+
+export function useDateFormatter(locale: string) {
+  const dateFormatter = useMemo(
+    () =>
+      new Intl.DateTimeFormat(locale, {
+        dateStyle: 'medium',
+      }),
+    [locale]
+  )
+
+  const formatStringDate = useCallback(
+    (dateString: string) => {
+      const date = new Date(dateString)
+      const formattedDate = dateFormatter.format(date)
+      return formattedDate
+    },
+    [dateFormatter]
+  )
+
+  return {
+    dateFormatter,
+    formatStringDate,
+  }
+}