@faststore/core 3.64.1 → 3.65.1

package/src/components/account/MyAccountUserDetails/styles.module.scss

@@ -0,0 +1,108 @@
+@layer components {
+  .section {
+    @import "../components/MyAccountTag/styles.scss";
+
+    // --------------------------------------------------------
+    // Design Tokens
+    // --------------------------------------------------------
+
+    --fs-user-details-padding                     : var(--fs-spacing-4) var(--fs-spacing-9);
+
+    // Title
+    --fs-user-details-title-padding               : var(--fs-spacing-4) 0;
+    --fs-user-details-title-size                  : var(--fs-text-size-4);
+    --fs-user-details-title-weight                : var(--fs-text-weight-semibold);
+    --fs-user-details-title-line-height           : var(--fs-spacing-4);
+
+    // Divider
+    --fs-user-details-divider-border              : calc(var(--fs-border-width) / 2) solid #e0e0e0;
+
+    // Row
+    --fs-user-details-row-padding                 : var(--fs-spacing-4) 0;
+    --fs-user-details-row-weight                  : var(--fs-text-weight-medium);
+    --fs-user-details-row-label-width             : 12.5rem;
+    --fs-user-details-row-label-size              : var(--fs-text-size-1);
+    --fs-user-details-row-label-weight            : var(--fs-text-weight-medium);
+    --fs-user-details-row-label-color             : var(--fs-color-neutral-5);
+
+    // Row Value
+    --fs-user-details-row-value-size              : var(--fs-text-size-1);
+    --fs-user-details-row-value-weight            : var(--fs-text-weight-medium);
+    --fs-user-details-row-value-color             : black;
+
+    width: 100%;
+    padding: var(--fs-user-details-padding);
+
+    @include media("<notebook") {
+      padding: var(--fs-spacing-0) var(--fs-spacing-5);
+    }
+
+    [data-fs-user-details-table] {
+      width: 100%;
+      border-spacing: 0;
+      border-collapse: collapse;
+    }
+
+    [data-fs-user-details-row] {
+      display: flex;
+      padding: var(--fs-user-details-row-padding);
+      font-weight: var(--fs-user-details-row-weight);
+      line-height: var(--fs-user-details-row-line-height);
+      border-bottom: var(--fs-user-details-divider-border);
+
+      @include media("<tablet") {
+        flex-direction: column;
+        gap: .5rem;
+      }
+    }
+
+    [data-fs-user-details-row]:last-of-type {
+      border-bottom: none;
+    }
+
+    [data-fs-user-details-divider-row] {
+      height: 0;
+    }
+
+    [data-fs-user-details-divider] {
+      height: 0;
+      padding: 0;
+      border: none;
+      border: var(--fs-user-details-divider-border);
+    }
+
+    [data-fs-user-details-title] {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: var(--fs-user-details-title-padding);
+      font-size: var(--fs-user-details-title-size);
+      font-weight: var(--fs-user-details-title-weight);
+      line-height: var(--fs-user-details-title-line-height);
+    }
+
+    [data-fs-user-details-row-label] {
+      width: var(--fs-user-details-row-label-width);
+      font-size: var(--fs-user-details-row-label-size);
+      font-weight: var(--fs-user-details-row-label-weight);
+      color: var(--fs-user-details-row-label-color);
+      text-align: left;
+    }
+
+    [data-fs-user-details-row-value] {
+      font-size: var(--fs-user-details-row-value-size);
+      font-weight: var(--fs-user-details-row-value-weight);
+      color: var(--fs-user-details-row-value-color);
+    }
+
+    [data-fs-user-details-row-tags] {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--fs-spacing-0);
+
+      [data-fs-user-details-row-value] {
+        margin-top: var(--fs-spacing-0);
+      }
+    }
+  }
+}

package/src/components/account/components/MyAccountTag/MyAccountTag.tsx

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react'
+
+export type TagProps = {
+  children: ReactNode
+}
+
+const Tag = ({ children, ...otherProps }: TagProps) => (
+  <span data-fs-tag {...otherProps}>
+    {children}
+  </span>
+)
+
+export default Tag

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

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

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

