From 40ffede622828b57b8534ea527aa127fa57146c0 Mon Sep 17 00:00:00 2001
From: Patrick Fic <pfic@Patricks-MacBook-Pro.local>
Date: Thu, 30 Jul 2020 09:48:04 -0700
Subject: [PATCH] Added payment type to modal and lists BOD-230

---
 .vscode/bodyshopsnippets.code-snippets        | 64 ++++++++++++++++
 admin/package.json                            |  2 +-
 bodyshop_translations.babel                   | 23 +++++-
 .../jobs-detail-financial.component.jsx       |  2 +
 .../payment-form/payment-form.component.jsx   | 21 ++++-
 .../payment-list-paginated.component.jsx      |  5 ++
 client/src/graphql/payments.queries.js        |  1 +
 .../mobile-payment.component.jsx              | 76 +++++++++----------
 client/src/translations/en_us/common.json     |  3 +-
 client/src/translations/es/common.json        |  3 +-
 client/src/translations/fr/common.json        |  3 +-
 package.json                                  |  5 +-
 12 files changed, 158 insertions(+), 50 deletions(-)
 create mode 100644 .vscode/bodyshopsnippets.code-snippets

diff --git a/.vscode/bodyshopsnippets.code-snippets b/.vscode/bodyshopsnippets.code-snippets
new file mode 100644
index 000000000..570672e7b
--- /dev/null
+++ b/.vscode/bodyshopsnippets.code-snippets
@@ -0,0 +1,64 @@
+{
+  // Place your bodyshop workspace snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
+  // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
+  // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
+  // used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
+  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
+  // Placeholders with the same ids are connected.
+  // Example:
+  // "Print to console": {
+  // 	"scope": "javascript,typescript",
+  // 	"prefix": "log",
+  // 	"body": [
+  // 		"console.log('$1');",
+  // 		"$2"
+  // 	],
+  // 	"description": "Log output to console"
+  // }
+  "Const T useTranslation": {
+    "prefix": "ttt",
+    "body": ["const { t } = useTranslation();"],
+    "description": "Use Translation Destructing."
+  },
+  " useTranslation import": {
+    "prefix": "tti",
+    "body": ["import { useTranslation } from \"react-i18next\";"],
+    "description": "Use Translation import."
+  },
+  "Redux Setup": {
+    "prefix": "rdx",
+    "body": [
+      "import { connect } from \"react-redux\";",
+      "import { createStructuredSelector } from \"reselect\";",
+      "const mapStateToProps = createStructuredSelector({",
+      "  //currentUser: selectCurrentUser",
+      "});",
+      "const mapDispatchToProps = dispatch => ({",
+      "  //setUserLanguage: language => dispatch(setUserLanguage(language))",
+      "});",
+      "export default connect (mapStateToProps,mapDispatchToProps)();"
+    ],
+    "description": "General Redux."
+  },
+  " Apollo Loading Error Handling import": {
+    "prefix": "ale",
+    "body": [
+      "if (loading) return <LoadingSpinner />;",
+      "if (error) return <AlertComponent message={error.message} type=\"error\" />;"
+    ],
+    "description": "Apollo Loading Error Handling import."
+  },
+  "Log IMEX EVent Import": {
+    "prefix": "liei",
+    "body": [
+      "import { logImEXEvent } from \"../../firebase/firebase.utils\"; "
+    ],
+    "description": "Apollo Loading Error Handling import."
+  },
+
+  "Log IMEX EVent": {
+    "prefix": "lie",
+    "body": ["logImEXEvent(\"EventName\", { prop: \"value\" });"],
+    "description": ""
+  }
+}
diff --git a/admin/package.json b/admin/package.json
index 1b3b91b9f..309e3e363 100644
--- a/admin/package.json
+++ b/admin/package.json
@@ -21,7 +21,7 @@
     "react-scripts": "3.4.1"
   },
   "scripts": {
-    "start": "set PORT=3001 &&react-scripts start",
+    "start": "set PORT=3001 react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel
index b41e75652..8e1c7f716 100644
--- a/bodyshop_translations.babel
+++ b/bodyshop_translations.babel
@@ -1,4 +1,4 @@
-<babeledit_project version="1.2" be_version="2.6.1">
+<babeledit_project be_version="2.7.1" version="1.2">
     <!--
 
     BabelEdit project file
@@ -17142,6 +17142,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>type</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                 </children>
                             </folder_node>
                             <folder_node>
diff --git a/client/src/components/jobs-detail-financial/jobs-detail-financial.component.jsx b/client/src/components/jobs-detail-financial/jobs-detail-financial.component.jsx
index a9cba967e..c128a3f64 100644
--- a/client/src/components/jobs-detail-financial/jobs-detail-financial.component.jsx
+++ b/client/src/components/jobs-detail-financial/jobs-detail-financial.component.jsx
@@ -37,6 +37,7 @@ export function JobsDetailFinancials({ job, bodyshop }) {
                   <th>{t("payments.fields.payer")}</th>
                   <th>{t("payments.fields.amount")}</th>
                   <th>{t("payments.fields.memo")}</th>
+                  <th>{t("payments.fields.type")}</th>
                   <th>{t("payments.fields.transactionid")}</th>
                   <th>{t("payments.fields.stripeid")}</th>
                 </tr>
@@ -52,6 +53,7 @@ export function JobsDetailFinancials({ job, bodyshop }) {
                       <CurrencyFormatter>{p.amount}</CurrencyFormatter>
                     </td>
                     <td>{p.memo}</td>
+                    <td>{p.type}</td>
                     <td>{p.transactionid}</td>
                     <td>
                       {p.stripeid ? (
diff --git a/client/src/components/payment-form/payment-form.component.jsx b/client/src/components/payment-form/payment-form.component.jsx
index b00ff429b..8a81c40c8 100644
--- a/client/src/components/payment-form/payment-form.component.jsx
+++ b/client/src/components/payment-form/payment-form.component.jsx
@@ -1,5 +1,5 @@
 import { CardElement } from "@stripe/react-stripe-js";
-import { Checkbox, Form, Input, Radio } from "antd";
+import { Checkbox, Form, Input, Radio, Select } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -65,6 +65,25 @@ export function PaymentFormComponent({
         <Input />
       </Form.Item>
 
+      <Form.Item
+        label={t("payments.labels.type")}
+        name="type"
+        rules={[
+          {
+            required: true,
+            message: t("general.validation.required"),
+          },
+        ]}
+      >
+        <Select>
+          <Select.Option value="Visa">Visa</Select.Option>
+          <Select.Option value="Mastercard">Mastercard</Select.Option>
+          <Select.Option value="AMEX">AMEX</Select.Option>
+          <Select.Option value="Discover">Discover</Select.Option>
+          <Select.Option value="Cash">Cash</Select.Option>
+        </Select>
+      </Form.Item>
+
       <Form.Item
         label={t("payments.labels.electronicpayment")}
         name="useStripe"
diff --git a/client/src/components/payments-list-paginated/payment-list-paginated.component.jsx b/client/src/components/payments-list-paginated/payment-list-paginated.component.jsx
index a51476d8f..1a8a62516 100644
--- a/client/src/components/payments-list-paginated/payment-list-paginated.component.jsx
+++ b/client/src/components/payments-list-paginated/payment-list-paginated.component.jsx
@@ -78,6 +78,11 @@ export default function PaymentsListPaginated({
       dataIndex: "memo",
       key: "memo",
     },
+    {
+      title: t("payments.fields.type"),
+      dataIndex: "type",
+      key: "type",
+    },
     {
       title: t("payments.fields.transactionid"),
       dataIndex: "transactionid",
diff --git a/client/src/graphql/payments.queries.js b/client/src/graphql/payments.queries.js
index c11b87ec1..f526ba847 100644
--- a/client/src/graphql/payments.queries.js
+++ b/client/src/graphql/payments.queries.js
@@ -36,6 +36,7 @@ export const QUERY_ALL_PAYMENTS_PAGINATED = gql`
       }
       transactionid
       memo
+      type
       amount
       stripeid
       exportedat
diff --git a/client/src/pages/mobile-payment/mobile-payment.component.jsx b/client/src/pages/mobile-payment/mobile-payment.component.jsx
index e06bb21c2..b1738c489 100644
--- a/client/src/pages/mobile-payment/mobile-payment.component.jsx
+++ b/client/src/pages/mobile-payment/mobile-payment.component.jsx
@@ -1,17 +1,8 @@
-import axios from "axios";
-import React, { useState, useEffect } from "react";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { auth, logImEXEvent } from "../../firebase/firebase.utils";
-import { selectBodyshop } from "../../redux/user/user.selectors";
-import { setEmailOptions } from "../../redux/email/email.actions";
-import { TemplateList } from "../../utils/TemplateConstants";
 import {
   PaymentRequestButtonElement,
-  useStripe,
-  Elements,
-  useElements,
+  useStripe
 } from "@stripe/react-stripe-js";
+import React, { useEffect, useState } from "react";
 
 export default function MobilePaymentComponent() {
   const stripe = useStripe();
@@ -39,9 +30,9 @@ export default function MobilePaymentComponent() {
         if (result) {
           setPaymentRequest(pr);
         } else {
-          var details = {
-            total: { label: "", amount: { currency: "CAD", value: "0.00" } },
-          };
+          // var details = {
+          //   total: { label: "", amount: { currency: "CAD", value: "0.00" } },
+          // };
           // new PaymentRequest(
           //   [{ supportedMethods: ["basic-card"] }],
           //   {}
@@ -53,35 +44,36 @@ export default function MobilePaymentComponent() {
   }, [stripe]);
 
   if (paymentRequest) {
-    // paymentRequest.on("paymentmethod", async (ev) => {
-    //     //Call server side to get the client secret
-    //   // Confirm the PaymentIntent without handling potential next actions (yet).
-    //   const { error: confirmError } = await stripe.confirmCardPayment(
-    //     clientSecret,
-    //     { payment_method: ev.paymentMethod.id },
-    //     { handleActions: false }
-    //   );
+    paymentRequest.on("paymentmethod", async (ev) => {
+        //Call server side to get the client secret
+      // Confirm the PaymentIntent without handling potential next actions (yet).
+      const { error: confirmError } = await stripe.confirmCardPayment(
+        "clientSecret",
+        { payment_method: ev.paymentMethod.id },
+        { handleActions: false }
+      );
 
-    //   if (confirmError) {
-    //     // Report to the browser that the payment failed, prompting it to
-    //     // re-show the payment interface, or show an error message and close
-    //     // the payment interface.
-    //     ev.complete("fail");
-    //   } else {
-    //     // Report to the browser that the confirmation was successful, prompting
-    //     // it to close the browser payment method collection interface.
-    //     ev.complete("success");
-    //     // Let Stripe.js handle the rest of the payment flow.
-    //     const { error, paymentIntent } = await stripe.confirmCardPayment(
-    //       clientSecret
-    //     );
-    //     if (error) {
-    //       // The payment failed -- ask your customer for a new payment method.
-    //     } else {
-    //       // The payment has succeeded.
-    //     }
-    //   }
-    // });
+      if (confirmError) {
+        // Report to the browser that the payment failed, prompting it to
+        // re-show the payment interface, or show an error message and close
+        // the payment interface.
+        ev.complete("fail");
+      } else {
+        // Report to the browser that the confirmation was successful, prompting
+        // it to close the browser payment method collection interface.
+        ev.complete("success");
+        // Let Stripe.js handle the rest of the payment flow.
+        const { error, paymentIntent } = await stripe.confirmCardPayment(
+          "clientSecret"
+        );
+        if (error) {
+          // The payment failed -- ask your customer for a new payment method.
+        } else {
+          // The payment has succeeded.
+          console.log('paymentIntent', paymentIntent)
+        }
+      }
+    });
     return (
       <div style={{ height: "300px" }}>
         <PaymentRequestButtonElement options={{ paymentRequest }} />
diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json
index 70b4fcc47..1a29837e9 100644
--- a/client/src/translations/en_us/common.json
+++ b/client/src/translations/en_us/common.json
@@ -1054,7 +1054,8 @@
 				"electronicpayment": "Use Electronic Payment Processing?",
 				"new": "New Payment",
 				"signup": "Please contact support to sign up for electronic payments.",
-				"title": "Payments"
+				"title": "Payments",
+				"type": "Type"
 			},
 			"successes": {
 				"payment": "Payment created successfully. ",
diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json
index ef91a01d0..cd5203cd7 100644
--- a/client/src/translations/es/common.json
+++ b/client/src/translations/es/common.json
@@ -1054,7 +1054,8 @@
 				"electronicpayment": "",
 				"new": "",
 				"signup": "",
-				"title": ""
+				"title": "",
+				"type": ""
 			},
 			"successes": {
 				"payment": "",
diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json
index c7757988b..43d8ca6e0 100644
--- a/client/src/translations/fr/common.json
+++ b/client/src/translations/fr/common.json
@@ -1054,7 +1054,8 @@
 				"electronicpayment": "",
 				"new": "",
 				"signup": "",
-				"title": ""
+				"title": "",
+				"type": ""
 			},
 			"successes": {
 				"payment": "",
diff --git a/package.json b/package.json
index f1b433f12..403dc27e3 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "0.0.1",
   "license": "UNLICENSED",
   "engines": {
-    "node": "12.16.2",
+    "node": "12.18.3",
     "npm": "6.11.3"
   },
   "scripts": {
@@ -12,7 +12,8 @@
     "client": "cd client && yarn start",
     "server": "nodemon server.js",
     "build": "cd client && npm run build",
-    "dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\" \"yarn admin\"",
+    "dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\"",
+    "deva": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\" \"yarn admin\"",
     "start": "node server.js",
     "heroku-postbuild": "cd client && npm install && npm install --only=dev --no-shrinkwrap && npm run build"
   },