@faststore/core 3.44.1 → 3.45.0

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

@@ -0,0 +1,22 @@
+[data-fs-order-more-information-card] {
+  // --------------------------------------------------------
+  // Design Tokens for More Information Card
+  // --------------------------------------------------------
+
+  grid-column: span 2;
+
+  [data-fs-order-more-information-card-content] {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1.75rem;
+
+    @include media("<tablet") {
+      grid-template-columns: 1fr;
+    }
+
+    [data-fs-order-more-information-card-title] {
+      font-size: 0.875rem;
+      color: var(--fs-color-text-light);
+    }
+  }
+}

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

@@ -0,0 +1,121 @@
+import {
+  Modal as UIModal,
+  ModalHeader as UIModalHeader,
+  ModalBody as UIModalBody,
+  ModalFooter as UIModalFooter,
+  Button as UIButton,
+} from '@faststore/ui'
+import useScreenResize from 'src/sdk/ui/useScreenResize'
+import BottomSheet from 'src/components/account/components/BottomSheet/BottomSheet'
+import styles from './styles.module.scss'
+
+export type OrderActionType = 'cancel' | 'reject' | 'approve'
+
+interface OrderActionConfig {
+  title: string
+  message: string
+  confirmText: string
+  cancelText: string
+  confirmVariant: 'primary' | 'secondary' | 'tertiary'
+}
+
+const ACTION_CONFIGS: Record<OrderActionType, OrderActionConfig> = {
+  cancel: {
+    title: 'Cancel order',
+    message:
+      "Are you sure you want to cancel this order? This action can't be undone.",
+    confirmText: 'Cancel order',
+    cancelText: 'Not now',
+    confirmVariant: 'secondary',
+  },
+  reject: {
+    title: 'Reject order',
+    message:
+      "Are you sure you want to reject this order? This action can't be undone.",
+    confirmText: 'Reject',
+    cancelText: 'Cancel',
+    confirmVariant: 'primary',
+  },
+  approve: {
+    title: 'Approve order',
+    message: 'Are you sure you want to approve this order?',
+    confirmText: 'Approve',
+    cancelText: 'Cancel',
+    confirmVariant: 'primary',
+  },
+}
+
+interface MyAccountOrderActionModalProps {
+  isOpen: boolean
+  loading?: boolean
+  fade?: 'in' | 'out'
+  actionType: OrderActionType | null
+  onClose: (actionType: OrderActionType) => void
+  onConfirm: (actionType: OrderActionType) => void
+}
+
+export default function MyAccountOrderActionModal({
+  isOpen = false,
+  loading = false,
+  fade = 'out',
+  actionType,
+  onClose,
+  onConfirm,
+}: MyAccountOrderActionModalProps) {
+  const { isMobile, isTablet } = useScreenResize()
+
+  const config: OrderActionConfig | null =
+    actionType && ACTION_CONFIGS[actionType]
+  const dialogContent = (
+    <>
+      <UIModalHeader
+        title={config?.title}
+        onClose={() => onClose(actionType)}
+      />
+      <UIModalBody>
+        <p data-fs-order-details-action-modal-message>{config?.message}</p>
+      </UIModalBody>
+      <UIModalFooter>
+        <UIButton variant="tertiary" onClick={() => onClose(actionType)}>
+          {config?.cancelText}
+        </UIButton>
+        <UIButton
+          variant={config?.confirmVariant}
+          onClick={() => onConfirm(actionType)}
+          loading={loading}
+        >
+          {config?.confirmText}
+        </UIButton>
+      </UIModalFooter>
+    </>
+  )
+
+  if (isMobile || isTablet) {
+    return (
+      <BottomSheet
+        data-fs-order-details-action-modal
+        isOpen={isOpen}
+        onDismiss={() => onClose(actionType)}
+        fade={fade}
+        overlayProps={{
+          className: styles.orderActionsModal,
+        }}
+      >
+        {dialogContent}
+      </BottomSheet>
+    )
+  }
+
+  return (
+    <UIModal
+      data-fs-order-details-action-modal
+      isOpen={isOpen}
+      onDismiss={() => onClose(actionType)}
+      overlayProps={{
+        className: styles.orderActionsModal,
+      }}
+    >
+      {dialogContent}
+    </UIModal>
+  )
+}

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

