From e873ef69ac0d8d6efa23030164567b83d553a1c5 Mon Sep 17 00:00:00 2001 From: nandoacoelho Date: Wed, 28 Aug 2019 16:30:47 -0300 Subject: [PATCH 1/4] Prettier index.js --- CHANGELOG.md | 4 ++++ react/index.js | 61 ++++++++++++++++++++++---------------------------- 2 files changed, 31 insertions(+), 34 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 58a9ba2..3b12dd7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +### Changed + +- `payload` property to `appPayload` to match value from API + ## [0.3.0] - 2019-08-28 ### Added diff --git a/react/index.js b/react/index.js index 8b8d65a..26b3507 100644 --- a/react/index.js +++ b/react/index.js @@ -2,10 +2,10 @@ import React, { Component } from 'react' import styles from './index.css' class YesNoApp extends Component { - constructor(props) { + constructor(props) { super(props) this.state = { - scriptLoaded: false + scriptLoaded: false, } this.divContainer = React.createRef() @@ -13,31 +13,31 @@ class YesNoApp extends Component { componentWillMount = () => { this.injectScript( - 'google-recaptcha-v2', - 'https://recaptcha.net/recaptcha/api.js?render=explicit', + 'google-recaptcha-v2', + 'https://recaptcha.net/recaptcha/api.js?render=explicit', this.handleOnLoad ) } - respondTransaction = (status) => { + respondTransaction = status => { $(window).trigger('transactionValidation.vtex', [status]) } handleOnLoad = () => { - this.setState({scriptLoaded: true}); + this.setState({ scriptLoaded: true }) grecaptcha.ready(() => { grecaptcha.render(this.divContainer.current, { - 'sitekey': '------>REPATCHA_V2_SITE_KEY<------', //Replace with site key - 'theme': 'dark', - 'callback': this.onVerify - }); - }) - }; + sitekey: '------>REPATCHA_V2_SITE_KEY<------', //Replace with site key + theme: 'dark', + callback: this.onVerify, + }) + }) + } - onVerify = (e) => { + onVerify = e => { this.respondTransaction(true) } - + injectScript = (id, src, onLoad) => { if (document.getElementById(id)) { return @@ -48,8 +48,8 @@ class YesNoApp extends Component { const js = document.createElement('script') js.id = id js.src = src - js.async = true; - js.defer = true; + js.async = true + js.defer = true js.onload = onLoad head.appendChild(js) @@ -60,26 +60,19 @@ class YesNoApp extends Component { return (
-

- {JSON.stringify(payload)} -

- { - this.state.scriptLoaded ? -
- : -

- Loading... -

- } +

{JSON.stringify(payload)}

