PWA-2968::Magento/plugin braintree three d secure

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

@@ -0,0 +1,111 @@
+/**
+ * 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 "@magento/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/plugin-braintree-three-d-secure/Model/useBraintreeThreeDSecure.js

@@ -0,0 +1,24 @@
+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();
+        }
+    }, [clientToken, setBraintreeClientToken]);
+
+    return clientToken;
+};

packages/extensions/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/plugin-braintree-three-d-secure/README.md

@@ -0,0 +1,7 @@
+# GoMage Braintree 3D Secure
+
+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/plugin-braintree-three-d-secure/index.js

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

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

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

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

@@ -0,0 +1,21 @@
+{
+  "name": "@magento/plugin-braintree-three-d-secure",
+  "version": "1.0.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "Braintree 3D Secure",
+  "main": "./index.js",
+    "scripts": {
+    "clean": " "
+  },
+  "license": "SEE LICENSE IN LICENSE.txt",
+  "dependencies": {
+    "braintree-web-drop-in": "~1.43.0"
+  },
+  "pwa-studio": {
+    "targets": {
+      "intercept": "./intercept.js"
+    }
+  }
+}

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

@@ -36,7 +36,7 @@ veniaSecurityHeaders:
             base-uri 'none';
             child-src 'self';
             font-src 'self' fonts.gstatic.com;
-            rame-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

@@ -35,6 +35,7 @@
   },
   "homepage": "https://github.com/magento/pwa-studio/tree/main/packages/venia-concept#readme",
   "dependencies": {
+    "@magento/plugin-braintree-three-d-secure": "1.0.0",
     "@magento/pwa-buildpack": "~11.5.3",
     "dompurify": "~3.2.4"
   },
@@ -51,6 +52,7 @@
     "@babel/plugin-transform-runtime": "~7.4.4",
     "@babel/preset-env": "~7.16.0",
     "@babel/runtime": "~7.15.3",
+    "@magento/plugin-braintree-three-d-secure": "1.0.0",
     "@magento/babel-preset-peregrine": "~1.3.3",
     "@magento/eslint-config": "~1.5.0",
     "@magento/pagebuilder": "~9.3.3",
@@ -145,6 +147,9 @@
   "pwa-studio": {
     "targets": {
       "intercept": "./local-intercept.js"
-    }
+    },
+    "trusted-vendors": [
+      "@magento"
+    ]
   }
 }