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

packages/extensions/gomage-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 "@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,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/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,11 @@
+/**
+ *
+ * @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,20 @@
+{
+  "name": "@gomage/plugin-braintree-three-d-secure",
+  "version": "3.94.0",
+  "description": "GoMage Braintree 3D Secure",
+  "main": "./index.js",
+  "author": "GoMage",
+  "dependencies": {
+    "braintree-web-drop-in": "~1.43.0"
+  },
+
+  "scripts": {
+    "clean": " "
+  },
+  "license": "SEE LICENSE IN LICENSE.txt",
+  "pwa-studio": {
+    "targets": {
+      "intercept": "./intercept.js"
+    }
+  }
+}

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/pwa-buildpack/lib/WebpackTools/targetables/__tests__/__snapshots__/TargetableReactComponent.spec.js.snap

@@ -273,8 +273,8 @@ exports.Checkbox = Checkbox;
 var _react = require(\\"react\\");
 const _excluded = [\\"classes\\", \\"fieldState\\", \\"id\\", \\"label\\", \\"message\\"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
 function _getRequireWildcardCache(e) { if (\\"function\\" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || \\"object\\" != typeof e && \\"function\\" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if (\\"default\\" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const DynamicComponent$3 = (0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require('./path/to/a-third/component'))));

packages/venia-concept/package.json

@@ -35,6 +35,7 @@
   },
   "homepage": "https://github.com/magento/pwa-studio/tree/main/packages/venia-concept#readme",
   "dependencies": {
+    "@gomage/plugin-braintree-three-d-secure": "3.94.0",
     "@magento/pwa-buildpack": "~11.5.3"
   },
   "devDependencies": {
@@ -50,6 +51,7 @@
     "@babel/plugin-transform-runtime": "~7.4.4",
     "@babel/preset-env": "~7.16.0",
     "@babel/runtime": "~7.15.3",
+    "@gomage/plugin-braintree-three-d-secure": "3.94.0",
     "@magento/babel-preset-peregrine": "~1.3.3",
     "@magento/eslint-config": "~1.5.0",
     "@magento/pagebuilder": "~9.3.1",
@@ -69,7 +71,7 @@
     "babel-plugin-graphql-tag": "~2.0.0",
     "babel-plugin-module-resolver": "~3.2.0",
     "babel-plugin-react-remove-properties": "~0.3.0",
-    "braintree-web-drop-in": "~1.33.3",
+    "braintree-web-drop-in": "~1.43.0",
     "compression": "~1.7.4",
     "css-loader": "~5.2.7",
     "dotenv": "~6.2.0",
@@ -144,6 +146,9 @@
   "pwa-studio": {
     "targets": {
       "intercept": "./local-intercept.js"
-    }
+    },
+    "trusted-vendors": [
+      "@gomage"
+    ]
   }
 }

packages/venia-ui/package.json

@@ -83,7 +83,7 @@
     "@magento/peregrine": "~14.3.1",
     "@magento/pwa-buildpack": "~11.5.3",
     "apollo-cache-persist": "~0.1.1",
-    "braintree-web-drop-in": "~1.33.3",
+    "braintree-web-drop-in": "~1.43.0",
     "graphql": "~15.5.0",
     "react": "~17.0.1",
     "react-intl": "~5.20.0",