@faststore/core 3.44.1 → 3.45.0

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

@@ -0,0 +1,157 @@
+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'
+
+export type OrderPaymentData =
+  ServerOrderDetailsQueryQuery['userOrder']['paymentData']
+export type OrderPaymentDataTransaction =
+  OrderPaymentData['transactions'][number]
+export type OrderPaymentDataTransactionPayment =
+  OrderPaymentDataTransaction['payments'][number]
+
+interface MyAccountPaymentCardProps {
+  paymentData?: OrderPaymentData
+  currencyCode: string
+  allowCancellation?: boolean
+}
+
+const getPaymentMethodInfo = (
+  payment: OrderPaymentDataTransaction['payments'][number]
+) => {
+  const baseInfo = {
+    type: 'Billing',
+    methodName: '',
+    icon: payment.paymentSystemName,
+  }
+
+  switch (payment.group) {
+    case 'creditCard':
+    case 'debitCard':
+      return {
+        ...baseInfo,
+        methodName: `${payment.paymentSystemName} ending in ${payment.lastDigits}`,
+      }
+    case 'bankInvoice':
+      return {
+        ...baseInfo,
+        type: 'Bank Invoice',
+        methodName: 'Bank Invoice',
+      }
+    case 'payPal':
+      return {
+        ...baseInfo,
+        methodName: 'PayPal',
+      }
+    case 'giftCard':
+      return {
+        ...baseInfo,
+        type: 'Gift Card',
+        methodName: 'Gift Card',
+      }
+    default:
+      return {
+        ...baseInfo,
+        methodName: payment.paymentSystemName,
+      }
+  }
+}
+
+const getBankInvoiceUrl = (transactions: OrderPaymentDataTransaction[]) => {
+  for (const transaction of transactions) {
+    for (const payment of transaction.payments) {
+      if (payment.url) {
+        return payment.url.replace('{Installment}', '1')
+      }
+    }
+  }
+
+  return null
+}
+
+function MyAccountPaymentCard({
+  paymentData,
+  currencyCode,
+  allowCancellation = false,
+}: MyAccountPaymentCardProps) {
+  const formatPrice = useFormatPrice()
+
+  const bankInvoiceUrl = getBankInvoiceUrl(paymentData?.transactions)
+
+  const showPrintBankInvoiceButton = allowCancellation && bankInvoiceUrl
+
+  return (
+    <MyAccountCard title="Payment" data-fs-order-payment-card>
+      <div data-fs-payment-details>
+        {paymentData?.transactions[0]?.payments.map((payment) => {
+          const methodInfo = getPaymentMethodInfo(payment)
+          // Check if redemptionCode exists on payment
+          const hasRedemptionCode =
+            payment.group === 'giftCard' && payment.redemptionCode
+
+          return (
+            <div key={payment.id} data-fs-payment-info>
+              <div data-fs-payment-method>
+                <div data-fs-payment-method-info>
+                  <p data-fs-payment-name>{methodInfo.methodName}</p>
+                  <MyAccountPaymentFlagsIcon payment={payment} />
+                </div>
+                <div data-fs-payment-value>
+                  {hasRedemptionCode ? (
+                    <span>
+                      {payment.redemptionCode} -{' '}
+                      {formatPrice(payment.value, currencyCode)}
+                    </span>
+                  ) : payment.installments > 1 ? (
+                    <span>
+                      {payment.installments}x of{' '}
+                      {formatPrice(
+                        payment.value / payment.installments,
+                        currencyCode
+                      )}
+                    </span>
+                  ) : (
+                    <span>{formatPrice(payment.value, currencyCode)}</span>
+                  )}
+                </div>
+              </div>
+
+              <div data-fs-payment-transaction-info>
+                {payment.tid && (
+                  <span data-fs-payment-tid>Tid: {payment.tid}</span>
+                )}
+                {payment.connectorResponses?.authId && (
+                  <span data-fs-payment-authid>
+                    AuthId: {String(payment.connectorResponses.authId)}
+                  </span>
+                )}
+                <div data-fs-payment-bank-invoice>
+                  {payment.bankIssuedInvoiceIdentificationNumber && (
+                    <span data-fs-payment-bank-invoice-number>
+                      Invoice Number:{' '}
+                      {payment.bankIssuedInvoiceIdentificationNumber}
+                    </span>
+                  )}
+                  {showPrintBankInvoiceButton && (
+                    <Link
+                      data-fs-payment-invoice-link
+                      href={bankInvoiceUrl}
+                      target="_blank"
+                    >
+                      Print Bank Invoice
+                    </Link>
+                  )}
+                </div>
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </MyAccountCard>
+  )
+}
+
+export default MyAccountPaymentCard

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

@@ -0,0 +1,106 @@
+import { Icon as UIIcon } from '@faststore/ui'
+import type { OrderPaymentDataTransactionPayment } from './MyAccountPaymentCard'
+
+interface PaymentFlagsIconProps {
+  payment: Pick<
+    OrderPaymentDataTransactionPayment,
+    'group' | 'paymentSystemName' | 'paymentOrigin'
+  >
+}
+
+const PAYMENT_GROUPS = {
+  BANK_INVOICE: 'bankInvoice',
+  PAYPAL: 'payPal',
+  GIFT_CARD: 'giftCard',
+  DEBIT_CARD: 'debitCard',
+} as const
+
+// Map for icons names
+const PAYMENT_FLAGS = {
+  visa: 'Visa',
+  mastercard: 'Mastercard',
+  diners: 'Diners',
+  american: 'Amex',
+  hipercard: 'Hipercard',
+  discover: 'Discover',
+  banricompras: 'Banricompras',
+  aura: 'Aura',
+  elo: 'EloCard',
+  jcb: 'JCB',
+  bankinvoice: 'FileText',
+  paypal: 'PayPal',
+  giftcard: 'Gift',
+  cash: 'Currency',
+  applepay: 'ApplePay',
+  googlepay: 'GooglePay',
+} as const
+
+function shouldShowFlag(
+  payment: Pick<OrderPaymentDataTransactionPayment, 'paymentSystemName'>
+) {
+  if (!payment.paymentSystemName || payment.paymentSystemName === 'Free') {
+    return false
+  }
+
+  return true
+}
+
+function MyAccountPaymentFlagsIcon({ payment }: PaymentFlagsIconProps) {
+  const getPaymentFlag = () => {
+    const { group, paymentSystemName, paymentOrigin } = payment
+
+    // Handle Google Pay and Apple Pay based on paymentOrigin
+    if (paymentOrigin) {
+      if (paymentOrigin === 'Google Pay') {
+        return PAYMENT_FLAGS.googlepay
+      }
+      if (paymentOrigin === 'Apple Pay') {
+        return PAYMENT_FLAGS.applepay
+      }
+    }
+
+    let slug: string
+
+    switch (group) {
+      case PAYMENT_GROUPS.BANK_INVOICE:
+        slug = 'bankinvoice'
+        break
+      case PAYMENT_GROUPS.PAYPAL:
+        slug = 'paypal'
+        break
+      case PAYMENT_GROUPS.GIFT_CARD:
+        slug = 'giftcard'
+        break
+      case PAYMENT_GROUPS.DEBIT_CARD:
+        slug = 'cash'
+        break
+      default:
+        slug = paymentSystemName.toLowerCase().split(' ')[0]
+        break
+    }
+
+    if (!(slug in PAYMENT_FLAGS)) {
+      return null
+    }
+
+    return PAYMENT_FLAGS[slug as keyof typeof PAYMENT_FLAGS]
+  }
+
+  if (!shouldShowFlag(payment)) {
+    return null
+  }
+
+  const flagName = getPaymentFlag()
+
+  if (!flagName) {
+    return null
+  }
+
+  return (
+    <div data-fs-payment-flag>
+      <UIIcon name={flagName} height={22} />
+    </div>
+  )
+}
+
+export default MyAccountPaymentFlagsIcon

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

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

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

@@ -0,0 +1,76 @@
+[data-fs-order-payment-card] {
+  // --------------------------------------------------------
+  // Design Tokens for Order Payment Card
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-order-payment-card-gap                      : var(--fs-spacing-3);
+  --fs-order-payment-card-info-gap                 : var(--fs-spacing-1);
+  --fs-order-payment-card-info-color               : var(--fs-color-text);
+  --fs-order-payment-card-font-size                : var(--fs-text-size-2);
+  --fs-order-payment-card-line-height              : 1.5;
+  --fs-order-payment-card-font-weight              : var(--fs-text-weight-regular);
+  --fs-order-payment-card-datetime-font-size       : var(--fs-text-size-2);
+  --fs-order-payment-card-datetime-font-weight     : var(--fs-text-weight-medium);
+  --fs-order-payment-card-tid-color                : var(--fs-color-text-light);
+  --fs-order-payment-card-tid-font-size            : var(--fs-text-size-1);
+
+  [data-fs-card-body] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--fs-order-payment-card-gap);
+  }
+
+  [data-fs-payment-details] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--fs-spacing-3);
+  }
+
+  [data-fs-payment-info] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--fs-order-payment-card-info-gap);
+    font-size: var(--fs-order-payment-card-font-size);
+    line-height: var(--fs-order-payment-card-line-height);
+    color: var(--fs-order-payment-card-info-color);
+  }
+
+  [data-fs-payment-method] {
+    display: flex;
+    flex-direction: column;
+
+    [data-fs-payment-method-info] {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--fs-spacing-1);
+      align-items: flex-start;
+    }
+
+    [data-fs-payment-flag] {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--fs-spacing-5);
+      height: var(--fs-spacing-4);
+      padding: 2px 0;
+      color: var(--fs-color-neutral-4);
+      border: var(--fs-border-width) solid var(--fs-border-color-light);
+      border-radius: var(--fs-border-radius);
+    }
+  }
+
+  [data-fs-payment-transaction-info] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--fs-spacing-0);
+    font-size: var(--fs-order-payment-card-tid-font-size);
+    color: var(--fs-order-payment-card-tid-color);
+  }
+
+  [data-fs-payment-bank-invoice] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--fs-spacing-0);
+  }
+}

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

