Pwa 2968::Gomage/plugin braintree three d secure (#4378)

* The current problem is that the 3D Secure feature is not working. Whenever you are trying to run a transaction, you get an error (see image), and there seems to be no API call to process this request. * [PWA Studio] - Test Braintree #D Secure fix for Venia * [PWA Studio] - Add to frame-src *.cardinalcommerce.com (for test only) * [PWA Studio] - Add to frame-src *.cardinalcommerce.com (for test only) * PWA-2968::[Issue] Gomage/plugin braintree three d secure * PWA-2968::[Issue] Gomage/plugin braintree three d secure * Resolve clean issue * PWA-2968:updating version * Adding license field else showing error during yarn clean:all * Gomage/plugin braintree three d secure --------- Co-authored-by: rtsehynka <[email protected]> Co-authored-by: rtsehynka-gm <[email protected]> Co-authored-by: Devagouda <[email protected]> Co-authored-by: chetana11 <[email protected]>
magento · Jan 24, 2025 · e104182 · e104182
1 parent e55b120
commit e104182
Show file tree

Hide file tree

Showing 12 changed files with 299 additions and 19 deletions.
diff --git a/packages/extensions/gomage-plugin-braintree-three-d-secure/Intercepts/brainTreeDropIn.js b/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;
diff --git a/packages/extensions/gomage-plugin-braintree-three-d-secure/Model/useBraintreeThreeDSecure.js b/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;
+};
diff --git a/...tensions/gomage-plugin-braintree-three-d-secure/Queries/createBraintreeClientToken.gql.js b/...tensions/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
+    }
+`;
diff --git a/packages/extensions/gomage-plugin-braintree-three-d-secure/README.md b/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.
diff --git a/packages/extensions/gomage-plugin-braintree-three-d-secure/index.js b/packages/extensions/gomage-plugin-braintree-three-d-secure/index.js
@@ -0,0 +1 @@
+export { useBraintreeThreeDSecure } from './Model/useBraintreeThreeDSecure';
diff --git a/packages/extensions/gomage-plugin-braintree-three-d-secure/intercept.js b/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;
diff --git a/packages/extensions/gomage-plugin-braintree-three-d-secure/package.json b/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"
+    }
+  }
+}
diff --git a/packages/extensions/upward-security-headers/upward.yml b/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

diff --git a/packages/peregrine/lib/talons/FormError/__tests__/__snapshots__/useFormError.spec.js.snap b/packages/peregrine/lib/talons/FormError/__tests__/__snapshots__/useFormError.spec.js.snap
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`returns concatenated error message when allowErrorMessages 1`] = `"GraphQL Error 1, GraphQL Error 2"`;
+exports[`returns concatenated error message when allowErrorMessages 1`] = `"formError.responseError"`;
 
-exports[`returns general error message 1`] = `"formError.errorMessage, Generic Error"`;
+exports[`returns general error message 1`] = `"formError.responseError, Generic Error"`;
diff --git a/packages/venia-concept/package.json b/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.2",
@@ -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"
+    ]
   }
 }
diff --git a/packages/venia-ui/package.json b/packages/venia-ui/package.json
@@ -83,7 +83,7 @@
     "@magento/peregrine": "~14.4.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",
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { useBraintreeThreeDSecure } from './Model/useBraintreeThreeDSecure';