Checkout Button Schema (#318)

Co-authored-by: Genisio Alcantara <[email protected]>
(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](vtex-apps/store-discussion#699)

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

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

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'
+}

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",