@faststore/core 3.97.0 → 3.97.1

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

@@ -0,0 +1,119 @@
+import type { ServerOrderDetailsQueryQuery } from '@generated/graphql'
+import MyAccountCard from 'src/components/account/components/MyAccountCard'
+import { useFormatPrice } from 'src/components/account/utils/useFormatPrice'
+
+interface MyAccountBudgetsCardProps {
+  budgetData: ServerOrderDetailsQueryQuery['userOrder']['budgetData']
+  currencyCode: string
+}
+
+function MyAccountBudgetsCard({
+  budgetData,
+  currencyCode,
+}: MyAccountBudgetsCardProps) {
+  const formatPrice = useFormatPrice()
+
+  if (!budgetData?.budgets || budgetData.budgets.length === 0) {
+    return null
+  }
+
+  // Process each budget to display correctly
+  const budgetRows = budgetData.budgets
+    .filter(
+      (budget) => budget && budget.allocations && budget.allocations.length > 0
+    )
+    .map((budget) => {
+      const allocations = budget.allocations.filter(Boolean)
+
+      // Calculate toBeSpent: sum all reservation values from all allocations
+      // reservations is an object (key: value), so we need to sum all values
+      const toBeSpent = allocations.reduce((total, allocation) => {
+        if (!allocation?.reservations) return total
+
+        const reservations = allocation.reservations
+        // If reservations is an object, sum all its values
+        if (typeof reservations === 'object' && reservations !== null) {
+          const reservationValues = Object.values(reservations).filter(
+            (val): val is number => typeof val === 'number'
+          )
+          return total + reservationValues.reduce((sum, val) => sum + val, 0)
+        }
+
+        return total
+      }, 0)
+
+      // Get remaining from budget.balance.remaining
+      const remaining = budget.balance?.remaining || 0
+
+      // Calculate available: toBeSpent + remaining
+      const available = toBeSpent + remaining
+
+      // Get list of allocation linkedEntity IDs
+      const allocationIds = allocations
+        .map((allocation) => allocation?.linkedEntity?.id)
+        .filter(Boolean)
+        .join(', ')
+
+      return {
+        budget,
+        allocationIds,
+        toBeSpent,
+        remaining,
+        available,
+      }
+    })
+
+  if (budgetRows.length === 0) {
+    return null
+  }
+
+  return (
+    <MyAccountCard title="Budgets" data-fs-order-budgets-card>
+      <div data-fs-budgets-table>
+        <div data-fs-budgets-table-header>
+          <div data-fs-budgets-header-name>Name</div>
+          <div data-fs-budgets-header-available>Available</div>
+          <div data-fs-budgets-header-to-be-spent>To be spent</div>
+          <div data-fs-budgets-header-remaining>Remaining</div>
+        </div>
+        <div data-fs-budgets-table-body>
+          {budgetRows.map(
+            (
+              { budget, allocationIds, toBeSpent, remaining, available },
+              index
+            ) => {
+              const budgetName = budget.name || ''
+              const allocationsList = allocationIds || ''
+
+              return (
+                <div data-fs-budgets-row key={budget.id || index}>
+                  <div data-fs-budgets-name>
+                    <div data-fs-budgets-name-primary>{budgetName}</div>
+                    <div data-fs-budgets-name-secondary title={allocationsList}>
+                      {allocationsList}
+                    </div>
+                  </div>
+                  <div data-fs-budgets-available>
+                    {Number.isFinite(available)
+                      ? formatPrice(available, currencyCode)
+                      : '—'}
+                  </div>
+                  <div data-fs-budgets-to-be-spent>
+                    {toBeSpent !== 0
+                      ? formatPrice(toBeSpent, currencyCode)
+                      : formatPrice(0, currencyCode)}
+                  </div>
+                  <div data-fs-budgets-remaining>
+                    <strong>{formatPrice(remaining, currencyCode)}</strong>
+                  </div>
+                </div>
+              )
+            }
+          )}
+        </div>
+      </div>
+    </MyAccountCard>
+  )
+}
+
+export default MyAccountBudgetsCard

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

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

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

