Merge pull request #173 from EmanuelRamos115/feat/add-to-cart-prop

Feat/add to cart prop

CHANGELOG.md

@@ -6,6 +6,9 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Added
+
+- Changed the checkoutUrl prop to admin app settings 
 
 ## [3.15.9] - 2024-10-02
 

docs/README.md

@@ -101,7 +101,6 @@ To use these blocks, follow the instructions below.
          "componentOnly": false,
          "text": "Copy/Paste Skus",
          "description": "[SKU Reference ID],[Quantity]",
-         "checkoutUrl:": "/checkout#/cart"
        }
      },
 
@@ -118,7 +117,6 @@ To use these blocks, follow the instructions below.
          "description": "Upload a Spreadsheet with two columns (SKU, Quantity) to bulk order",
          "downloadText": "Click here to download a spreadsheet model",
          "alwaysShowAddToCart:": true,
-         "checkoutUrl:": "/checkout#/cart"
        }
      },
 
@@ -133,7 +131,6 @@ To use these blocks, follow the instructions below.
          "componentOnly": false,
          "text": "One by One",
          "description": "Type the product name, select, enter quantity, add to the cart",
-         "checkoutUrl:": "/checkout#/cart"
        }
      },
 
@@ -148,7 +145,6 @@ To use these blocks, follow the instructions below.
          "componentOnly": false,
          "text": "Categories",
          "description": "Add products directly from their categories",
-         "checkoutUrl:": "/checkout#/cart"
        }
      }
    }
@@ -163,7 +159,7 @@ All blocks exported by the `quickorder` app share the same props:
 | `text`          | `string`  | Component title.                                                                                                | `undefined`   |
 | `description`   | `string`  | Component description. It should be used to explain users how to properly bulk order using the given component. | `undefined`   |
 | `componentOnly` | `boolean` | If `true`, only the component will be loaded, removing the `text` and `description` column.                     | `false`       |
-| `checkoutUrl`   | `string`  | Checkout cart URL for redirect                                                                                  | `/checkout#/cart`       |
+
 
 Especially, the `quickorder-upload` block also can use the following prop:
 

manifest.json

@@ -22,7 +22,6 @@
     "vtex.flex-layout": "0.x",
     "vtex.rich-text": "0.x",
     "vtex.checkout": "0.x",
-    "vtex.render-runtime": "7.x",
     "vtex.store": "2.x",
     "vtex.styleguide": "9.x",
     "vtex.store-graphql": "2.x",
@@ -35,7 +34,8 @@
     "vtex.pixel-manager": "1.x",
     "vtex.store-resources": "0.x",
     "vtex.css-handles": "0.x",
-    "vtex.store-icons": "0.x"
+    "vtex.store-icons": "0.x",
+    "vtex.render-runtime": "8.x"
   },
   "policies": [
     {
@@ -82,7 +82,19 @@
       }
     }
   ],
