@faststore/core 3.64.1 → 3.65.0

package/src/components/account/security/SecurityDrawer.tsx

@@ -0,0 +1,160 @@
+import { useEffect, useState } from 'react'
+import {
+  Button,
+  Icon,
+  IconButton,
+  Input,
+  SlideOver,
+  SlideOverHeader,
+  useFadeEffect,
+} from '@faststore/ui'
+
+import styles from './styles.module.scss'
+
+type SecurityDrawerProps = {
+  isOpen: boolean
+  onClose: () => void
+}
+
+const validations = [
+  { label: '8 characters', test: (v: string) => v.length >= 8 },
+  { label: '1 uppercase letter', test: (v: string) => /[A-Z]/.test(v) },
+  { label: '1 lowercase letter', test: (v: string) => /[a-z]/.test(v) },
+  { label: '1 number', test: (v: string) => /\d/.test(v) },
+]
+
+export const SecurityDrawer = ({ isOpen, onClose }: SecurityDrawerProps) => {
+  const { fade, fadeOut } = useFadeEffect()
+
+  const [currentPassword, setCurrentPassword] = useState('')
+  const [showCurrentPassword, setShowCurrentPassword] = useState(false)
+
+  const [newPassword, setNewPassword] = useState('')
+  const [showNewPassword, setShowNewPassword] = useState(false)
+
+  const newPasswordValidations = validations.map((rule) => ({
+    label: rule.label,
+    isValid: rule.test(newPassword),
+  }))
+
+  const allValid = newPasswordValidations.every((r) => r.isValid)
+
+  const handleClose = () => {
+    setCurrentPassword('')
+    setShowCurrentPassword(false)
+    setNewPassword('')
+    setShowNewPassword(false)
+    onClose()
+  }
+
+  return (
+    <SlideOver
+      data-fs-security-drawer
+      fade={fade}
+      onDismiss={fadeOut}
+      onTransitionEnd={() => fade === 'out' && handleClose()}
+      isOpen={isOpen}
+      size="partial"
+      direction="rightSide"
+      overlayProps={{ className: styles.section }}
+    >
+      <SlideOverHeader data-fs-security-drawer-header onClose={handleClose}>
+        <h1 data-fs-security-drawer-header-title>Reset password</h1>
+      </SlideOverHeader>
+
+      <div data-fs-security-drawer-body>
+        <div data-fs-security-drawer-body-form>
+          <div data-fs-security-drawer-body-current-password>
+            <Input
+              data-fs-security-drawer-input
+              id="security-drawer-input-current-password"
+              type={showCurrentPassword ? 'text' : 'password'}
+              placeholder="Current Password"
+              inputMode="text"
+              value={currentPassword}
+              onChange={(e) => setCurrentPassword(e.target.value)}
+            />
+            <IconButton
+              data-fs-security-drawer-input-password-toggle
+              size="small"
+              aria-label="Show Password"
+              onClick={() => setShowCurrentPassword((prev) => !prev)}
+              icon={
+                showCurrentPassword ? (
+                  <Icon name="EyeSlash" />
+                ) : (
+                  <Icon name="Eye" />
+                )
+              }
+            />
+          </div>
+
+          <div data-fs-security-drawer-body-new-password>
+            <Input
+              data-fs-security-drawer-input
+              id="security-drawer-input-new-password"
+              type={showNewPassword ? 'text' : 'password'}
+              placeholder="New Password"
+              inputMode="text"
+              value={newPassword}
+              onChange={(e) => setNewPassword(e.target.value)}
+            />
+            <IconButton
+              data-fs-security-drawer-input-password-toggle
+              size="small"
+              aria-label="Show Password"
+              onClick={() => setShowNewPassword((prev) => !prev)}
+              icon={
+                showNewPassword ? <Icon name="EyeSlash" /> : <Icon name="Eye" />
+              }
+            />
+          </div>
+
+          {newPassword.length > 0 && (
+            <div data-fs-security-drawer-input-password-rules-container>
+              <p data-fs-security-drawer-input-password-rules-title>
+                Your password must have at least:
+              </p>
+
+              <ul data-fs-security-drawer-input-password-rules-list>
+                {newPasswordValidations.map((rule, index) => (
+                  <li
+                    key={index}
+                    data-fs-security-drawer-input-password-rule-item
+                    data-status={rule.isValid ? 'success' : 'error'}
+                  >
+                    <Icon
+                      name={rule.isValid ? 'CheckCircle' : 'XCircle'}
+                      width={20}
+                      height={20}
+                    />
+                    {rule.label}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <footer data-fs-security-drawer-footer>
+        <Button variant="tertiary" onClick={handleClose}>
+          Cancel
+        </Button>
+
+        <Button
+          data-fs-security-drawer-footer-button
+          variant="primary"
+          disabled={!currentPassword || !newPassword || !allValid}
+          onClick={() => {
+            // TODO: Handle password save logic here
+            console.log('Saving new password')
+            handleClose()
+          }}
+        >
+          Save Password
+        </Button>
+      </footer>
+    </SlideOver>
+  )
+}

package/src/components/account/security/SecuritySection.tsx

@@ -0,0 +1,45 @@
+import { useState } from 'react'
+import { Button } from '@faststore/ui'
+
+import { SecurityDrawer } from './SecurityDrawer'
+import styles from './styles.module.scss'
+
+export const SecuritySection = () => {
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false)
+  return (
+    <>
+      {isDrawerOpen && (
+        <SecurityDrawer
+          isOpen={isDrawerOpen}
+          onClose={() => setIsDrawerOpen(false)}
+        />
+      )}
+
+      <section data-fs-securiry-section className={styles.section}>
+        <header data-fs-security-header>
+          <h1 data-fs-security-title>Security</h1>
+        </header>
+
+        <div data-fs-security-container>
+          <table data-fs-security-table>
+            <tbody data-fs-security-table-body>
+              <tr data-fs-security-table-row>
+                <th data-fs-security-table-heading>Password</th>
+                <td data-fs-security-table-data>
+                  <span data-fs-security-table-data-text>••••••••••</span>
+                  <Button
+                    variant="tertiary"
+                    data-fs-security-table-action-button
+                    onClick={() => setIsDrawerOpen(true)}
+                  >
+                    Reset password
+                  </Button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </>
+  )
+}

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

@@ -0,0 +1,2 @@
+export * from './SecuritySection'
+export * from './SecurityDrawer'

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

@@ -0,0 +1,263 @@
+@layer components {
+  .section {
+    @import "@faststore/ui/src/components/atoms/Overlay/styles.scss";
+    @import "@faststore/ui/src/components/atoms/Button/styles.scss";
+    @import "@faststore/ui/src/components/atoms/Input/styles.scss";
+    @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
+    @import "@faststore/ui/src/components/organisms/SlideOver/styles.scss";
+
+    // --------------------------------------------------------
+    // Design Tokens
+    // --------------------------------------------------------
+
+    // Default properties
+    --fs-security-drawer-color-error: #940303;
+    --fs-security-drawer-color-success: #015132;
+
+    // --------------------------------------------------------
+    // Structural Styles
+    // --------------------------------------------------------
+
+    [data-fs-security-drawer] {
+      display: flex;
+      flex-direction: column;
+    }
+
+    [data-fs-security-drawer-header] {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      border-bottom: var(--fs-border-width) solid var(--fs-border-color-light);
+    }
+
+    [data-fs-security-drawer-header-title] {
+      font-size: var(--fs-text-size-3);
+      font-weight: var(--fs-text-weight-bold);
+      color: var(--fs-color-text);
+    }
+
+    [data-fs-security-drawer-body] {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      gap: var(--fs-spacing-6);
+      padding: var(--fs-spacing-6);
+    }
+
+    [data-fs-security-drawer-body-form] {
+      display: flex;
+      flex-direction: column;
+      gap: var(--fs-spacing-3);
+    }
+
+    [data-fs-security-drawer-footer] {
+      display: flex;
+      gap: var(--fs-spacing-2);
+      align-items: center;
+      justify-content: center;
+      padding: var(--fs-spacing-3);
+      border-top: var(--fs-border-width) solid var(--fs-border-color-light);
+    }
+
+    [data-fs-security-drawer-input] {
+      width: 100%;
+      padding: var(--fs-spacing-2);
+      padding-right: var(--fs-spacing-8);
+      font-size: var(--fs-text-size-2);
+      font-weight: var(--fs-text-weight-regular);
+    }
+
+    [data-fs-security-drawer-input-password-rules-container] {
+      display: flex;
+      flex-direction: column;
+      gap: var(--fs-spacing-2);
+      padding-block: var(--fs-spacing-2);
+    }
+
+    [data-fs-security-drawer-input-password-rules-title] {
+      margin-bottom: var(--fs-spacing-2);
+      font-size: var(--fs-text-size-1);
+      font-weight: var(--fs-text-weight-semibold);
+      color: var(--fs-color-text-light);
+    }
+
+    [data-fs-security-drawer-input-password-rules-list] {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: var(--fs-spacing-1);
+      padding: 0;
+      list-style: none;
+    }
+
+    [data-fs-security-drawer-input-password-rule-item] {
+      display: flex;
+      gap: var(--fs-spacing-1);
+      align-items: center;
+      font-size: var(--fs-text-size-1);
+      font-weight: var(--fs-text-weight-regular);
+      color: var(--fs-color-danger-text);
+    }
+
+    [data-fs-security-drawer-input-password-rule-item][data-status="success"] {
+      color: var(--fs-security-drawer-color-success);
+    }
+
+    [data-fs-security-drawer-input-password-rule-item][data-status="error"] {
+      color: var(--fs-security-drawer-color-error);
+    }
+
+    [data-fs-security-drawer-body-info] {
+      display: flex;
+      gap: var(--fs-spacing-1);
+      align-items: center;
+      padding-block: var(--fs-spacing-2);
+      font-size: var(--fs-text-size-1);
+      font-weight: var(--fs-text-weight-regular);
+      color: var(--fs-color-text-light);
+    }
+
+    [data-fs-security-drawer-resend] {
+      font-size: var(--fs-text-size-1);
+      font-weight: var(--fs-text-weight-regular);
+      color: var(--fs-color-text-light);
+    }
+
+    [data-fs-security-drawer-body-new-password] {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      gap: var(--fs-spacing-1);
+      width: 100%;
+    }
+
+    [data-fs-security-drawer-body-current-password] {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      gap: var(--fs-spacing-1);
+      width: 100%;
+    }
+
+    [data-fs-security-drawer-input-password-toggle] {
+      position: absolute;
+      top: 50%;
+      right: 0;
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 2rem;
+      height: 2rem;
+      cursor: pointer;
+      background-color: transparent;
+      border-radius: 50%;
+      transform: translateY(-50%);
+    }
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--fs-spacing-6);
+
+    [data-fs-security-header] {
+      padding-block: var(--fs-spacing-6);
+      padding-inline: var(--fs-spacing-11);
+    }
+
+    [data-fs-security-title] {
+      font-family: var(--fs-text-face-title);
+      font-size: var(--fs-text-size-3);
+      font-weight: var(--fs-text-weight-semibold);
+    }
+
+    [data-fs-security-container] {
+      display: flex;
+      flex-direction: column;
+      gap: var(--fs-spacing-6);
+    }
+
+    [data-fs-security-table] {
+      display: grid;
+      grid-template-columns: minmax(11.25rem, auto) 1fr;
+      width: 100%;
+      padding-inline: var(--fs-spacing-11);
+      border-spacing: 0;
+      border-collapse: collapse;
+    }
+
+    [data-fs-security-table-body] {
+      display: contents;
+    }
+
+    [data-fs-security-table-row] {
+      display: contents;
+      border-bottom: var(--fs-border-width) solid var(--fs-border-color-light);
+    }
+
+    [data-fs-security-table-heading] {
+      display: flex;
+      align-items: center;
+      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-security-table-data] {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding-block: var(--fs-spacing-4);
+      padding-inline: var(--fs-spacing-1);
+      border-bottom: var(--fs-border-width) solid var(--fs-border-color-light);
+
+      [data-fs-security-table-data-text] {
+        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-semibold);
+        color: var(--fs-color-text);
+      }
+    }
+
+    [data-fs-security-table-action] {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      padding-inline: var(--fs-spacing-1);
+    }
+
+    @include media("<notebook") {
+      [data-fs-security-header] {
+        padding-inline: var(--fs-spacing-4);
+      }
+
+      [data-fs-security-body] {
+        padding-inline: var(--fs-spacing-4);
+      }
+
+      [data-fs-security-table] {
+        grid-template-columns: 1fr;
+      }
+
+      [data-fs-security-table-heading] {
+        padding-block: var(--fs-spacing-4) 0;
+        border-bottom: none;
+      }
+
+      [data-fs-security-table-data] {
+        padding-block: var(--fs-spacing-1) var(--fs-spacing-4);
+        padding-inline: 0;
+      }
+
+      [data-fs-security-drawer-footer] {
+        align-items: center;
+        justify-content: flex-end;
+      }
+    }
+  }
+}

package/src/components/navigation/Navbar/Navbar.tsx

@@ -188,7 +188,10 @@ function Navbar({
             )}
             {!isMobile &&
               (isOrganizationEnabled ? (
-                <OrganizationSignInButton icon={signInButton.icon} />
+                <OrganizationSignInButton
+                  icon={signInButton.icon}
+                  isRepresentative={isRepresentative}
+                />
               ) : (
                 <ButtonSignIn.Component {...signInButton} />
               ))}

package/src/components/navigation/NavbarSlider/NavbarSlider.tsx

@@ -77,7 +77,10 @@ function NavbarSlider({
       <NavbarSliderFooter.Component {...NavbarSliderFooter.props}>
         <Suspense fallback={<ButtonSignInFallback />}>
           {isOrganizationEnabled ? (
-            <OrganizationSignInButton icon={signInButton.icon} />
+            <OrganizationSignInButton
+              icon={signInButton.icon}
+              isRepresentative={isRepresentative}
+            />
           ) : (
             <ButtonSignIn.Component {...signInButton} />
           )}

package/src/experimental/myAccountSeverSideProps.ts

@@ -11,14 +11,17 @@ import {
   getGlobalSectionsData,
 } from 'src/components/cms/GlobalSections'
 import { execute } from 'src/server'
+import { getIsRepresentative } from 'src/sdk/account/getIsRepresentative'
 
 import { injectGlobalSections } from 'src/server/cms/global'
 import { getMyAccountRedirect } from 'src/utils/myAccountRedirect'
 import { validateUser } from 'src/sdk/account/validateUser'
+import storeConfig from '../../discovery.config'
 
 export type MyAccountProps = {
   globalSections: GlobalSectionsData
   accountName: string
+  isRepresentative?: boolean
 }
 
 const query = gql(`
@@ -43,6 +46,11 @@ export const getServerSideProps: GetServerSideProps<
     }
   }
 
+  const isRepresentative = getIsRepresentative({
+    headers: context.req.headers as Record<string, string>,
+    account: storeConfig.api.storeId,
+  })
+
   const { isFaststoreMyAccountEnabled, redirect } = getMyAccountRedirect({
     query: context.query,
   })
@@ -84,6 +92,7 @@ export const getServerSideProps: GetServerSideProps<
     props: {
       globalSections: globalSectionsResult,
       accountName: account.data.accountName,
+      isRepresentative,
     },
   }
 }

package/src/pages/account/orders/[id].tsx

@@ -11,17 +11,19 @@ import type { MyAccountProps } from 'src/experimental/myAccountSeverSideProps'
 import { validateUser } from 'src/sdk/account/validateUser'
 
 import { gql } from '@generated'
-import type {
-  ServerOrderDetailsQueryQuery,
-  ServerOrderDetailsQueryQueryVariables,
-} from '@generated/graphql'
 import { getGlobalSectionsData } from 'src/components/cms/GlobalSections'
 import { default as AfterSection } from 'src/customizations/src/myAccount/extensions/orders/[id]/after'
 import { default as BeforeSection } from 'src/customizations/src/myAccount/extensions/orders/[id]/before'
+import { getIsRepresentative } from 'src/sdk/account/getIsRepresentative'
 import { execute } from 'src/server'
 import { injectGlobalSections } from 'src/server/cms/global'
 import { getMyAccountRedirect } from 'src/utils/myAccountRedirect'
 import { extractStatusFromError } from 'src/utils/utilities'
+import storeConfig from '../../../../discovery.config'
+import type {
+  ServerOrderDetailsQueryQuery,
+  ServerOrderDetailsQueryQueryVariables,
+} from '@generated/graphql'
 
 const COMPONENTS: Record<string, ComponentType<any>> = {
   ...GLOBAL_COMPONENTS,
@@ -36,6 +38,7 @@ export default function OrderDetailsPage({
   globalSections,
   order,
   accountName,
+  isRepresentative,
 }: OrderDetailsPageProps) {
   return (
     <RenderSections
@@ -44,7 +47,10 @@ export default function OrderDetailsPage({
     >
       <NextSeo noindex nofollow />
 
-      <MyAccountLayout accountName={accountName}>
+      <MyAccountLayout
+        isRepresentative={isRepresentative}
+        accountName={accountName}
+      >
         <BeforeSection />
         <MyAccountOrderDetails order={order} />
         <AfterSection />
@@ -73,8 +79,52 @@ const query = gql(`
     userOrder(orderId: $orderId) {
       orderId
       status
+      canProcessOrderAuthorization
       statusDescription
       allowCancellation
+      ruleForAuthorization {
+        orderAuthorizationId
+        dimensionId
+        rule {
+          id
+          name
+          status
+          doId
+          authorizedEmails
+          priority
+          trigger {
+            condition {
+              conditionType
+              description
+              lessThan
+              greatherThan
+              expression
+            }
+            effect {
+              description
+              effectType
+              funcPath
+            }
+          }
+          timeout
+          notification
+          scoreInterval {
+            accept
+            deny
+          }
+          authorizationData {
+            requireAllApprovals
+            authorizers {
+              id
+              email
+              type
+              authorizationDate
+            }
+          }
+          isUserAuthorized
+          isUserNextAuthorizer
+        }
+      }
       storePreferencesData {
         currencyCode
       }
@@ -217,6 +267,11 @@ export const getServerSideProps: GetServerSideProps<
     }
   }
 
+  const isRepresentative = getIsRepresentative({
+    headers: context.req.headers as Record<string, string>,
+    account: storeConfig.api.storeId,
+  })
+
   const { isFaststoreMyAccountEnabled, redirect } = getMyAccountRedirect({
     query: context.query,
   })
@@ -281,6 +336,7 @@ export const getServerSideProps: GetServerSideProps<
       globalSections: globalSectionsResult,
       order: orderDetails.data.userOrder,
       accountName: orderDetails.data.accountName,
+      isRepresentative,
     },
   }
 }

package/src/pages/account/orders/index.tsx

@@ -23,8 +23,10 @@ import { getMyAccountRedirect } from 'src/utils/myAccountRedirect'
 import { groupOrderStatusByLabel } from 'src/utils/userOrderStatus'
 
 import { MyAccountListOrders } from 'src/components/account/orders/MyAccountListOrders'
-import { extractStatusFromError } from 'src/utils/utilities'
+import { getIsRepresentative } from 'src/sdk/account/getIsRepresentative'
+import storeConfig from '../../../../discovery.config'
 import { validateUser } from 'src/sdk/account/validateUser'
+import { extractStatusFromError } from 'src/utils/utilities'
 
 /* A list of components that can be used in the CMS. */
 const COMPONENTS: Record<string, ComponentType<any>> = {
@@ -53,6 +55,7 @@ export default function ListOrdersPage({
   total,
   perPage,
   filters,
+  isRepresentative,
 }: ListOrdersPageProps) {
   return (
     <RenderSections
@@ -61,7 +64,10 @@ export default function ListOrdersPage({
     >
       <NextSeo noindex nofollow />
 
-      <MyAccountLayout accountName={accountName}>
+      <MyAccountLayout
+        isRepresentative={isRepresentative}
+        accountName={accountName}
+      >
         <BeforeSection />
         <MyAccountListOrders
           listOrders={listOrders}
@@ -130,6 +136,11 @@ export const getServerSideProps: GetServerSideProps<
     }
   }
 
+  const isRepresentative = getIsRepresentative({
+    headers: context.req.headers as Record<string, string>,
+    account: storeConfig.api.storeId,
+  })
+
   const { previewData } = context
 
   const { isFaststoreMyAccountEnabled, redirect } = getMyAccountRedirect({
@@ -233,6 +244,7 @@ export const getServerSideProps: GetServerSideProps<
         text,
         clientEmail,
       },
+      isRepresentative,
     },
   }
 }