PWA-2968::[Issue] Gomage/plugin braintree three d secure

packages/extensions/gomage-plugin-braintree-three-d-secure/Intercepts/brainTreeDropIn.js

@@ -0,0 +1,112 @@
+/**
+ * adding to brainTreeDropIn 3D secure part
+ * @param targets
+ */
+function localIntercept(targets) {
+    const {Targetables} = require('@magento/pwa-buildpack');
+    const targetables = Targetables.using(targets);
+
+    /**
+     * We can disable the logic if you will add to .env param CHECKOUT_BRAINTREE_3D with value false
+     */
+    if (process.env.CHECKOUT_BRAINTREE_3D != 'false') {
+        const brainTreeDropIn = targetables.reactComponent(
+            '@magento/venia-ui/lib/components/CheckoutPage/PaymentInformation/brainTreeDropIn.js'
+        );
+
+        /**
+         * import 3d secure plugin
+         */
+        brainTreeDropIn.addImport('{useBraintreeThreeDSecure} from "@gomage/plugin-braintree-three-d-secure"');
+        brainTreeDropIn.addImport('{usePriceSummary} from "@magento/peregrine/lib/talons/CartPage/PriceSummary/usePriceSummary"');
+
+        /**
+         * add hook for getting of client token
+         */
+        brainTreeDropIn.insertAfterSource(
+            'const [dropinInstance, setDropinInstance] = useState();',
+            '\n const clientToken = useBraintreeThreeDSecure();' +
+            '\n const talonProps = usePriceSummary();'
+        );
+        /**
+         * check if exist clientToken
+         */
+        brainTreeDropIn.insertAfterSource(
+            'const createDropinInstance = useCallback(async () => {',
+            '\n if(clientToken){ '
+        );
+        /**
+         * end condition of check if exist clientToken
+         */
+        brainTreeDropIn.insertAfterSource(
+            'return dropinInstance;',
+            '\n}'
+        );
+        /**
+         * setting new dependency clientToken to useCallback createDropinInstance hook
+         */
+        brainTreeDropIn.insertAfterSource(
+            '[containerId',
+            ' ,clientToken, talonProps.flatData.total.value'
+        );
+
+
+        /**
+         * check if exist clientToken
+         */
+        brainTreeDropIn.insertBeforeSource(
+            'const renderDropin = async () => {',
+            '\n if(clientToken){ '
+        );
+
+        /**
+         * end condition of check if exist clientToken
+         */
+        brainTreeDropIn.insertBeforeSource(
+            '}, [createDropinInstance, onReady]);',
+            '}  \n'
+        );
+
+        /**
+         * setting new dependency clientToken to useEffect hook
+         */
+        brainTreeDropIn.insertAfterSource(
+            '[createDropinInstance, onReady',
+            ' ,clientToken'
+        );
+
+
+        /**
+         * change of value token to client Token
+         */
+        brainTreeDropIn.insertAfterSource(
+            'const dropinInstance = await dropIn.create({\n' +
+            '            authorization',
+            ':clientToken',
+        );
+
+        /**
+         * enable 3d secure
+         */
+        brainTreeDropIn.insertAfterSource(
+            'container: `#${containerId}`,',
+            '\n  threeDSecure: {amount:talonProps.flatData.total.value},',
+        );
+
+        /**
+         * update brain tree if total was changes
+         */
+        brainTreeDropIn.insertBeforeSource(
+            'if (isError) {',
+            'useEffect(() => {\n' +
+            '        if(dropinInstance) {\n' +
+            '            dropinInstance.teardown();\n' +
+            '        }\n' +
+            '    }, [\n' +
+            '     talonProps.flatData.total.value,\n' +
+            ']);',
+        );
+    }
+}
+
+module.exports = localIntercept;

packages/extensions/gomage-plugin-braintree-three-d-secure/Model/useBraintreeThreeDSecure.js