+ {this.state.scriptLoaded ? ( +
+ ) : ( +

Loading...

+ )}
) From 9224a9ef124f73e07a3fb79125b6089feba256c0 Mon Sep 17 00:00:00 2001 From: nandoacoelho Date: Wed, 28 Aug 2019 16:33:12 -0300 Subject: [PATCH 2/4] Lint README.md --- .github/PULL_REQUEST_TEMPLATE.md | 31 +++++++++++++++++++++++++++++++ README.md | 32 +++++++++++++------------------- 2 files changed, 44 insertions(+), 19 deletions(-) create mode 100644 .github/PULL_REQUEST_TEMPLATE.md diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md new file mode 100644 index 0000000..c7e4fde --- /dev/null +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -0,0 +1,31 @@ +#### What problem is this solving? + + + +#### How should this be manually tested? + +[Workspace](url) + +#### Checklist/Reminders + +- [ ] Updated `README.md`. +- [ ] Updated `CHANGELOG.md`. +- [ ] Linked this PR to a Clubhouse story (if applicable). +- [ ] Updated/created tests (important for bug fixes). +- [ ] Deleted the workspace after merging this PR (if applicable). + +#### Screenshots or example usage + +#### Type of changes + + +✔️ | Type of Change +---|--- +_ | Bug fix +_ | New feature +_ | Breaking change +_ | Technical improvements + +#### Notes + + diff --git a/README.md b/README.md index c13c5ab..d0b0b21 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,7 @@ # Transaction App Example - ## Description - The transaction app is an app that creates a step verification to the checkout process allowing or rejecting an order placement. This repository provides an example on how to accomplish it. ## Table of Contents @@ -15,40 +13,36 @@ The transaction app is an app that creates a step verification to the checkout p ## Usage +To get started you should edit the `manifest.json` file to properly select the app name, for this example: `paym-step-app`. You should also input the correct initial version and, if applicable, change the vendor name. -To get started you should edit the `manifest.json` file to properly select the app name, for this example: `paym-step-app`. You should also input the correct initial version and, if applicable, change the vendor name. - -Create a new workspace and link this app to your store and workspace. Go on to `{{your-account}}.vtexcommercestable.com/checkout?workspace={{your-workspace}}`, open the browser dev tools then run: - +Create a new workspace and link this app to your store and workspace. Go on to `{{your-account}}.vtexcommercestable.com/checkout?workspace={{your-workspace}}`, open the browser dev tools then run: ``` window.transactionAppName = '{{your-app-name}}' ``` - -If you follow through the checkout process, you should now see your app running after order confirmation. -**PROTIP:** *vtexcommercestable* does not support workspace, so you might need to export your cart to run some tests. To do that, you may go `{{your-workspace}}--{{your-store}}.myvtex.com`, add products to cart, go to cart, then open your browser DevTools and run: +If you follow through the checkout process, you should now see your app running after order confirmation. + +**PROTIP:** _vtexcommercestable_ does not support workspace, so you might need to export your cart to run some tests. To do that, you may go `{{your-workspace}}--{{your-store}}.myvtex.com`, add products to cart, go to cart, then open your browser DevTools and run: + ``` vtexjs.checkout.orderFormId ``` -You should get the orderFormId and then you may inject that in *vtexcommercestable* using: + +You should get the orderFormId and then you may inject that in _vtexcommercestable_ using: `{{your-account}}.vtexcommercestable.com/checkout?workspace={{your-workspace}}&orderFormId={{your-orderFormId}}` ## Responding to checkout - The checkout API expects a response from the app through the `transactionValidation.vtex` event, therefore an approach for responding is: - ``` $(window).trigger('transactionValidation.vtex', [status]) ``` +Where `status` is a boolean and resolves(`status == true`) or rejects (`status == false`) order placement. -Where `status` is a boolean and resolves(`status == true`) or rejects (`status == false`) order placement. - - -Please refer to the [response method implementation](https://github.com/vtex-apps/transaction-app-example/blob/3e5742c87a2771998009cff4fecacb092bb3362b/react/index.js#L22) in this repo for an example on expected response trigger. +Please refer to the [response method implementation](https://github.com/vtex-apps/transaction-app-example/blob/3e5742c87a2771998009cff4fecacb092bb3362b/react/index.js#L22) in this repo for an example on expected response trigger. ## Checkout Payload @@ -60,7 +54,7 @@ const { payload } = this.props ## Injecting external script -In order to be able to run external scripts on your transaction app, you need to inject that script on the head of the checkout html. To do so, you have to do a DOM injection, for that you should do: +In order to be able to run external scripts on your transaction app, you need to inject that script on the head of the checkout html. To do so, you have to do a DOM injection, for that you should do: ``` const head = document.getElementsByTagName('head')[0] @@ -75,6 +69,6 @@ js.onload = {{callback-onload}} head.appendChild(js) ``` -There is an example for the script injection [here](https://github.com/vtex-apps/transaction-app-example/blob/3e5742c87a2771998009cff4fecacb092bb3362b/react/index.js#L41) +There is an example for the script injection [here](https://github.com/vtex-apps/transaction-app-example/blob/3e5742c87a2771998009cff4fecacb092bb3362b/react/index.js#L41) -Do keep in mind that if the external js script handles DOM manipulation, then you should use React's [`ref`](https://reactjs.org/docs/refs-and-the-dom.html) to create a div container and hand it over to the library. There's also an [example](https://github.com/vtex-apps/transaction-app-example/blob/3e5742c87a2771998009cff4fecacb092bb3362b/react/index.js#L11) for doing so in this repo. +Do keep in mind that if the external js script handles DOM manipulation, then you should use React's [`ref`](https://reactjs.org/docs/refs-and-the-dom.html) to create a div container and hand it over to the library. There's also an [example](https://github.com/vtex-apps/transaction-app-example/blob/3e5742c87a2771998009cff4fecacb092bb3362b/react/index.js#L11) for doing so in this repo. From 64071a858e1e1ede259e876826d592644cab0212 Mon Sep 17 00:00:00 2001 From: nandoacoelho Date: Wed, 28 Aug 2019 16:34:05 -0300 Subject: [PATCH 3/4] Updated README.md to cover change of payload property --- README.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index d0b0b21..21b35b0 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,8 @@ -# Transaction App Example +# Payment Authentication App Example ## Description -The transaction app is an app that creates a step verification to the checkout process allowing or rejecting an order placement. This repository provides an example on how to accomplish it. +The Payment Authentication app is an app that creates a step verification to the checkout process allowing or rejecting an order placement. This repository provides an example on how to accomplish it. ## Table of Contents @@ -13,7 +13,7 @@ The transaction app is an app that creates a step verification to the checkout p ## Usage -To get started you should edit the `manifest.json` file to properly select the app name, for this example: `paym-step-app`. You should also input the correct initial version and, if applicable, change the vendor name. +To get started you should edit the `manifest.json` file to properly select the app name, for this example: `example-payment-auth-app`. You should also input the correct initial version and, if applicable, change the vendor name. Create a new workspace and link this app to your store and workspace. Go on to `{{your-account}}.vtexcommercestable.com/checkout?workspace={{your-workspace}}`, open the browser dev tools then run: @@ -42,14 +42,14 @@ $(window).trigger('transactionValidation.vtex', [status]) Where `status` is a boolean and resolves(`status == true`) or rejects (`status == false`) order placement. -Please refer to the [response method implementation](https://github.com/vtex-apps/transaction-app-example/blob/3e5742c87a2771998009cff4fecacb092bb3362b/react/index.js#L22) in this repo for an example on expected response trigger. +Please refer to the [response method implementation](https://github.com/vtex-apps/payment-authorization-app-example/blob/3e5742c87a2771998009cff4fecacb092bb3362b/react/index.js#L22) in this repo for an example on expected response trigger. ## Checkout Payload Checkout should give you a payload via `props` to better be able to handle the order, to access that you just do: ``` -const { payload } = this.props +const { appPayload } = this.props ``` ## Injecting external script @@ -69,6 +69,6 @@ js.onload = {{callback-onload}} head.appendChild(js) ``` -There is an example for the script injection [here](https://github.com/vtex-apps/transaction-app-example/blob/3e5742c87a2771998009cff4fecacb092bb3362b/react/index.js#L41) +There is an example for the script injection [here](https://github.com/vtex-apps/payment-authorization-app-example/blob/3e5742c87a2771998009cff4fecacb092bb3362b/react/index.js#L41) -Do keep in mind that if the external js script handles DOM manipulation, then you should use React's [`ref`](https://reactjs.org/docs/refs-and-the-dom.html) to create a div container and hand it over to the library. There's also an [example](https://github.com/vtex-apps/transaction-app-example/blob/3e5742c87a2771998009cff4fecacb092bb3362b/react/index.js#L11) for doing so in this repo. +Do keep in mind that if the external js script handles DOM manipulation, then you should use React's [`ref`](https://reactjs.org/docs/refs-and-the-dom.html) to create a div container and hand it over to the library. There's also an [example](https://github.com/vtex-apps/payment-authorization-app-example/blob/3e5742c87a2771998009cff4fecacb092bb3362b/react/index.js#L11) for doing so in this repo. From f8d29ef7224c1c800ecefb9ffa2f52ec5fab6d38 Mon Sep 17 00:00:00 2001 From: nandoacoelho Date: Wed, 28 Aug 2019 16:36:31 -0300 Subject: [PATCH 4/4] Update payload to appPayload --- react/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/react/index.js b/react/index.js index 26b3507..f492505 100644 --- a/react/index.js +++ b/react/index.js @@ -56,11 +56,11 @@ class YesNoApp extends Component { } render() { - const { payload } = this.props + const { appPayload } = this.props return (
-

{JSON.stringify(payload)}

+

{JSON.stringify(appPayload)}

{this.state.scriptLoaded ? (
) : (