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

feat: dynamic cart redirect on quickorder
vtex-apps · Sep 26, 2024 · 52cf02c · 52cf02c
2 parents e0b5cb3 + 8a27f9b
commit 52cf02c
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,8 @@ 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
+- Add a cart url prop so the store can control the redirect via theme
 
 ## [3.15.5] - 2024-08-20
 

diff --git a/docs/README.md b/docs/README.md
@@ -100,7 +100,8 @@ To use these blocks, follow the instructions below.
        "props": {
          "componentOnly": false,
          "text": "Copy/Paste Skus",
-         "description": "[SKU Reference ID],[Quantity]"
+         "description": "[SKU Reference ID],[Quantity]",
+         "checkoutUrl:": "/checkout#/cart"
        }
      },
 
@@ -116,7 +117,8 @@ To use these blocks, follow the instructions below.
          "text": "Upload",
          "description": "Upload a Spreadsheet with two columns (SKU, Quantity) to bulk order",
          "downloadText": "Click here to download a spreadsheet model",
-         "alwaysShowAddToCart:": true
+         "alwaysShowAddToCart:": true,
+         "checkoutUrl:": "/checkout#/cart"
        }
      },
 
@@ -130,7 +132,8 @@ To use these blocks, follow the instructions below.
        "props": {
          "componentOnly": false,
          "text": "One by One",
-         "description": "Type the product name, select, enter quantity, add to the cart"
+         "description": "Type the product name, select, enter quantity, add to the cart",
+         "checkoutUrl:": "/checkout#/cart"
        }
      },
 
@@ -144,7 +147,8 @@ To use these blocks, follow the instructions below.
        "props": {
          "componentOnly": false,
          "text": "Categories",
-         "description": "Add products directly from their categories"
+         "description": "Add products directly from their categories",
+         "checkoutUrl:": "/checkout#/cart"
        }
      }
    }
@@ -159,6 +163,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:
 

diff --git a/react/AutocompleteBlock.tsx b/react/AutocompleteBlock.tsx
@@ -24,6 +24,7 @@ const AutocompleteBlock: FunctionComponent<any & WrappedComponentProps> = ({
   description,
   componentOnly,
   intl,
+  checkoutUrl,
 }) => {
   const client = useApolloClient()
   const { showToast } = useContext(ToastContext)
@@ -76,7 +77,10 @@ const AutocompleteBlock: FunctionComponent<any & WrappedComponentProps> = ({
       action = success
         ? {
             label: translateMessage(messages.seeCart),
-            href: '/checkout/#/cart',
+            href:
+              typeof checkoutUrl === 'string' && checkoutUrl !== ''
+                ? checkoutUrl
+                : '/checkout/#/cart',
           }
         : undefined
     }

diff --git a/react/CategoryBlock.tsx b/react/CategoryBlock.tsx
@@ -31,6 +31,7 @@ const CategoryBlock: FunctionComponent<WrappedComponentProps & any> = ({
   componentOnly,
   intl,
   data: { categories },
+  checkoutUrl,
 }) => {
   const [state, setState] = useState<any>({
     categoryItems: {},
@@ -89,7 +90,10 @@ const CategoryBlock: FunctionComponent<WrappedComponentProps & any> = ({
       action = success
         ? {
             label: intl.formatMessage(messages.seeCart),
-            href: '/checkout/#/cart',
+            href:
+              typeof checkoutUrl === 'string' && checkoutUrl !== ''
+                ? checkoutUrl
+                : '/checkout/#/cart',
           }
         : undefined
     }

diff --git a/react/TextAreaBlock.tsx b/react/TextAreaBlock.tsx
@@ -24,7 +24,15 @@ interface ItemType {
 
 const TextAreaBlock: FunctionComponent<
   TextAreaBlockInterface & WrappedComponentProps
-> = ({ intl, value, text, hiddenColumns, description, componentOnly }: any) => {
+> = ({
+  intl,
+  value,
+  text,
+  hiddenColumns,
+  description,
+  componentOnly,
+  checkoutUrl,
+}: any) => {
   const [state, setState] = useState<any>({
     reviewState: false,
     showAddToCart: null,
@@ -72,7 +80,10 @@ const TextAreaBlock: FunctionComponent<
     const action = success
       ? {
           label: translateMessage(messages.seeCart),
-          href: '/checkout/#/cart',
+          href:
+            typeof checkoutUrl === 'string' && checkoutUrl !== ''
+              ? checkoutUrl
+              : '/checkout/#/cart',
         }
       : undefined
 

diff --git a/react/UploadBlock.tsx b/react/UploadBlock.tsx
@@ -34,6 +34,7 @@ const UploadBlock: FunctionComponent<
   componentOnly,
   intl,
   alwaysShowAddToCart = true,
+  checkoutUrl,
 }: any) => {
   let productsArray: any = []
   const [state, setState] = useState<any>({
@@ -84,7 +85,10 @@ const UploadBlock: FunctionComponent<
     const action = success
       ? {
           label: translateMessage(messages.seeCart),
-          href: '/checkout/#/cart',
+          href:
+            typeof checkoutUrl === 'string' && checkoutUrl !== ''
+              ? checkoutUrl
+              : '/checkout/#/cart',
         }
       : undefined