@@ -0,0 +1,2 @@
+export { default } from './MyAccountOrderActionModal'
+export { useOrderActionModal } from './useOrderActionModal'

package/src/components/account/orders/MyAccountOrderDetails/MyAccountOrderActionModal/styles.module.scss

@@ -0,0 +1,40 @@
+@layer components {
+  .orderActionsModal {
+    @import "@faststore/ui/src/components/atoms/Loader/styles.scss";
+    @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
+    @import "@faststore/ui/src/components/atoms/Button/styles.scss";
+    @import "@faststore/ui/src/components/molecules/Modal/styles.scss";
+    @import "src/components/account/components/BottomSheet/styles.scss";
+
+    [data-fs-order-details-action-modal] {
+      [data-fs-modal-body] {
+        [data-fs-order-details-action-modal-message] {
+          font-size: var(--fs-text-size-body);
+          line-height: 1.5;
+          color: var(--fs-color-text);
+        }
+      }
+
+      [data-fs-modal-footer] {
+        @include media("<=tablet") {
+          padding: var(--fs-spacing-3) 0 var(--fs-spacing-3);
+
+          [data-fs-modal-footer-actions] {
+            display: flex;
+            flex-flow: row wrap;
+            gap: var(--fs-spacing-3);
+            align-items: center;
+            justify-content: flex-end;
+            max-width: 25rem;
+            padding: var(--fs-spacing-1) var(--fs-spacing-4);
+            margin-left: auto;
+
+            > * {
+              flex-grow: 1;
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/account/orders/MyAccountOrderDetails/MyAccountOrderActionModal/useOrderActionModal.ts

@@ -0,0 +1,38 @@
+import { useFadeEffect } from '@faststore/ui'
+import { useCallback, useState } from 'react'
+import type { OrderActionType } from './MyAccountOrderActionModal'
+
+export function useOrderActionModal() {
+  const { fade, fadeOut, fadeIn } = useFadeEffect()
+
+  const [dialogState, setDialogState] = useState<{
+    isOpen: boolean
+    actionType: OrderActionType | null
+  }>({
+    isOpen: false,
+    actionType: null,
+  })
+
+  const openDialog = useCallback((actionType: OrderActionType) => {
+    setDialogState({
+      isOpen: true,
+      actionType,
+    })
+    fadeIn()
+  }, [])
+
+  const closeDialog = useCallback(() => {
+    setDialogState({
+      isOpen: false,
+      actionType: null,
+    })
+    fadeOut()
+  }, [])
+
+  return {
+    ...dialogState,
+    fade,
+    openDialog,
+    closeDialog,
+  }
+}

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

@@ -0,0 +1,154 @@
+import {
+  Button as UIButton,
+  Icon as UIIcon,
+  IconButton as UIIconButton,
+  useUI,
+} from '@faststore/ui'
+import useScreenResize from 'src/sdk/ui/useScreenResize'
+import MyAccountOrderActionModal, {
+  useOrderActionModal,
+} 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 {
+  orderId: string
+  customerEmail?: string
+}
+
+export default function MyAccountOrderActions({
+  orderId,
+  customerEmail,
+}: MyAccountOrderActionsProps) {
+  const { isMobile, isTablet } = useScreenResize()
+  const { isOpen, actionType, fade, openDialog, closeDialog } =
+    useOrderActionModal()
+  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 handleConfirm = async (type: string) => {
+    const data = {
+      orderId,
+      customerEmail,
+      // TODO: We don't have a reason for action yet
+      reason: '',
+    }
+
+    const actions = {
+      cancel: cancelOrder,
+      approve: approveOrder,
+      reject: rejectOrder,
+    }
+
+    try {
+      const action = actions[type as keyof typeof actions]
+
+      if (!action) {
+        throw new Error(`Invalid action type: ${type}`)
+      }
+
+      // Execute the action
+      await action({ data: data })
+
+      closeDialog()
+      pushToast({
+        status: 'INFO',
+        message: TOASTS_CONFIG[type as keyof typeof TOASTS_CONFIG].success,
+        icon: <UIIcon width={30} height={30} name="CircleWavyCheck" />,
+      })
+    } catch (error) {
+      pushToast({
+        status: 'ERROR',
+        message: TOASTS_CONFIG[type as keyof typeof TOASTS_CONFIG].error,
+        icon: <UIIcon width={30} height={30} name="CircleWavyWarning" />,
+      })
+    }
+  }
+
+  return (
+    <>
+      <div data-fs-order-details-header-actions>
+        <UIButton
+          variant="secondary"
+          data-fs-order-details-header-actions-cancel
+          size={isMobile || isTablet ? 'regular' : 'small'}
+          type="button"
+          onClick={() => openDialog('cancel')}
+        >
+          Cancel order
+        </UIButton>
+        {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>
+
+      <MyAccountOrderActionModal
+        isOpen={isOpen}
+        loading={loading}
+        fade={fade}
+        actionType={actionType}
+        onClose={closeDialog}
+        onConfirm={handleConfirm}
+      />
+    </>
+  )
+}

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

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

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

@@ -0,0 +1,33 @@
+[data-fs-order-details-header-actions] {
+  display: flex;
+  flex-flow: row wrap;
+  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;
+  }
+}

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

@@ -0,0 +1,106 @@
+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'
+import { MyAccountDeliveryOptionAccordion } from './MyAccountDeliveryOptionAccordion'
+import MyAccountOrderActions from './MyAccountOrderActions'
+import MyAccountOrderedByCard from './MyAccountOrderedByCard'
+import MyAccountPaymentCard from './MyAccountPaymentCard'
+import MyAccountSummaryCard from './MyAccountSummaryCard'
+
+import { useRouter } from 'next/router'
+import type { OrderStatusKey } from 'src/utils/userOrderStatus'
+import MyAccountStatusBadge from '../../components/MyAccountStatusBadge'
+import MyAccountMoreInformationCard from './MyAccountMoreInformationCard'
+import styles from './section.module.scss'
+
+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({
+  order,
+}: MyAccountOrderDetailsProps) {
+  const router = useRouter()
+
+  const handleBack = () => {
+    if (window.history.length > MIN_HISTORY_LENGTH_TO_GO_BACK) {
+      router.back()
+    } else {
+      router.push('/account/orders')
+    }
+  }
+
+  const moreInformationCustomFields = order?.customFields.find(
+    (field) => field.type === 'order'
+  )?.fields
+
+  return (
+    <div className={styles.page} data-fs-order-details>
+      <header data-fs-order-details-header>
+        <div data-fs-order-details-header-title>
+          <UIIconButton
+            data-fs-order-details-header-back-button
+            size="small"
+            aria-label="Go back"
+            icon={<UIIcon height={24} width={24} name="ArrowLeft" />}
+            type="button"
+            onClick={handleBack}
+          />
+          <div data-fs-order-details-header-title-wrapper>
+            <h1 data-fs-order-details-header-title-text>
+              Order #{order.orderId}
+            </h1>
+            <MyAccountStatusBadge
+              status={order.status}
+              statusFallback={order.statusDescription}
+            />
+          </div>
+        </div>
+        <MyAccountOrderActions
+          orderId={order.orderId}
+          customerEmail={order.clientProfileData?.email}
+        />
+      </header>
+      <main data-fs-order-details-content>
+        <MyAccountOrderedByCard clientProfileData={order.clientProfileData} />
+        <MyAccountDeliveryCard
+          deliveryOptionsData={order.deliveryOptionsData}
+          fields={
+            order.customFields.find((field) => field.type === 'address')?.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}
+          transactions={order.paymentData.transactions}
+        />
+
+        {order.deliveryOptionsData.deliveryOptions.map((option) => (
+          <MyAccountDeliveryOptionAccordion
+            key={option.friendlyDeliveryOptionName}
+            deliveryOption={option}
+            contact={order.deliveryOptionsData.contact}
+            currencyCode={order.storePreferencesData.currencyCode}
+            customFields={order.customFields.filter(
+              (field) => field.type === 'item'
+            )}
+          />
+        ))}
+        {moreInformationCustomFields?.length > 0 && (
+          <MyAccountMoreInformationCard fields={moreInformationCustomFields} />
+        )}
+      </main>
+    </div>
+  )
+}

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

@@ -0,0 +1,54 @@
+import type { ServerOrderDetailsQueryQuery } from '@generated/graphql'
+import MyAccountCard from '../../../components/MyAccountCard'
+
+interface MyAccountOrderedByCardProps {
+  clientProfileData: Pick<
+    ServerOrderDetailsQueryQuery['userOrder']['clientProfileData'],
+    | 'firstName'
+    | 'lastName'
+    | 'email'
+    | 'phone'
+    | 'corporateName'
+    | 'isCorporate'
+  >
+}
+
+function MyAccountOrderedByCard({
+  clientProfileData,
+}: MyAccountOrderedByCardProps) {
+  const firstName = clientProfileData?.firstName
+  const lastName = clientProfileData?.lastName
+  const email = clientProfileData?.email
+  const phone = clientProfileData?.phone
+  const corporateName = clientProfileData?.corporateName
+  const isCorporate = clientProfileData?.isCorporate
+
+  const getFirstLetter = (name: string) => {
+    return name.charAt(0).toUpperCase()
+  }
+
+  return (
+    <MyAccountCard title="Ordered by" data-fs-order-ordered-by-card>
+      {isCorporate && corporateName && (
+        <div data-fs-ordered-by-org>
+          <div data-fs-ordered-by-avatar>{getFirstLetter(corporateName)}</div>
+          <p data-fs-ordered-by-org-name>{corporateName}</p>
+        </div>
+      )}
+      <div data-fs-ordered-by-client-info>
+        <p
+          data-fs-ordered-by-client-name
+        >{`${firstName ?? ''} ${lastName ?? ''}`}</p>
+        {(phone || email) && (
+          <p>
+            {phone && <>{phone}</>}
+            {phone && email && <br />}
+            {email}
+          </p>
+        )}
+      </div>
+    </MyAccountCard>
+  )
+}
+
+export default MyAccountOrderedByCard

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

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

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

@@ -0,0 +1,65 @@
+[data-fs-order-ordered-by-card] {
+  // --------------------------------------------------------
+  // Design Tokens for Ordered By Card
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-ordered-by-avatar-size                  : 24px;
+  --fs-ordered-by-avatar-bg                    : var(--fs-color-primary-bkg);
+  --fs-ordered-by-avatar-color                 : var(--fs-color-primary-text);
+
+  --fs-ordered-by-text-size                    : var(--fs-text-size-2);
+  --fs-ordered-by-text-line-height             : 24px;
+  --fs-ordered-by-text-letter-spacing          : -2%;
+  --fs-ordered-by-text-client-weight           : var(--fs-text-weight-regular);
+  --fs-ordered-by-text-client-strong-weight    : var(--fs-text-weight-medium);
+  --fs-ordered-by-text-corporate-weight        : var(--fs-text-weight-semibold);
+
+  [data-fs-card-body] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--fs-spacing-3);
+
+    [data-fs-ordered-by-org] {
+      display: flex;
+      gap: var(--fs-spacing-1);
+      align-items: center;
+
+      [data-fs-ordered-by-avatar] {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: var(--fs-ordered-by-avatar-size);
+        height: var(--fs-ordered-by-avatar-size);
+        font-size: var(--fs-text-size-1);
+        font-weight: var(--fs-text-weight-semibold);
+        color: var(--fs-color-main-2);
+        background-color: var(--fs-color-accent-0);
+        border-radius: var(--fs-border-radius-pill);
+      }
+
+      [data-fs-ordered-by-org-name] {
+        font-size: var(--fs-ordered-by-text-size);
+        font-weight: var(--fs-ordered-by-text-corporate-weight);
+        line-height: var(--fs-ordered-by-text-line-height);
+        letter-spacing: var(--fs-ordered-by-text-letter-spacing);
+      }
+    }
+
+    [data-fs-ordered-by-client-info] {
+      display: flex;
+      flex-direction: column;
+      gap: var(--fs-spacing-1);
+
+      p {
+        font-size: var(--fs-ordered-by-text-size);
+        font-weight: var(--fs-ordered-by-text-client-weight);
+        letter-spacing: var(--fs-ordered-by-text-letter-spacing);
+      }
+
+      [data-fs-ordered-by-client-name] {
+        font-weight: var(--fs-ordered-by-text-client-strong-weight);
+      }
+    }
+  }
+}