@@ -0,0 +1,276 @@
+import { Skeleton as UISkeleton, Icon as UIIcon } from '@faststore/ui'
+import { type ReactNode, useEffect, useRef } from 'react'
+import MyAccountCard from 'src/components/account/components/MyAccountCard'
+import { orderStatusMap, type OrderStatusKey } from 'src/utils/userOrderStatus'
+import { useConnectorPositioning } from './useConnectorPositioning'
+
+export type StepStatus = 'completed' | 'loading' | 'not-started' | 'failed'
+export type StepKey =
+  | 'order'
+  | 'approval'
+  | 'payment'
+  | 'processing'
+  | 'shipping'
+
+interface Step {
+  label: ReactNode
+  status: StepStatus
+  completedAt?: string
+}
+
+interface MyAccountStatusCardProps {
+  status: OrderStatusKey
+}
+
+// Define custom labels for each step based on their status
+// This allows us to show different text for the same step depending on its current state
+const STEP_LABELS: Record<StepKey, Record<StepStatus, string>> = {
+  order: {
+    completed: 'Order Placed',
+    loading: 'Order Placed',
+    'not-started': 'Order Placed',
+    failed: 'Order Placed',
+  },
+  approval: {
+    completed: 'Approved', // Custom
+    loading: 'Approval Pending', // Use from orderStatusMap
+    'not-started': 'Approval Pending',
+    failed: 'Denied', // Custom
+  },
+  payment: {
+    completed: 'Payment Approved', // Use from orderStatusMap
+    loading: 'Payment Pending', // Use from orderStatusMap
+    'not-started': 'Payment authorization', // Custom
+    failed: 'Payment Denied', // Use from orderStatusMap
+  },
+  processing: {
+    completed: 'Ready for Delivery', // Use from orderStatusMap
+    loading: 'Handling order', // Custom
+    'not-started': 'Handling order', // Custom
+    failed: 'Canceled', // Use from orderStatusMap
+  },
+  shipping: {
+    completed: 'Invoiced', // Use from orderStatusMap
+    loading: 'Shipping order', // Custom
+    'not-started': 'Ship order', // Custom
+    failed: 'Canceled', // Use from orderStatusMap
+  },
+}
+
+// Define the visual progression of order steps from start to finish
+const VISUAL_STEPS = [
+  {
+    label: (stepStatus: StepStatus) => STEP_LABELS.order[stepStatus],
+    key: 'order',
+  },
+  {
+    label: (stepStatus: StepStatus) => STEP_LABELS.approval[stepStatus],
+    key: 'approval',
+  },
+  {
+    label: (stepStatus: StepStatus) => STEP_LABELS.payment[stepStatus],
+    key: 'payment',
+  },
+  {
+    label: (stepStatus: StepStatus) => STEP_LABELS.processing[stepStatus],
+    key: 'processing',
+  },
+  {
+    label: (stepStatus: StepStatus) => STEP_LABELS.shipping[stepStatus],
+    key: 'shipping',
+  },
+] as const
+
+// Map labels from userOrderStatus.ts to step keys
+const LABEL_TO_STEP_MAPPING: Record<string, StepKey> = {
+  'Order Placed': 'order',
+  'Approval Pending': 'approval',
+  'Payment Pending': 'payment',
+  'Payment Approved': 'processing',
+  'Payment Denied': 'payment',
+  'Ready for Delivery': 'processing',
+  Invoiced: 'shipping',
+}
+
+// Define which order status labels indicate a canceled state
+const CANCELED_LABELS = ['Cancellation Requested', 'Canceled']
+
+// Define which order status labels indicate a failed state
+const FAILED_LABELS = ['Payment Denied']
+
+const formatDate = (date: string) => {
+  return new Intl.DateTimeFormat('en-US', {
+    month: '2-digit',
+    day: '2-digit',
+    year: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+    hour12: true,
+  }).format(new Date(date))
+}
+
+const StepIcon = ({ status }: { status: StepStatus }) => {
+  if (status === 'completed') {
+    return (
+      <div data-fs-shipping-step-icon data-fs-shipping-step-completed>
+        <UIIcon name="Checked" height={16} width={16} />
+      </div>
+    )
+  }
+
+  if (status === 'loading') {
+    return (
+      <div data-fs-shipping-step-icon data-fs-shipping-step-loading>
+        <UIIcon name="DotsThree" height={16} width={16} />
+      </div>
+    )
+  }
+
+  if (status === 'failed') {
+    return (
+      <div data-fs-shipping-step-icon data-fs-shipping-step-failed>
+        <UIIcon name="X" height={16} width={16} />
+      </div>
+    )
+  }
+
+  return <div data-fs-shipping-step-icon />
+}
+
+// Determine the visual status (completed, loading, not-started, or failed) of a specific step based on the current order status
+const getStepStatus = ({
+  stepKey,
+  currentStatus,
+  isCanceled,
+  isFailed,
+}: {
+  stepKey: StepKey
+  currentStatus: OrderStatusKey
+  isCanceled: boolean
+  isFailed: boolean
+}): StepStatus => {
+  // Get the label for the current status from userOrderStatus.ts
+  const currentStatusLabel = orderStatusMap[currentStatus]?.label
+
+  // If order is canceled, handle it specially
+  if (isCanceled) {
+    // For canceled orders, only the middle step (payment) will be marked as failed and the rest as not-started
+    if (stepKey === 'payment') {
+      return 'failed'
+    }
+
+    return 'not-started'
+  }
+
+  // Get the step key for the current status
+  const currentStepKey = currentStatusLabel
+    ? LABEL_TO_STEP_MAPPING[currentStatusLabel]
+    : undefined
+
+  if (isFailed && stepKey === currentStepKey) {
+    return 'failed'
+  }
+
+  const currentStepIndex = VISUAL_STEPS.findIndex(
+    (step) => step.key === currentStepKey
+  )
+
+  const thisStepIndex = VISUAL_STEPS.findIndex((step) => step.key === stepKey)
+
+  // If we couldn't find the current step in our mapping
+  if (currentStepIndex === -1) {
+    // If this is the first step, it should be loading (order is in progress)
+    if (thisStepIndex === 0) {
+      return 'loading'
+    }
+
+    // All other steps haven't started yet
+    return 'not-started'
+  }
+
+  // If this is the current step, show it as loading/in progress
+  if (thisStepIndex === currentStepIndex) {
+    return 'loading'
+  }
+  // Steps before the current step are completed, steps after are not started
+  return thisStepIndex < currentStepIndex ? 'completed' : 'not-started'
+}
+
+function MyAccountStatusCard({ status }: MyAccountStatusCardProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  useConnectorPositioning(containerRef)
+
+  // Get the label for the current status and check if it's a failed status
+  const currentStatusLabel = orderStatusMap[status]?.label
+  const isCanceled = currentStatusLabel
+    ? CANCELED_LABELS.includes(currentStatusLabel)
+    : false
+  const isFailed = currentStatusLabel
+    ? FAILED_LABELS.includes(currentStatusLabel)
+    : false
+
+  const steps: Step[] = VISUAL_STEPS.map((step) => {
+    const stepStatus = getStepStatus({
+      stepKey: step.key,
+      currentStatus: status,
+      isCanceled,
+      isFailed,
+    })
+
+    const stepLabel = isCanceled ? (
+      step.key === 'payment' ? (
+        currentStatusLabel
+      ) : (
+        <UISkeleton
+          key={step.key}
+          size={{ width: '100px', height: '14px' }}
+          shimmer={false}
+        />
+      )
+    ) : (
+      step.label(stepStatus)
+    )
+
+    return {
+      label: stepLabel,
+      status: stepStatus,
+    }
+  })
+
+  return (
+    <MyAccountCard title="Status" data-fs-order-status-card>
+      <div data-fs-order-status-content ref={containerRef}>
+        {steps.map((step, index) => (
+          <div
+            key={`${step.label}-${index}`}
+            data-fs-shipping-step
+            data-fs-shipping-status={step.status}
+          >
+            <StepIcon status={step.status} />
+            <div data-fs-shipping-step-content>
+              <p data-fs-shipping-step-label>{step.label}</p>
+              {step.completedAt && (
+                <div data-fs-shipping-step-details>
+                  <span data-fs-shipping-step-date>
+                    {formatDate(step.completedAt)}
+                  </span>
+                </div>
+              )}
+            </div>
+            {index < steps.length - 1 && (
+              <div
+                data-fs-shipping-connector
+                data-fs-shipping-connector-status={
+                  step.status === 'completed' ? 'completed' : 'not-started'
+                }
+              />
+            )}
+          </div>
+        ))}
+      </div>
+    </MyAccountCard>
+  )
+}
+
+export default MyAccountStatusCard

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

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