-  "settingsSchema": {},
+  "settingsSchema": {
+    "title": "Quickorder settings",
+    "type": "object",
+    "access": "public",
+    "properties": {
+      "checkoutUrl": {
+        "title": "URL",
+        "type": "string",
+        "description": "Checkout redirect href",
+        "default": "/checkout#/cart"
+      }
+    }
+  },
   "billingOptions": {
     "termsURL": "https://compliance.vtex.com/gdpr/policies/vtex-privacy-policy",
     "support": {

node/yarn.lock

@@ -6071,7 +6071,7 @@ static-extend@^0.1.1:
     define-property "^0.2.5"
     object-copy "^0.1.0"
 
-stats-lite@vtex/node-stats-lite#dist:
+"stats-lite@github:vtex/node-stats-lite#dist":
   version "2.2.0"
   resolved "https://codeload.github.com/vtex/node-stats-lite/tar.gz/1b0d39cc41ef7aaecfd541191f877887a2044797"
   dependencies:

react/AutocompleteBlock.tsx

@@ -17,14 +17,15 @@ import { useApolloClient, useMutation } from 'react-apollo'
 import { autocompleteMessages as messages } from './utils/messages'
 import QuickOrderAutocomplete from './components/QuickOrderAutocomplete'
 import productQuery from './queries/product.gql'
+import getAppSettings from './utils/getAppSettings'
+
 import './global.css'
 
 const AutocompleteBlock: FunctionComponent<any & WrappedComponentProps> = ({
   text,
   description,
   componentOnly,
   intl,
-  checkoutUrl,
 }) => {
   const client = useApolloClient()
   const { showToast } = useContext(ToastContext)
@@ -34,6 +35,9 @@ const AutocompleteBlock: FunctionComponent<any & WrappedComponentProps> = ({
     unitMultiplier: 1,
   })
 
+  const appSettings = getAppSettings()
+  const checkoutUrl = appSettings?.checkoutUrl ?? '/checkout#/cart'
+
   const [addToCart, { error, loading }] = useMutation<
     { addToCart: OrderFormType },
     { items: [] }

react/CategoryBlock.tsx

@@ -24,14 +24,14 @@ import { graphql, useApolloClient, useMutation } from 'react-apollo'
 import { categoryMessages as messages } from './utils/messages'
 import getCategories from './queries/categoriesQuery.gql'
 import SearchByCategory from './queries/productsByCategory.gql'
+import getAppSettings from './utils/getAppSettings'
 
 const CategoryBlock: FunctionComponent<WrappedComponentProps & any> = ({
   text,
   description,
   componentOnly,
   intl,
   data: { categories },
-  checkoutUrl,
 }) => {
   const [state, setState] = useState<any>({
     categoryItems: {},
@@ -41,6 +41,9 @@ const CategoryBlock: FunctionComponent<WrappedComponentProps & any> = ({
     unitMultiplierList: {},
   })
 
+  const appSettings = getAppSettings()
+  const checkoutUrl = appSettings?.checkoutUrl ?? '/checkout#/cart'
+
   const { showToast } = useContext(ToastContext)
 
   const client = useApolloClient()

react/TextAreaBlock.tsx

@@ -16,6 +16,7 @@ import { usePixel } from 'vtex.pixel-manager/PixelContext'
 import { categoryMessages as messages } from './utils/messages'
 import ReviewBlock from './components/ReviewBlock'
 import { ParseText, GetText } from './utils'
+import getAppSettings from './utils/getAppSettings'
 
 interface ItemType {
   id: string
@@ -24,22 +25,16 @@ interface ItemType {
 
 const TextAreaBlock: FunctionComponent<
   TextAreaBlockInterface & WrappedComponentProps
-> = ({
-  intl,
-  value,
-  text,
-  hiddenColumns,
-  description,
-  componentOnly,
-  checkoutUrl,
-}: any) => {
+> = ({ intl, value, text, hiddenColumns, description, componentOnly }: any) => {
   const [state, setState] = useState<any>({
     reviewState: false,
     showAddToCart: null,
     textAreaValue: value || '',
     reviewItems: [],
   })
 
+  const appSettings = getAppSettings()
+  const checkoutUrl = appSettings?.checkoutUrl ?? '/checkout#/cart'
   const [refidLoading, setRefIdLoading] = useState<any>()
 
   const { textAreaValue, reviewItems, reviewState, showAddToCart } = state

react/UploadBlock.tsx

@@ -18,6 +18,7 @@ import { categoryMessages as messages } from './utils/messages'
 import { ParseText, GetText } from './utils'
 import ReviewBlock from './components/ReviewBlock'
 import { DropzoneIcon } from './assets/DropZoneIcon'
+import getAppSettings from './utils/getAppSettings'
 
 interface ItemType {
   id: string
@@ -34,7 +35,6 @@ const UploadBlock: FunctionComponent<
   componentOnly,
   intl,
   alwaysShowAddToCart = true,
-  checkoutUrl,
 }: any) => {
   let productsArray: any = []
   const [state, setState] = useState<any>({
@@ -43,6 +43,9 @@ const UploadBlock: FunctionComponent<
     showAddToCart: false,
   })
 
+  const appSettings = getAppSettings()
+  const checkoutUrl = appSettings?.checkoutUrl ?? '/checkout#/cart'
+
   const [showValidateButton, setShowValidateButton] = useState<boolean>(false)
 
   const [refidLoading, setRefIdLoading] = useState<any>()

react/queries/getSettings.gql

@@ -0,0 +1,6 @@
+query getSettings($version: String!) {
+  publicSettingsForApp(app: "vtex.quickorder", version: $version)
+    @context(provider: "vtex.apps-graphql") {
+    message
+  }
+}

react/utils/getAppSettings.ts

@@ -0,0 +1,41 @@
+import { useQuery } from 'react-apollo'
+import { useEffect, useState } from 'react'
+/* eslint-disable no-restricted-imports */
+import { pathOr } from 'ramda'
+
+import AppSettings from '../queries/getSettings.gql'
+
+const useAppSettings = () => {
+  const { data: appSettingsData } = useQuery(AppSettings, {
+    variables: {
+      version: process.env.VTEX_APP_VERSION,
+    },
+    ssr: false,
+  })
+
+  const [appSettings, setAppSettings] = useState({
+    checkoutUrl: '/checkout#/cart',
+  })
+
+  useEffect(() => {
+    if (appSettingsData) {
+      const settingsString = pathOr(
+        `""`,
+        ['publicSettingsForApp', 'message'],
+        appSettingsData
+      )
+
+      try {
+        const parsedAppSettings = JSON.parse(settingsString)
+
+        setAppSettings(parsedAppSettings)
+      } catch (error) {
+        console.error('Error parsing app settings:', error)
+      }
+    }
+  }, [appSettingsData])
+
+  return appSettings
+}
+
+export default useAppSettings