@faststore/core 3.44.1 → 3.45.0

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

@@ -0,0 +1,273 @@
+import type { Locator } from '@vtex/client-cms'
+import type { GetServerSideProps } from 'next'
+import { NextSeo } from 'next-seo'
+import type { ComponentType } from 'react'
+import { MyAccountLayout } from 'src/components/account'
+import RenderSections from 'src/components/cms/RenderSections'
+import { default as GLOBAL_COMPONENTS } from 'src/components/cms/global/Components'
+import CUSTOM_COMPONENTS from 'src/customizations/src/components'
+
+import { getGlobalSectionsData } from 'src/components/cms/GlobalSections'
+
+import { gql } from '@generated/gql'
+import type {
+  ServerListOrdersQueryQuery,
+  ServerListOrdersQueryQueryVariables,
+} from '@generated/graphql'
+import { default as AfterSection } from 'src/customizations/src/myAccount/extensions/orders/after'
+import { default as BeforeSection } from 'src/customizations/src/myAccount/extensions/orders/before'
+import type { MyAccountProps } from 'src/experimental/myAccountSeverSideProps'
+import { execute } from 'src/server'
+import { injectGlobalSections } from 'src/server/cms/global'
+import { getMyAccountRedirect } from 'src/utils/myAccountRedirect'
+import { groupOrderStatusByLabel } from 'src/utils/userOrderStatus'
+
+import { MyAccountListOrders } from 'src/components/account/orders/MyAccountListOrders'
+
+/* A list of components that can be used in the CMS. */
+const COMPONENTS: Record<string, ComponentType<any>> = {
+  ...GLOBAL_COMPONENTS,
+  ...CUSTOM_COMPONENTS,
+}
+
+type ListOrdersPageProps = {
+  listOrders: ServerListOrdersQueryQuery['listUserOrders']
+  total: number
+  perPage: number
+  filters: {
+    page: number
+    status: string[]
+    dateInitial: string
+    dateFinal: string
+    text: string
+    clientEmail: string
+  }
+} & MyAccountProps
+
+export default function ListOrdersPage({
+  globalSections,
+  listOrders,
+  total,
+  perPage,
+  filters,
+}: ListOrdersPageProps) {
+  return (
+    <RenderSections
+      globalSections={globalSections.sections}
+      components={COMPONENTS}
+    >
+      <NextSeo noindex nofollow />
+
+      <MyAccountLayout>
+        <BeforeSection />
+        <MyAccountListOrders
+          listOrders={listOrders}
+          filters={filters}
+          perPage={perPage}
+          total={total}
+        />
+        <AfterSection />
+      </MyAccountLayout>
+    </RenderSections>
+  )
+}
+
+const query = gql(`
+  query ServerListOrdersQuery ($page: Int,$perPage: Int, $status: [String], $dateInitial: String, $dateFinal: String, $text: String, $clientEmail: String) {
+    listUserOrders (page: $page, perPage: $perPage, status: $status, dateInitial: $dateInitial, dateFinal: $dateFinal, text: $text, clientEmail: $clientEmail) {
+      list {
+        orderId
+        creationDate
+        clientName
+        items {
+          seller
+          quantity
+          description
+          ean
+          refId
+          id
+          productId
+          sellingPrice
+          price
+        }
+        totalValue
+        paymentNames
+        status
+        statusDescription
+        marketPlaceOrderId
+        sequence
+        salesChannel
+        affiliateId
+        origin
+        workflowInErrorState
+        workflowInRetry
+        lastMessageUnread
+        ShippingEstimatedDate
+        ShippingEstimatedDateMax
+        ShippingEstimatedDateMin
+        orderIsComplete
+        listId
+        listType
+        authorizedDate
+        callCenterOperatorName
+        totalItems
+        currencyCode
+        hostname
+        invoiceOutput
+        invoiceInput
+        lastChange
+        isAllDelivered
+        isAnyDelivered
+        giftCardProviders
+        orderFormId
+        paymentApprovedDate
+        readyForHandlingDate
+        deliveryDates
+      }
+      paging {
+        total
+        pages
+        currentPage
+        perPage
+      }
+      stats {
+        stats {
+          totalValue {
+            Count
+            Max
+            Mean
+            Min
+            Missing
+            StdDev
+            Sum
+            SumOfSquares
+            Facets
+          }
+          totalItems {
+            Count
+            Max
+            Mean
+            Min
+            Missing
+            StdDev
+            Sum
+            SumOfSquares
+            Facets
+          }
+        }
+      }
+      facets
+      reportRecordsLimit
+    }
+  }
+`)
+
+export const getServerSideProps: GetServerSideProps<
+  MyAccountProps,
+  Record<string, string>,
+  Locator
+> = async (context) => {
+  // TODO validate permissions here
+
+  const { previewData } = context
+
+  const { isFaststoreMyAccountEnabled, redirect } = getMyAccountRedirect({
+    query: context.query,
+  })
+
+  if (!isFaststoreMyAccountEnabled) {
+    return { redirect }
+  }
+
+  const [
+    globalSectionsPromise,
+    globalSectionsHeaderPromise,
+    globalSectionsFooterPromise,
+  ] = getGlobalSectionsData(previewData)
+
+  const page = Number(context.query.page as string | undefined) || 1
+  const perPage = 25 // TODO: make this configurable
+  const status =
+    (Array.isArray(context.query.status)
+      ? context.query.status
+      : [context.query.status]
+    ).filter(Boolean) || []
+  const dateInitial = (context.query.dateInitial as string | undefined) || ''
+  const dateFinal = (context.query.dateFinal as string | undefined) || ''
+  const text = (context.query.text as string | undefined) || ''
+  const clientEmail = (context.query.clientEmail as string | undefined) || ''
+
+  // Map labels from FastStore status to API status
+  const groupedStatus = groupOrderStatusByLabel()
+  const allStatuses =
+    status
+      .reduce((acc, item) => {
+        const statusGroup = Object.entries(groupedStatus).find(
+          ([key]) => key.toLowerCase() === item.toLowerCase()
+        )
+        if (statusGroup) {
+          const [, statusValues] = statusGroup
+          return [...acc, ...statusValues]
+        }
+        return acc
+      }, [] as string[])
+      .filter(Boolean) || []
+
+  const [
+    listOrders,
+    globalSections,
+    globalSectionsHeader,
+    globalSectionsFooter,
+  ] = await Promise.all([
+    execute<ServerListOrdersQueryQueryVariables, ServerListOrdersQueryQuery>(
+      {
+        variables: {
+          page,
+          perPage,
+          status: allStatuses,
+          dateInitial,
+          dateFinal,
+          text,
+          clientEmail,
+        },
+        operation: query,
+      },
+      { headers: { ...context.req.headers } }
+    ),
+    globalSectionsPromise,
+    globalSectionsHeaderPromise,
+    globalSectionsFooterPromise,
+  ])
+
+  if (listOrders.errors) {
+    return {
+      redirect: {
+        destination: '/account/404',
+        permanent: false,
+      },
+    }
+  }
+
+  const globalSectionsResult = injectGlobalSections({
+    globalSections,
+    globalSectionsHeader,
+    globalSectionsFooter,
+  })
+
+  return {
+    props: {
+      globalSections: globalSectionsResult,
+      listOrders: listOrders.data.listUserOrders,
+      total: listOrders.data.listUserOrders.paging.total,
+      perPage: listOrders.data.listUserOrders.paging.perPage,
+      filters: {
+        page: listOrders.data.listUserOrders.paging.currentPage ?? page,
+        status,
+        dateInitial,
+        dateFinal,
+        text,
+        clientEmail,
+      },
+    },
+  }
+}

