Merge pull request #4 from vtex-apps/feature/payload

Update payload to appPayload
vtex-apps · Aug 28, 2019 · 3d14c6a · 3d14c6a
2 parents 9d6fd39 + f8d29ef
commit 3d14c6a
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 57 deletions.
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,31 @@
+#### What problem is this solving?
+
+<!--- What is the motivation and context for this change? -->
+
+#### 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
+
+<!--- Add a ✔️ where applicable -->
+✔️ | Type of Change
+---|---
+_ | Bug fix <!-- a non-breaking change which fixes an issue -->
+_ | New feature <!-- a non-breaking change which adds functionality -->
+_ | Breaking change <!-- fix or feature that would cause existing functionality to change -->
+_ | Technical improvements <!-- chores, refactors and overall reduction of technical debt -->
+
+#### Notes
+
+<!-- Put any relevant information that doesn't fit in the other sections here. -->
diff --git 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/README.md b/README.md
@@ -1,10 +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
 
@@ -15,52 +13,48 @@ 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: `example-payment-auth-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/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
 
-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/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.
diff --git a/react/index.js b/react/index.js
@@ -2,42 +2,42 @@ 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()
   }
 
   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,38 +48,31 @@ 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)
   }
 
   render() {
-    const { payload } = this.props
+    const { appPayload } = this.props
 
     return (
       <div className={styles.yesNoWrapper}>
-        <p>
-          {JSON.stringify(payload)}
-        </p>
-        {
-          this.state.scriptLoaded ? 
-            <div 
-            className="g-recaptcha"
-            ref={this.divContainer}
-            ></div> 
-            : 
-            <h1>
-              Loading...
-            </h1>
-        }
+        <p>{JSON.stringify(appPayload)}</p>
+        {this.state.scriptLoaded ? (
+          <div className="g-recaptcha" ref={this.divContainer}></div>
+        ) : (
+          <h1>Loading...</h1>
+        )}
 
         <button
-          onClick={() => {this.respondTransaction(false)}}
-          className={styles.buttonDanger}
-        >
-            Cancelar
+          onClick={() => {
+            this.respondTransaction(false)
+          }}
+          className={styles.buttonDanger}>
+          Cancelar
         </button>
       </div>
     )