@@ -0,0 +1,129 @@
+[data-fs-order-budgets-card] {
+  --fs-budgets-gap: var(--fs-spacing-3);
+  --fs-budgets-padding-y: var(--fs-spacing-2);
+  --fs-budgets-row-padding: var(--fs-spacing-3) 0;
+  --fs-budgets-font-size: var(--fs-text-size-2);
+  --fs-budgets-font-size-sm: var(--fs-text-size-1);
+  --fs-budgets-weight-regular: var(--fs-text-weight-regular);
+  --fs-budgets-weight-semibold: var(--fs-text-weight-semibold);
+  --fs-budgets-text: var(--fs-color-text);
+  --fs-budgets-text-secondary: var(--fs-color-text-secondary);
+  --fs-budgets-border-color: var(--fs-border-color-light);
+  --fs-budgets-cols-mobile: 2fr 1fr 1fr;
+  --fs-budgets-cols-desktop: 2fr 1fr 1fr 1fr;
+
+  [data-fs-budgets-table] {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  [data-fs-budgets-table-header] {
+    display: grid;
+    grid-template-columns: var(--fs-budgets-cols-mobile);
+    gap: var(--fs-budgets-gap);
+    padding: var(--fs-budgets-padding-y) 0;
+    font-size: var(--fs-budgets-font-size);
+    font-weight: var(--fs-budgets-weight-regular);
+    color: var(--fs-budgets-text-secondary);
+    border-bottom: 1px solid var(--fs-budgets-border-color);
+
+    [data-fs-budgets-header-name] {
+      text-align: left;
+    }
+
+    [data-fs-budgets-header-available],
+    [data-fs-budgets-header-to-be-spent],
+    [data-fs-budgets-header-remaining] {
+      text-align: right;
+      white-space: nowrap;
+    }
+
+    @include media('>=tablet') {
+      grid-template-columns: var(--fs-budgets-cols-desktop);
+    }
+
+    [data-fs-budgets-header-available] {
+      @include media('<tablet') {
+        display: none;
+      }
+    }
+  }
+
+  [data-fs-budgets-table-body] {
+    display: flex;
+    flex-direction: column;
+
+    [data-fs-budgets-row] {
+      display: grid;
+      grid-template-columns: var(--fs-budgets-cols-mobile);
+      gap: var(--fs-budgets-gap);
+      padding: var(--fs-budgets-row-padding);
+      border-bottom: 1px solid var(--fs-budgets-border-color);
+
+      // Prevent long content from forcing the grid to overflow
+      > * {
+        min-width: 0;
+      }
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      @include media('>=tablet') {
+        grid-template-columns: var(--fs-budgets-cols-desktop);
+      }
+    }
+
+    [data-fs-budgets-available] {
+      @include media('<tablet') {
+        display: none;
+      }
+    }
+  }
+
+  [data-fs-budgets-name] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--fs-spacing-0);
+  }
+
+  [data-fs-budgets-name-primary] {
+    overflow: hidden;
+    font-size: var(--fs-budgets-font-size);
+    font-weight: var(--fs-budgets-weight-semibold);
+    line-height: 1.4;
+    color: var(--fs-budgets-text);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  [data-fs-budgets-name-secondary] {
+    overflow: hidden;
+    font-size: var(--fs-budgets-font-size-sm);
+    font-weight: var(--fs-budgets-weight-regular);
+    line-height: 1.4;
+    color: var(--fs-budgets-text-secondary);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  [data-fs-budgets-available],
+  [data-fs-budgets-to-be-spent],
+  [data-fs-budgets-remaining] {
+    font-size: var(--fs-budgets-font-size);
+    font-weight: var(--fs-budgets-weight-regular);
+    color: var(--fs-budgets-text);
+    text-align: right;
+  }
+
+  [data-fs-budgets-remaining] {
+    strong {
+      font-weight: var(--fs-budgets-weight-semibold);
+    }
+  }
+
+  [data-fs-budgets-to-be-spent] {
+    color: var(--fs-budgets-text-secondary);
+  }
+}

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

@@ -9,22 +9,29 @@ import {
 import { useState } from 'react'
 import MyAccountOrderActionModal from 'src/components/account/orders/MyAccountOrderDetails/MyAccountOrderActionModal'
 import { useCancelOrder } from 'src/sdk/account/useCancelOrder'
+import { useReorder } from 'src/sdk/account/useReorder'
+import type { ServerOrderDetailsQueryQuery } from '@generated/graphql'
+
+type Order = ServerOrderDetailsQueryQuery['userOrder']
 
 interface MyAccountOrderActionsProps {
   allowCancellation: boolean
   orderId: string
   customerEmail?: string
+  order: Order
 }
 
 export default function MyAccountOrderActions({
   allowCancellation,
   orderId,
   customerEmail,
+  order,
 }: MyAccountOrderActionsProps) {
   const [isCancelOpen, setIsCancelOpen] = useState<boolean>(false)
   const { pushToast } = useUI()
 
   const { cancelOrder, loading } = useCancelOrder()
+  const { reorder } = useReorder()
 
   const handleCancel = async () => {
     const data = {
@@ -54,9 +61,8 @@ export default function MyAccountOrderActions({
     }
   }
 
-  // Don't render if no actions are available
-  if (!allowCancellation) {
-    return null
+  const handleReorder = () => {
+    reorder(order)
   }
 
   return (
@@ -67,13 +73,20 @@ export default function MyAccountOrderActions({
             <UIIcon name="DotsThree" data-fs-dropdown-icon />
           </DropdownButton>
           <DropdownMenu align="right">
+            <DropdownItem
+              type="button"
+              onClick={handleReorder}
+              data-fs-order-actions-item
+              data-fs-order-actions-item-reorder
+            >
+              Reorder
+            </DropdownItem>
             {allowCancellation && (
               <DropdownItem
                 type="button"
                 onClick={() => setIsCancelOpen(true)}
-                style={{
-                  color: 'var(--fs-color-text)',
-                }}
+                data-fs-order-actions-item
+                data-fs-order-actions-item-cancel
               >
                 Cancel order
               </DropdownItem>

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

@@ -7,4 +7,14 @@
   [data-fs-dropdown-button] {
     width: var(--fs-spacing-7);
   }
+
+  [data-fs-order-actions-item] {
+    color: var(--fs-color-text);
+  }
+
+  [data-fs-order-actions-item-reorder] {
+    @include media(">=tablet") {
+      display: none;
+    }
+  }
 }

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

@@ -6,7 +6,9 @@ import { MyAccountDeliveryOptionAccordion } from './MyAccountDeliveryOptionAccor
 import MyAccountOrderActions from './MyAccountOrderActions'
 import MyAccountOrderedByCard from './MyAccountOrderedByCard'
 import MyAccountPaymentCard from './MyAccountPaymentCard'
+import MyAccountReorderButton from './MyAccountReorderButton'
 import MyAccountSummaryCard from './MyAccountSummaryCard'
+import MyAccountBudgetsCard from './MyAccountBudgetsCard'
 
 import type {
   ServerOrderDetailsQueryQuery,
@@ -55,11 +57,15 @@ export default function MyAccountOrderDetails({
           </div>
         </div>
 
-        <MyAccountOrderActions
-          allowCancellation={order.allowCancellation}
-          orderId={order.orderId}
-          customerEmail={order.clientProfileData?.email}
-        />
+        <div data-fs-order-details-header-actions>
+          <MyAccountReorderButton order={order} />
+          <MyAccountOrderActions
+            allowCancellation={order.allowCancellation}
+            orderId={order.orderId}
+            customerEmail={order.clientProfileData?.email}
+            order={order}
+          />
+        </div>
       </header>
 
       <main data-fs-order-details-content>
@@ -117,6 +123,13 @@ export default function MyAccountOrderDetails({
         {moreInformationCustomFields?.length > 0 && (
           <MyAccountMoreInformationCard fields={moreInformationCustomFields} />
         )}
+
+        {order.budgetData && (
+          <MyAccountBudgetsCard
+            budgetData={order.budgetData}
+            currencyCode={order.storePreferencesData.currencyCode}
+          />
+        )}
       </main>
     </div>
   )

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

@@ -0,0 +1,37 @@
+import { Button } from '@faststore/ui'
+import { useReorder } from 'src/sdk/account/useReorder'
+import type { ServerOrderDetailsQueryQuery } from '@generated/graphql'
+
+type Order = ServerOrderDetailsQueryQuery['userOrder']
+
+export interface MyAccountReorderButtonProps {
+  order: Order
+  onClick?: () => void
+}
+
+export default function MyAccountReorderButton({
+  order,
+  onClick,
+}: MyAccountReorderButtonProps) {
+  const { reorder, loading } = useReorder()
+
+  const handleClick = async () => {
+    try {
+      await reorder(order)
+      onClick?.()
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  return (
+    <Button
+      variant="secondary"
+      data-fs-reorder-button
+      onClick={handleClick}
+      disabled={loading}
+    >
+      Reorder
+    </Button>
+  )
+}

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

@@ -0,0 +1,2 @@
+export { default } from './MyAccountReorderButton'
+export type { MyAccountReorderButtonProps } from './MyAccountReorderButton'

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

@@ -0,0 +1,10 @@
+[data-fs-reorder-button] {
+  flex-shrink: 0;
+
+  &:hover:not(:disabled) {
+    --fs-button-secondary-bkg-color: var(--fs-button-primary-bkg-color);
+    --fs-button-secondary-text-color: var(--fs-button-primary-text-color);
+    --fs-button-secondary-bkg-color-hover: var(--fs-button-primary-bkg-color-hover);
+    --fs-button-secondary-bkg-color-active: var(--fs-button-primary-bkg-color-active);
+  }
+}

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

@@ -15,33 +15,35 @@
   @import "./MyAccountPaymentCard/styles.scss";
   @import "./MyAccountDeliveryOptionAccordion/styles.scss";
   @import "./MyAccountOrderActions/styles.scss";
+  @import "./MyAccountReorderButton/styles.scss";
   @import "./MyAccountStatusCard/styles.scss";
   @import "./MyAccountMoreInformationCard/styles.scss";
   @import "./MyAccountBuyingPolicyAlert/styles.scss";
+  @import "./MyAccountBudgetsCard/styles.scss";
 
   // --------------------------------------------------------
   // Design Tokens
   // --------------------------------------------------------
 
   // Default properties
-  --fs-order-details-padding                        : 0 20px;
+  --fs-order-details-padding: 0 20px;
 
   // Header
-  --fs-order-details-header-gap                     : var(--fs-spacing-3);
-  --fs-order-details-header-padding                 : var(--fs-spacing-5) 0 var(--fs-spacing-4);
-  --fs-order-details-header-weight                  : var(--fs-text-weight-semibold);
-  --fs-order-details-header-size                    : var(--fs-text-size-4);
-  --fs-order-details-header-line-height             : 1.33;
+  --fs-order-details-header-gap: var(--fs-spacing-3);
+  --fs-order-details-header-padding: var(--fs-spacing-5) 0 var(--fs-spacing-4);
+  --fs-order-details-header-weight: var(--fs-text-weight-semibold);
+  --fs-order-details-header-size: var(--fs-text-size-4);
+  --fs-order-details-header-line-height: 1.33;
 
   // Content
-  --fs-order-details-content-gap                     : var(--fs-spacing-4);
+  --fs-order-details-content-gap: var(--fs-spacing-4);
 
   // --------------------------------------------------------
   // Structural Styles
   // --------------------------------------------------------
 
-  @include media (">=notebook") {
-    --fs-order-details-padding                      : 0;
+  @include media(">=notebook") {
+    --fs-order-details-padding: 0;
   }
 
   [data-fs-order-details-header] {
@@ -52,14 +54,14 @@
     justify-content: space-between;
     padding: var(--fs-order-details-header-padding);
 
-    @include media (">=tablet") {
-      --fs-order-details-header-gap                 : var(--fs-spacing-2);
+    @include media(">=tablet") {
+      --fs-order-details-header-gap: var(--fs-spacing-2);
 
       align-items: center;
     }
 
-    @include media (">=notebook") {
-      --fs-order-details-header-padding             : var(--fs-spacing-6) 0;
+    @include media(">=notebook") {
+      --fs-order-details-header-padding: var(--fs-spacing-6) 0;
     }
 
     [data-fs-order-details-header-title] {
@@ -70,11 +72,21 @@
 
       [data-fs-order-details-header-back-button] {
         flex-shrink: 0;
-        margin-top: calc(var(--fs-spacing-2) * -1); // Align the back button with the title
-        margin-left: calc(var(--fs-spacing-2) * -1); // Align the back button with the content
+        margin-top:
+          calc(
+            var(--fs-spacing-2) * -1
+          ); // Align the back button with the title
+
+        margin-left:
+          calc(
+            var(--fs-spacing-2) * -1
+          ); // Align the back button with the content
 
         @include media(">=notebook") {
-          margin-top: calc(var(--fs-spacing-1) * -1); // Align the back button with the title
+          margin-top:
+            calc(
+              var(--fs-spacing-1) * -1
+            ); // Align the back button with the title
         }
       }
 
@@ -98,6 +110,19 @@
         @include truncate-title(2);
       }
     }
+
+    [data-fs-order-details-header-actions] {
+      display: flex;
+      flex-direction: row;
+      gap: var(--fs-spacing-2);
+      align-items: center;
+
+      [data-fs-reorder-button] {
+        @include media("<tablet") {
+          display: none;
+        }
+      }
+    }
   }
 
   [data-fs-order-details-content] {
@@ -105,7 +130,7 @@
     flex-direction: column;
     gap: var(--fs-order-details-content-gap);
 
-    @include media (">=notebook") {
+    @include media(">=notebook") {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
     }
@@ -125,5 +150,9 @@
     [data-fs-delivery-option-accordion] {
       grid-column: span 2;
     }
+
+    [data-fs-order-budgets-card] {
+      grid-column: span 2;
+    }
   }
 }

package/src/constants.ts

@@ -1,3 +1,5 @@
 export const ITEMS_PER_PAGE = 12
 export const ITEMS_PER_SECTION = 5
 export const TIME_TO_VALIDATE_SESSION = 3000
+export const LOG_LABEL_STYLE =
+  'background:#C4144F;color:#fff;padding:2px 4px;border-radius:2px'

package/src/pages/_document.tsx

@@ -1,10 +1,17 @@
 import { Head, Html, Main, NextScript } from 'next/document'
 import storeConfig from '../../discovery.config'
 
+import { GTM_DEBUG_QUERY_STRING } from 'src/components/ThirdPartyScripts/GoogleTagManager'
 import { WebFonts } from 'src/customizations/src/GlobalOverrides'
 
 function Document() {
   const direction = storeConfig.direction || 'ltr'
+  const gtmContainerId = storeConfig.analytics?.gtmContainerId
+  const includeGTM = typeof gtmContainerId === 'string'
+  const includeVTEX = storeConfig.platform === 'vtex'
+  const enableScriptsLogs = storeConfig.experimental?.enableScriptsLogs === true
+  const forwards = []
+  if (includeVTEX) forwards.push('sendrc')
 
   return (
     <Html dir={direction}>
@@ -19,6 +26,39 @@ function Document() {
         />
         <meta name="storefront" content="fast_store" />
         <WebFonts />
+        {/* Partytown config must be set before loading the library.
+         * We're setting the partytown config (forward property) dynamically based on the gtm_debug query string
+         * This helps users see the GTM events properly when using GTM preview. All it does is NOT forward dataLayer.push
+         * calls to partytown when the gtm_debug query string is present.
+         *
+         * This is not done in the component because the window var is not available yet.
+         */}
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `var partytown={
+              debug:${enableScriptsLogs},
+              logCalls:${enableScriptsLogs},
+              forward:[...${JSON.stringify(
+                forwards
+              )},!window.location.search.includes('${GTM_DEBUG_QUERY_STRING}=')&&${includeGTM}?'dataLayer.push':null].filter(Boolean)
+            }`,
+          }}
+        />
+        {/* Only load Partytown when not in an iframe to prevent cross-origin errors.
+         * https://github.com/vtex/faststore/pull/3155
+         */}
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              if (window.self === window.top) {
+                var partytownScript = document.createElement('script');
+                partytownScript.async = true;
+                partytownScript.src = '/~partytown/partytown.js';
+                document.head.appendChild(partytownScript);
+              }
+            `,
+          }}
+        />
       </Head>
       <body className="theme">
         <Main />

package/src/pages/api/preview.ts

@@ -1,13 +1,13 @@
 import type { NextApiHandler, NextApiRequest, NextApiResponse } from 'next'
 
-import { previewRedirects } from '../../../discovery.config'
-import { contentService } from 'src/server/content/service'
 import { isLocator } from 'src/server/cms'
+import { contentService } from 'src/server/content/service'
+import type { PreviewData } from 'src/server/content/types'
 import {
   isBranchPreview,
   isContentPlatformSource,
 } from 'src/server/content/utils'
-import type { PreviewData } from 'src/server/content/types'
+import { previewRedirects } from '../../../discovery.config'
 
 type Settings = {
   seo: {
@@ -40,7 +40,7 @@ const setPreviewAndRedirect = (
   }
 
   if (!isBranchPreview(previewData as PreviewData)) {
-    options.path = redirectPath
+    options.path = redirectPath.split('?')[0]
   }
 
   res.setPreviewData(previewData, options)

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

@@ -257,6 +257,22 @@ const query = gql(`
         email
         phone
       }
+      budgetData {
+        budgets {
+          id
+          name
+          balance {
+            remaining
+          }
+          allocations {
+            id
+            linkedEntity {
+              id
+            }
+            reservations
+          }
+        }
+      }
     }
     accountProfile {
       name
@@ -339,10 +355,12 @@ export const getServerSideProps: GetServerSideProps<
     globalSectionsFooter,
   })
 
+  const order = orderDetails.data.userOrder
+
   return {
     props: {
       globalSections: globalSectionsResult,
-      order: orderDetails.data.userOrder,
+      order,
       accountName: orderDetails.data.accountProfile.name,
       isRepresentative,
     },