@@ -0,0 +1,23 @@
+[data-fs-tag] {
+  // --------------------------------------------------------
+  // Design Tokens
+  // --------------------------------------------------------
+
+  --fs-tag-padding       : var(--fs-spacing-0) var(--fs-spacing-2);
+  --fs-tag-font-size     : var(--fs-text-size-0);
+  --fs-tag-font-weight   : var(--fs-text-weight-regular);
+  --fs-tag-line-height   : var(--fs-spacing-3);
+  --fs-tag-color         : black;
+  --fs-tag-bkg-color     : #f5f5f5;
+  --fs-tag-radius        : var(--fs-border-radius-pill);
+
+  padding: var(--fs-tag-padding);
+  margin-right: var(--fs-spacing-0);
+  font-size: var(--fs-tag-font-size);
+  font-weight: var(--fs-tag-font-weight);
+  line-height: var(--fs-tag-line-height);
+  color: var(--fs-tag-color);
+  white-space: nowrap;
+  background-color: var(--fs-tag-bkg-color);
+  border-radius: var(--fs-tag-radius);
+}

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

@@ -0,0 +1,153 @@
+import {
+  Alert as UIAlert,
+  Button as UIButton,
+  Icon as UIIcon,
+  useUI,
+} from '@faststore/ui'
+import { useState } from 'react'
+import MyAccountOrderActionModal from '../MyAccountOrderActionModal'
+import { useOrderAuthorization } from 'src/sdk/account/useOrderAuthorization'
+import type { ProcessOrderAuthorizationRule } from '@generated/graphql'
+
+interface MyAccountBuyingPolicyAlertProps {
+  ruleForAuthorization: ProcessOrderAuthorizationRule
+  onAuthorizationComplete?: () => void
+}
+
+export default function MyAccountBuyingPolicyAlert({
+  ruleForAuthorization,
+  onAuthorizationComplete,
+}: MyAccountBuyingPolicyAlertProps) {
+  const { pushToast } = useUI()
+  const [isAuthorizationOpen, setIsAuthorizationOpen] = useState<boolean>(false)
+  const { data, error, processOrderAuthorization, loading } =
+    useOrderAuthorization()
+
+  const handleApprove = async () => {
+    try {
+      await processOrderAuthorization({
+        data: {
+          orderAuthorizationId: ruleForAuthorization.orderAuthorizationId,
+          ruleId: ruleForAuthorization.rule.id,
+          dimensionId: ruleForAuthorization.dimensionId,
+          approved: true,
+        },
+      })
+
+      // Success toast
+      pushToast({
+        status: 'INFO',
+        message: `${ruleForAuthorization.rule.name} policy approved successfully.`,
+        icon: <UIIcon width={30} height={30} name="CircleWavyCheck" />,
+      })
+
+      onAuthorizationComplete?.()
+    } catch (error) {
+      pushToast({
+        status: 'ERROR',
+        message: "Policy couldn't be approved due to a technical issue.",
+        icon: <UIIcon width={30} height={30} name="CircleWavyWarning" />,
+      })
+    }
+  }
+
+  const handleReject = async () => {
+    try {
+      await processOrderAuthorization({
+        data: {
+          orderAuthorizationId: ruleForAuthorization.orderAuthorizationId,
+          ruleId: ruleForAuthorization.rule.id,
+          dimensionId: ruleForAuthorization.dimensionId,
+          approved: false,
+        },
+      })
+
+      pushToast({
+        status: 'INFO',
+        message: `${ruleForAuthorization.rule.name} policy rejected successfully. Order denied.`,
+        icon: <UIIcon width={30} height={30} name="XCircle" />,
+      })
+
+      setIsAuthorizationOpen(false)
+      onAuthorizationComplete?.()
+    } catch (error) {
+      pushToast({
+        status: 'ERROR',
+        message: "Policy couldn't be rejected due to a technical issue.",
+        icon: <UIIcon width={30} height={30} name="CircleWavyWarning" />,
+      })
+    }
+  }
+
+  if (!ruleForAuthorization) {
+    return null
+  }
+
+  return (
+    <>
+      <div data-fs-buying-policy-alert>
+        <div data-fs-buying-policy-message>
+          <h3 data-fs-buying-policy-title>{ruleForAuthorization.rule.name}</h3>
+          <p data-fs-buying-policy-description>
+            This buying policy requires your approval before the order can
+            proceed.
+          </p>
+        </div>
+
+        <div data-fs-buying-policy-actions>
+          <UIButton
+            variant="secondary"
+            size="small"
+            icon={<UIIcon name="XCircle" />}
+            onClick={() => setIsAuthorizationOpen(true)}
+            disabled={loading}
+            data-fs-buying-policy-action-reject
+            data-fs-button-danger
+          >
+            Reject
+          </UIButton>
+          <UIButton
+            variant="primary"
+            size="small"
+            icon={<UIIcon name="CircleCheck" />}
+            onClick={handleApprove}
+            loading={loading}
+            data-fs-buying-policy-action-approve
+          >
+            Approve
+          </UIButton>
+        </div>
+      </div>
+
+      {data?.isPendingForOtherAuthorizer && (
+        <UIAlert
+          data-fs-pending-policies-alert
+          icon={<UIIcon name="Info" width={20} height={20} />}
+        >
+          Your approval is recorded. This order is still pending further
+          approvals.
+        </UIAlert>
+      )}
+
+      <MyAccountOrderActionModal
+        isOpen={isAuthorizationOpen}
+        loading={loading}
+        onClose={() => setIsAuthorizationOpen(false)}
+        onConfirm={handleReject}
+        title="Reject approval request"
+        message={
+          <>
+            You're about to reject this approval request, triggered by the
+            {` ${ruleForAuthorization.rule.name} policy`}. Rejecting any
+            approval request will deny the entire order.
+            <br />
+            <br />
+            This action is permanent and cannot be undone.
+          </>
+        }
+        confirmText="Reject"
+        danger
+      />
+    </>
+  )
+}

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

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

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