package/src/pages/account/orders/styles.module.scss

@@ -0,0 +1,35 @@
+.container {
+  padding: 2rem;
+}
+
+.filters {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.table th, .table td {
+  padding: 0.5rem;
+  text-align: left;
+  border: 1px solid #ccc;
+}
+
+.pagination {
+  margin-top: 1rem;
+}
+
+.pagination button {
+  padding: 0.5rem 1rem;
+  margin-right: 0.5rem;
+}
+
+.pagination .active {
+  font-weight: bold;
+  color: white;
+  background-color: #0070f3;
+}

package/src/pages/account/profile.tsx

@@ -1,16 +1,22 @@
 /* ######################################### */
 /* Mocked Page until development is finished, it will be removed after */
 
+import type { Locator } from '@vtex/client-cms'
+import type { GetServerSideProps } from 'next'
 import { NextSeo } from 'next-seo'
 import type { ComponentType } from 'react'
 import { MyAccountLayout } from 'src/components/account'
 import RenderSections from 'src/components/cms/RenderSections'
 import { default as GLOBAL_COMPONENTS } from 'src/components/cms/global/Components'
 import CUSTOM_COMPONENTS from 'src/customizations/src/components'
-import {
-  getServerSideProps,
-  type MyAccountProps,
-} from 'src/experimental/myAccountSeverSideProps'
+
+import { getGlobalSectionsData } from 'src/components/cms/GlobalSections'
+
+import { default as AfterSection } from 'src/customizations/src/myAccount/extensions/profile/after'
+import { default as BeforeSection } from 'src/customizations/src/myAccount/extensions/profile/before'
+import type { MyAccountProps } from 'src/experimental/myAccountSeverSideProps'
+import { injectGlobalSections } from 'src/server/cms/global'
+import { getMyAccountRedirect } from 'src/utils/myAccountRedirect'
 
 /* A list of components that can be used in the CMS. */
 const COMPONENTS: Record<string, ComponentType<any>> = {
@@ -18,16 +24,6 @@ const COMPONENTS: Record<string, ComponentType<any>> = {
   ...CUSTOM_COMPONENTS,
 }
 
-const style = {
-  alignContent: 'center',
-  justifyContent: 'center',
-  alignItems: 'center',
-  display: 'flex',
-  h1: {
-    fontSize: '100px',
-  },
-}
-
 export default function Profile({ globalSections }: MyAccountProps) {
   return (
     <RenderSections
@@ -37,12 +33,61 @@ export default function Profile({ globalSections }: MyAccountProps) {
       <NextSeo noindex nofollow />
 
       <MyAccountLayout>
-        <div style={style}>
-          <h1 style={style.h1}>Profile</h1>
+        <BeforeSection />
+        <div>
+          <h1>Profile</h1>
         </div>
+        <AfterSection />
       </MyAccountLayout>
     </RenderSections>
   )
 }
 
-export { getServerSideProps }
+export const getServerSideProps: GetServerSideProps<
+  MyAccountProps,
+  Record<string, string>,
+  Locator
+> = async ({ previewData, query }) => {
+  // TODO validate permissions here
+
+  const { isFaststoreMyAccountEnabled, redirect } = getMyAccountRedirect({
+    query,
+  })
+
+  if (!isFaststoreMyAccountEnabled) {
+    return { redirect }
+  }
+
+  const [
+    globalSectionsPromise,
+    globalSectionsHeaderPromise,
+    globalSectionsFooterPromise,
+  ] = getGlobalSectionsData(previewData)
+
+  const [globalSections, globalSectionsHeader, globalSectionsFooter] =
+    await Promise.all([
+      globalSectionsPromise,
+      globalSectionsHeaderPromise,
+      globalSectionsFooterPromise,
+    ])
+
+  // TODO handle 404 when profile request is made
+  // if (profile.errors) {
+  //   return {
+  //     redirect: {
+  //       destination: '/account/404',
+  //       permanent: false,
+  //     },
+  //   }
+  // }
+
+  const globalSectionsResult = injectGlobalSections({
+    globalSections,
+    globalSectionsHeader,
+    globalSectionsFooter,
+  })
+
+  return {
+    props: { globalSections: globalSectionsResult },
+  }
+}

package/src/pages/account/security.tsx

@@ -0,0 +1,94 @@
+/* ######################################### */
+/* Mocked Page until development is finished, it will be removed after */
+
+import { NextSeo } from 'next-seo'
+import type { ComponentType } from 'react'
+import { MyAccountLayout } from 'src/components/account'
+import RenderSections from 'src/components/cms/RenderSections'
+import { default as GLOBAL_COMPONENTS } from 'src/components/cms/global/Components'
+import CUSTOM_COMPONENTS from 'src/customizations/src/components'
+
+import type { Locator } from '@vtex/client-cms'
+import type { GetServerSideProps } from 'next'
+
+import { getGlobalSectionsData } from 'src/components/cms/GlobalSections'
+
+import { default as AfterSection } from 'src/customizations/src/myAccount/extensions/security/after'
+import { default as BeforeSection } from 'src/customizations/src/myAccount/extensions/security/before'
+import type { MyAccountProps } from 'src/experimental/myAccountSeverSideProps'
+import { injectGlobalSections } from 'src/server/cms/global'
+import { getMyAccountRedirect } from 'src/utils/myAccountRedirect'
+
+/* A list of components that can be used in the CMS. */
+const COMPONENTS: Record<string, ComponentType<any>> = {
+  ...GLOBAL_COMPONENTS,
+  ...CUSTOM_COMPONENTS,
+}
+
+export default function Page({ globalSections }: MyAccountProps) {
+  return (
+    <RenderSections
+      globalSections={globalSections.sections}
+      components={COMPONENTS}
+    >
+      <NextSeo noindex nofollow />
+
+      <MyAccountLayout>
+        <BeforeSection />
+        <div>
+          <h1>Security</h1>
+        </div>
+        <AfterSection />
+      </MyAccountLayout>
+    </RenderSections>
+  )
+}
+
+export const getServerSideProps: GetServerSideProps<
+  MyAccountProps,
+  Record<string, string>,
+  Locator
+> = async ({ previewData, query }) => {
+  // TODO validate permissions here
+
+  const { isFaststoreMyAccountEnabled, redirect } = getMyAccountRedirect({
+    query,
+  })
+
+  if (!isFaststoreMyAccountEnabled) {
+    return { redirect }
+  }
+
+  const [
+    globalSectionsPromise,
+    globalSectionsHeaderPromise,
+    globalSectionsFooterPromise,
+  ] = getGlobalSectionsData(previewData)
+
+  const [globalSections, globalSectionsHeader, globalSectionsFooter] =
+    await Promise.all([
+      globalSectionsPromise,
+      globalSectionsHeaderPromise,
+      globalSectionsFooterPromise,
+    ])
+
+  // TODO handle 404 when security request is made
+  // if (security.errors) {
+  //   return {
+  //     redirect: {
+  //       destination: '/account/404',
+  //       permanent: false,
+  //     },
+  //   }
+  // }
+
+  const globalSectionsResult = injectGlobalSections({
+    globalSections,
+    globalSectionsHeader,
+    globalSectionsFooter,
+  })
+
+  return {
+    props: { globalSections: globalSectionsResult },
+  }
+}

package/src/pages/account/user-details.tsx

@@ -0,0 +1,94 @@
+/* ######################################### */
+/* Mocked Page until development is finished, it will be removed after */
+
+import { NextSeo } from 'next-seo'
+import type { ComponentType } from 'react'
+import { MyAccountLayout } from 'src/components/account'
+import RenderSections from 'src/components/cms/RenderSections'
+import { default as GLOBAL_COMPONENTS } from 'src/components/cms/global/Components'
+import CUSTOM_COMPONENTS from 'src/customizations/src/components'
+
+import type { Locator } from '@vtex/client-cms'
+import type { GetServerSideProps } from 'next'
+
+import { getGlobalSectionsData } from 'src/components/cms/GlobalSections'
+
+import { default as AfterSection } from 'src/customizations/src/myAccount/extensions/user-details/after'
+import { default as BeforeSection } from 'src/customizations/src/myAccount/extensions/user-details/before'
+import type { MyAccountProps } from 'src/experimental/myAccountSeverSideProps'
+import { injectGlobalSections } from 'src/server/cms/global'
+import { getMyAccountRedirect } from 'src/utils/myAccountRedirect'
+
+/* A list of components that can be used in the CMS. */
+const COMPONENTS: Record<string, ComponentType<any>> = {
+  ...GLOBAL_COMPONENTS,
+  ...CUSTOM_COMPONENTS,
+}
+
+export default function Page({ globalSections }: MyAccountProps) {
+  return (
+    <RenderSections
+      globalSections={globalSections.sections}
+      components={COMPONENTS}
+    >
+      <NextSeo noindex nofollow />
+
+      <MyAccountLayout>
+        <BeforeSection />
+        <div>
+          <h1>User Details</h1>
+        </div>
+        <AfterSection />
+      </MyAccountLayout>
+    </RenderSections>
+  )
+}
+
+export const getServerSideProps: GetServerSideProps<
+  MyAccountProps,
+  Record<string, string>,
+  Locator
+> = async ({ previewData, query }) => {
+  // TODO validate permissions here
+
+  const { isFaststoreMyAccountEnabled, redirect } = getMyAccountRedirect({
+    query,
+  })
+
+  if (!isFaststoreMyAccountEnabled) {
+    return { redirect }
+  }
+
+  const [
+    globalSectionsPromise,
+    globalSectionsHeaderPromise,
+    globalSectionsFooterPromise,
+  ] = getGlobalSectionsData(previewData)
+
+  const [globalSections, globalSectionsHeader, globalSectionsFooter] =
+    await Promise.all([
+      globalSectionsPromise,
+      globalSectionsHeaderPromise,
+      globalSectionsFooterPromise,
+    ])
+
+  // TODO handle 404 when userDetails request is made
+  // if (userDetails.errors) {
+  //   return {
+  //     redirect: {
+  //       destination: '/account/404',
+  //       permanent: false,
+  //     },
+  //   }
+  // }
+
+  const globalSectionsResult = injectGlobalSections({
+    globalSections,
+    globalSectionsHeader,
+    globalSectionsFooter,
+  })
+
+  return {
+    props: { globalSections: globalSectionsResult },
+  }
+}

package/src/sdk/account/getMyAccountRoutes.ts

@@ -10,23 +10,24 @@ interface GetMyAccountRouteParams {
   routes: Route[]
 }
 
+// This is the default route list for My Account, we should add then as the feature is implemented
 const DEFAULT_ROUTES: Route[] = [
-  {
-    title: 'Profile',
-    route: '/account/profile',
-  },
+  // {
+  //   title: 'Profile',
+  //   route: '/account/profile',
+  // },
   {
     title: 'Orders',
     route: '/account/orders',
   },
-  {
-    title: 'User Details',
-    route: '/account/user-details',
-  },
-  {
-    title: 'Security',
-    route: '/account/security',
-  },
+  // {
+  //   title: 'User Details',
+  //   route: '/account/user-details',
+  // },
+  // {
+  //   title: 'Security',
+  //   route: '/account/security',
+  // },
 ]
 
 export function getMyAccountRoutes({ routes }: GetMyAccountRouteParams) {

package/src/sdk/account/useApproveOrder.ts

@@ -0,0 +1,53 @@
+import { useState } from 'react'
+
+interface ApproveOrderVariables {
+  data: {
+    orderId: string
+    customerEmail?: string
+  }
+}
+
+export const useApproveOrder = () => {
+  const [data, setData] = useState<any>(null)
+  const [error, setError] = useState<Error | null>(null)
+  const [loading, setLoading] = useState(false)
+
+  // TODO: Replace with actual GraphQL mutation when its ready
+  const approveOrder = async (variables: ApproveOrderVariables) => {
+    setLoading(true)
+
+    try {
+      await new Promise((resolve) => setTimeout(resolve, 800))
+
+      const shouldSucceed = Math.random() > 0.1
+      if (!shouldSucceed) {
+        throw new Error('Failed to approve order')
+      }
+
+      const mockResponse = {
+        data: {
+          success: true,
+          orderId: variables.data.orderId,
+        },
+      }
+
+      setData(mockResponse)
+      setLoading(false)
+
+      return mockResponse
+    } catch (err) {
+      const error =
+        err instanceof Error ? err : new Error('Failed to approve order')
+      setError(error)
+      setLoading(false)
+      throw error
+    }
+  }
+
+  return {
+    approveOrder,
+    data,
+    error,
+    loading,
+  }
+}