@@ -0,0 +1,22 @@
+import {useMutation} from "@apollo/client";
+import {useEffect} from "react";
+import {GET_BRAINTREE_CLIENT_TOKEN} from '../Queries/createBraintreeClientToken.gql';
+
+/**
+ *
+ * @returns {*|string}
+ */
+export const useBraintreeThreeDSecure = () => {
+    const [setBraintreeClientToken, {data}] = useMutation(GET_BRAINTREE_CLIENT_TOKEN);
+    const clientToken = data ? data.createBraintreeClientToken : '';
+    /**
+     * set Braintree Client Token
+     */
+    useEffect(() => {
+        if(!clientToken) {
+            setBraintreeClientToken();
+        }
+    }, []);
+
+    return clientToken;
+}

packages/extensions/gomage-plugin-braintree-three-d-secure/Queries/createBraintreeClientToken.gql.js

@@ -0,0 +1,10 @@
+import { gql } from '@apollo/client';
+/**
+ *
+ * @type {DocumentNode}
+ */
+export const GET_BRAINTREE_CLIENT_TOKEN = gql`
+    mutation {
+        createBraintreeClientToken
+    }
+`;

packages/extensions/gomage-plugin-braintree-three-d-secure/README.md

@@ -0,0 +1,7 @@
+# GoMage Braintree 3D Secure
+
+GoMage Braintree 3D Secure
+
+That plugin works only as a  fix bugs of PWA Studio and adds 3d secure part.
+
+If you need to disable the module, you can add to the .env parameter CHECKOUT_BRAINTREE_3D=false, or remove the plugin.

packages/extensions/gomage-plugin-braintree-three-d-secure/index.js

@@ -0,0 +1 @@
+export {useBraintreeThreeDSecure} from './Model/useBraintreeThreeDSecure'

packages/extensions/gomage-plugin-braintree-three-d-secure/intercept.js

@@ -0,0 +1,9 @@
+/**
+ *
+ * @param targets
+ */
+function localIntercept(targets) {
+    require("@gomage/plugin-braintree-three-d-secure/Intercepts/brainTreeDropIn")(targets);
+}
+
+module.exports = localIntercept;

packages/extensions/gomage-plugin-braintree-three-d-secure/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@gomage/plugin-braintree-three-d-secure",
+  "version": "1.0.3",
+  "description": "GoMage Braintree 3D Secure",
+  "main": "./index.js",
+  "author": "GoMage",
+  "pwa-studio": {
+    "targets": {
+      "intercept": "./intercept.js"
+    }
+  },
+  "dependencies": {
+    "braintree-web-drop-in": "~1.33.1"
+  }
+}

packages/extensions/upward-security-headers/upward.yml

@@ -25,7 +25,7 @@ veniaSecurityHeaders:
                 base-uri 'none';
                 child-src 'self';
                 font-src 'self' fonts.gstatic.com;
-                frame-src assets.braintreegateway.com *.google.com *.youtube.com *.youtu.be *.vimeo.com
+                frame-src *.braintreegateway.com *.google.com *.youtube.com *.youtu.be *.vimeo.com *.cardinalcommerce.com
                 "
         default:
           inline: "
@@ -36,7 +36,7 @@ veniaSecurityHeaders:
             base-uri 'none';
             child-src 'self';
             font-src 'self' fonts.gstatic.com;
-            frame-src assets.braintreegateway.com *.google.com *.youtube.com *.youtu.be *.vimeo.com
+            frame-src *.braintreegateway.com *.google.com *.youtube.com *.youtu.be *.vimeo.com *.cardinalcommerce.com
             "
     strict-transport-security:
       inline: max-age=31536000

packages/venia-concept/package.json

@@ -144,6 +144,10 @@
   "pwa-studio": {
     "targets": {
       "intercept": "./local-intercept.js"
-    }
+    },
+    "trusted-vendors": [
+      "@gomage"
+    ]
   }
+
 }