@@ -0,0 +1,72 @@
+[data-fs-buying-policy-alert] {
+  // --------------------------------------------------------
+  // Design Tokens
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-buying-policy-card-padding           : var(--fs-spacing-3);
+  --fs-buying-policy-card-gap               : var(--fs-spacing-0);
+  --fs-buying-policy-card-border-radius     : var(--fs-border-radius);
+  --fs-buying-policy-card-bkg               : #fdf5e9;
+
+  // Message
+  --fs-buying-policy-title-size             : var(--fs-text-size-2);
+  --fs-buying-policy-title-weight           : var(--fs-text-weight-semibold);
+  --fs-buying-policy-title-line-height      : 1.5;
+  --fs-buying-policy-description-size       : var(--fs-text-size-1);
+  --fs-buying-policy-description-line-height: 1.43;
+  --fs-buying-policy-description-color      : var(--fs-color-text-light);
+
+  // Pending policies alert
+  --fs-pending-policies-alert-bkg           : #e1f3ff;
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  display: flex;
+  flex-flow: row wrap;
+  gap: var(--fs-buying-policy-card-gap);
+  justify-content: space-between;
+  padding: var(--fs-buying-policy-card-padding);
+  background: var(--fs-buying-policy-card-bkg);
+  border-radius: var(--fs-buying-policy-card-border-radius);
+
+  [data-fs-button-icon] {
+    flex-shrink: 0;
+  }
+
+  [data-fs-buying-policy-message] {
+    [data-fs-buying-policy-title] {
+      font-size: var(--fs-buying-policy-title-size);
+      font-weight: var(--fs-buying-policy-title-weight);
+      line-height: var(--fs-buying-policy-title-line-height);
+      color: var(--fs-color-text);
+    }
+
+    [data-fs-buying-policy-description] {
+      font-size: var(--fs-buying-policy-description-size);
+      line-height: var(--fs-buying-policy-description-line-height);
+      color: var(--fs-buying-policy-description-color);
+    }
+  }
+
+  [data-fs-buying-policy-actions] {
+    display: flex;
+    align-items: flex-start;
+
+    [data-fs-buying-policy-action-reject] {
+      --fs-button-secondary-text-color: var(--fs-color-danger-text);
+      --fs-button-secondary-bkg-color-hover: var(--fs-button-secondary-text-color);
+    }
+  }
+
+  [data-fs-buying-policy-alert] {
+    grid-column: span 2;
+  }
+
+  [data-fs-pending-policies-alert] {
+    grid-column: span 2;
+    background: var(--fs-pending-policies-alert-bkg);
+  }
+}

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

