From a63f2a10bdc6cc41eb60bb6494c28dbacc371959 Mon Sep 17 00:00:00 2001
From: "Filipe W. Lima" <381395+filipewl@users.noreply.github.com>
Date: Thu, 22 Dec 2022 15:30:31 -0300
Subject: [PATCH] Checkout Button Schema (#318)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Genisio Alcantara <genisio.alcantara@guidance.dev>
(Actually all authored by him)

**What problem are you trying to solve?.**
Allow the checkout button redirect link to be edited via site editor.
Today, this behavior is controlled by the prop `finishShoppingButtonLink`(editable only via code).

It's interesting to go directly to the last checkout stage to speed up the checkout process.
However, when there is gift promotion, the only place where the user can choose the gift is on the first checkout stage:

![Gifts-oficina](https://user-images.githubusercontent.com/58344276/203791448-16f2abc4-73d9-4b16-8d5e-5546f90edc49.png)

So it's useful for the commercial team to be able to change this behavior easily via site editor:
When there is a active gift promotion they would choose to send the user to the first checkout stage. Otherwise, they would choose the last checkout stage.

#### How to test it?
[Workspace](https://checkoutbuttonschema--oficinareserva.myvtex.com/)
Admin -> CMS/Site editor -> Cabeçalho(Desktop/mobile)
--> Minicart Footer --> Botão de checkout

#### Screenshots or example usage:
![Screenshot from 2022-11-07 14-02-45](https://user-images.githubusercontent.com/58344276/200370473-6b6736ff-dede-424d-a0b4-7deb4fea7d42.png)

Related to [#699](https://github.com/vtex-apps/store-discussion/issues/699)
---
 CHANGELOG.md              |  3 +++
 react/CheckoutButton.tsx  | 11 +++++++++--
 react/typings/global.d.ts | 28 ++++++++++++++++++++++++++++
 react/typings/global.ts   | 20 --------------------
 store/interfaces.json     | 12 +++++++++++-
 5 files changed, 51 insertions(+), 23 deletions(-)
 create mode 100644 react/typings/global.d.ts
 delete mode 100644 react/typings/global.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ba05763d..f09bbcbc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+- Schema to the `checkout button`, this makes it possible to define via admin where the user will be directed after the click
+
 ## [2.63.5] - 2022-07-28
 
 ### Fixed
diff --git a/react/CheckoutButton.tsx b/react/CheckoutButton.tsx
index 49e581cb..f09b481e 100644
--- a/react/CheckoutButton.tsx
+++ b/react/CheckoutButton.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react'
+import React from 'react'
 import { FormattedMessage } from 'react-intl'
 import { Button } from 'vtex.styleguide'
 import { CssHandlesTypes, useCssHandles } from 'vtex.css-handles'
@@ -13,7 +13,10 @@ interface Props {
   classes?: CssHandlesTypes.CustomClasses<typeof CSS_HANDLES>
 }
 
-const CheckoutButton: FC<Props> = ({ finishShoppingButtonLink, classes }) => {
+const CheckoutButton: StoreFunctionComponent<Props> = ({
+  finishShoppingButtonLink,
+  classes,
+}): JSX.Element => {
   const { url: checkoutUrl } = useCheckoutURL()
   const { handles } = useCssHandles(CSS_HANDLES, { classes })
   const goToCheckout = useCheckout()
@@ -32,4 +35,8 @@ const CheckoutButton: FC<Props> = ({ finishShoppingButtonLink, classes }) => {
   )
 }
 
+CheckoutButton.schema = {
+  title: 'store/finish-shopping-button-label',
+}
+
 export default CheckoutButton
diff --git a/react/typings/global.d.ts b/react/typings/global.d.ts
new file mode 100644
index 00000000..78b1bbf1
--- /dev/null
+++ b/react/typings/global.d.ts
@@ -0,0 +1,28 @@
+import { FC } from 'react'
+
+declare global {
+  interface StoreFunctionComponent<P = {}> extends FC<P> {
+    schema?: object
+  }
+
+  type QuantityDisplayType = 'always' | 'never' | 'not-empty'
+
+  type MinicartTotalItemsType =
+    | 'total'
+    | 'distinct'
+    | 'totalAvailable'
+    | 'distinctAvailable'
+
+  type SlideDirectionType =
+    | 'horizontal'
+    | 'vertical'
+    | 'rightToLeft'
+    | 'leftToRight'
+
+  type MinicartVariationType =
+    | 'popup'
+    | 'drawer'
+    | 'link'
+    | 'popupWithLink'
+    | 'block'
+}
diff --git a/react/typings/global.ts b/react/typings/global.ts
deleted file mode 100644
index 31ca3a4f..00000000
--- a/react/typings/global.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-type QuantityDisplayType = 'always' | 'never' | 'not-empty'
-
-type MinicartTotalItemsType =
-  | 'total'
-  | 'distinct'
-  | 'totalAvailable'
-  | 'distinctAvailable'
-
-type SlideDirectionType =
-  | 'horizontal'
-  | 'vertical'
-  | 'rightToLeft'
-  | 'leftToRight'
-
-type MinicartVariationType =
-  | 'popup'
-  | 'drawer'
-  | 'link'
-  | 'popupWithLink'
-  | 'block'
diff --git a/store/interfaces.json b/store/interfaces.json
index 8ee2313c..eb84dfb2 100644
--- a/store/interfaces.json
+++ b/store/interfaces.json
@@ -22,7 +22,17 @@
     "allowed": ["product-list"]
   },
   "minicart-checkout-button": {
-    "component": "CheckoutButton"
+    "component": "CheckoutButton",
+    "content": {
+      "title": "store/finish-shopping-button-label",
+      "properties": {
+        "finishShoppingButtonLink": {
+          "type": "string",
+          "title": "admin/editor.minicart.linkButtonFinishShopping.title",
+          "default": "/checkout/#/cart"
+        }
+      }
+    }
   },
   "minicart-summary": {
     "component": "Summary",