@@ -4,118 +4,71 @@ import {
   ModalBody as UIModalBody,
   ModalFooter as UIModalFooter,
   Button as UIButton,
+  type ButtonProps,
+  useFadeEffect,
 } 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
+  title: string
+  message: React.ReactNode
+  confirmText: string
+  cancelText?: string
+  confirmVariant?: ButtonProps['variant']
+  danger?: boolean
+  onClose: () => void
+  onConfirm: () => void
 }
 
 export default function MyAccountOrderActionModal({
   isOpen = false,
   loading = false,
-  fade = 'out',
-  actionType,
+  title,
+  message,
+  confirmText,
+  cancelText = 'Not now',
+  confirmVariant = 'primary',
+  danger = false,
   onClose,
   onConfirm,
 }: MyAccountOrderActionModalProps) {
-  const { isMobile, isTablet } = useScreenResize()
+  const { fade, fadeOut, fadeIn } = useFadeEffect()
 
-  const config: OrderActionConfig | null =
-    actionType && ACTION_CONFIGS[actionType]
-  const dialogContent = (
-    <>
-      <UIModalHeader
-        title={config?.title}
-        onClose={() => onClose(actionType)}
-      />
+  return (
+    <UIModal
+      data-fs-order-details-action-modal
+      isOpen={isOpen}
+      onDismiss={fadeOut}
+      onTransitionEnd={() => {
+        if (fade === 'out') {
+          onClose()
+          fadeIn()
+        }
+      }}
+      overlayProps={{
+        className: styles.orderActionsModal,
+      }}
+      data-fs-modal-state={fade}
+    >
+      <UIModalHeader title={title} onClose={fadeOut} />
       <UIModalBody>
-        <p data-fs-order-details-action-modal-message>{config?.message}</p>
+        <p data-fs-order-details-action-modal-message>{message}</p>
       </UIModalBody>
       <UIModalFooter>
-        <UIButton variant="tertiary" onClick={() => onClose(actionType)}>
-          {config?.cancelText}
+        <UIButton variant="secondary" onClick={fadeOut} disabled={loading}>
+          {cancelText}
         </UIButton>
         <UIButton
-          variant={config?.confirmVariant}
-          onClick={() => onConfirm(actionType)}
+          variant={confirmVariant}
+          onClick={onConfirm}
           loading={loading}
+          data-fs-button-danger={danger}
         >
-          {config?.confirmText}
+          {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

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

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

@@ -7,34 +7,47 @@
     @import "src/components/account/components/BottomSheet/styles.scss";
 
     [data-fs-order-details-action-modal] {
+      [data-fs-modal-header] {
+        [data-fs-modal-header-title] {
+          margin: 0;
+          font-size: var(--fs-text-size-lead);
+          font-weight: var(--fs-text-weight-medium);
+          line-height: 1.56;
+        }
+      }
+
       [data-fs-modal-body] {
         [data-fs-order-details-action-modal-message] {
-          font-size: var(--fs-text-size-body);
-          line-height: 1.5;
+          font-size: var(--fs-text-size-2);
+          line-height: 1.25;
           color: var(--fs-color-text);
         }
       }
 
       [data-fs-modal-footer] {
-        @include media("<=tablet") {
-          padding: var(--fs-spacing-3) 0 var(--fs-spacing-3);
+        padding: var(--fs-spacing-3) var(--fs-spacing-4);
 
-          [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;
+        [data-fs-modal-footer-actions] {
+          display: flex;
+          flex-flow: row wrap;
+          gap: var(--fs-spacing-3);
+          align-items: center;
+          padding: 0;
 
-            > * {
-              flex-grow: 1;
-            }
+          > * {
+            flex-grow: 1;
           }
         }
       }
     }
+
+    [data-fs-button-danger] {
+      --fs-button-secondary-text-color: var(--fs-color-danger-text);
+      --fs-button-secondary-bkg-color-hover: var(--fs-button-secondary-text-color);
+      --fs-button-tertiary-text-color: var(--fs-color-danger-text);
+      --fs-button-primary-bkg-color: var(--fs-color-danger-text);
+      --fs-button-primary-bkg-color-hover: var(--fs-button-primary-bkg-color);
+      --fs-button-primary-bkg-color-active: var(--fs-button-primary-bkg-color);
+    }
   }
 }