refactor: update request to accept raw JSON or encoded (#1157)

Author: perco12

src/components/message/Message.js

@@ -186,8 +186,9 @@ const Message = function ({ markup, meta, parentStyles, warnings }) {
 
                 request('GET', `${window.location.origin}/credit-presentment/smart/message?${query}`).then(
                     ({ data: resData }) => {
-                        const encodedData = resData.slice(resData.indexOf('<!--') + 4, resData.indexOf('-->'));
-                        const data = parseObjFromEncoding(encodedData);
+                        const jsonData = resData.slice(resData.indexOf('<!--') + 4, resData.indexOf('-->'));
+                        // TODO: Cleanup ternary and remove 'parseObjFromEncoding' from utils; only JSON.parse will be needed.
+                        const data = jsonData.startsWith('{') ? JSON.parse(jsonData) : parseObjFromEncoding(jsonData);
                         button.innerHTML = data.markup ?? markup ?? '';
                         const buttonWidth = button.offsetWidth;
                         const buttonHeight = button.offsetHeight;

tests/unit/spec/src/components/message/Message.test.js

@@ -1,7 +1,7 @@
 import { getByText, fireEvent, queryByText } from '@testing-library/dom';
 
 import Message from 'src/components/message/Message';
-import { request, createState } from 'src/utils';
+import { request, createState, parseObjFromEncoding } from 'src/utils';
 import xPropsMock from 'utils/xPropsMock';
 
 const ts = {
@@ -63,6 +63,7 @@ describe('Message', () => {
         createState.mockClear();
         request.mockClear();
         xPropsMock.clear();
+        parseObjFromEncoding.mockClear();
     });
 
     test('Renders the button with styles', () => {
@@ -179,4 +180,14 @@ describe('Message', () => {
             ts
         });
     });
+
+    test('raw json data from request', async () => {
+        request.mockReturnValue(
+            Promise.resolve({
+                data: '<!--{"markup":"<div>json response</div>","meta":{"messageRequestId":"34567"}}-->'
+            })
+        );
+        Message(serverData);
+        expect(parseObjFromEncoding).not.toHaveBeenCalled();
+    });
 });

utils/devServerProxy/lib/miscellaneous.js

@@ -61,39 +61,15 @@ export const localizeCurrency =
 
 export const waitForTimeout = timeout => new Promise(resolve => setTimeout(resolve, timeout));
 
-export function btoa(str) {
-    const buffer = Buffer.from(str.toString(), 'binary');
-    return buffer.toString('base64');
-}
-
-export function toBinary(string) {
-    const codeUnits = new Uint16Array(string.length);
-    for (let i = 0; i < codeUnits.length; i++) {
-        codeUnits[i] = string.charCodeAt(i);
-    }
-    return String.fromCharCode(...new Uint8Array(codeUnits.buffer));
-}
-
-export const createMockZoidMarkup = ({ component, scriptUID, port, encodedData }) => {
+export const createMockZoidMarkup = ({ component, scriptUID, port, jsonData }) => {
     const setupFunctionName = component === 'message' ? 'crc.setupMessage' : 'crc.setupModal';
 
     const interfaceScript = `<script>var interface = (window.opener ?? window.parent).document.querySelector('[data-uid-auto="${scriptUID}"]').outerHTML; document.write(interface);</script>`;
     const componentScript = `<script src="//localhost.paypal.com:${port}/smart-credit-${component}.js"></script>`;
-    const initializerScript = `<script>${setupFunctionName}(JSON.parse(fromBinary(atob(document.firstChild.nodeValue))))</script>`;
-    const utilScript = `
-        <script>
-            function fromBinary(binary) {
-                const bytes = new Uint8Array(binary.length);
-                for (let i = 0; i < bytes.length; i++) {
-                    bytes[i] = binary.charCodeAt(i);
-                }
-                return String.fromCharCode.apply(null, new Uint16Array(bytes.buffer));
-            }
-        </script>
-    `;
+    const initializerScript = `<script>${setupFunctionName}(JSON.parse(document.firstChild.nodeValue))</script>`;
 
     return `
-<!--${encodedData}-->
+<!--${jsonData}-->
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -104,7 +80,6 @@ export const createMockZoidMarkup = ({ component, scriptUID, port, encodedData }
 <body>
     ${component !== 'modal-v2-lander' ? interfaceScript : ''}
     ${componentScript}
-    ${utilScript}
     ${initializerScript}
 </body>
 </html>

utils/devServerProxy/messages.js

@@ -3,7 +3,7 @@ import path from 'path';
 import got from 'got';
 
 import { PORT, VARIANT } from '../../src/server/constants';
-import { populateTemplate, createMockZoidMarkup, waitForTimeout, btoa, toBinary } from './lib/miscellaneous';
+import { populateTemplate, createMockZoidMarkup, waitForTimeout } from './lib/miscellaneous';
 import getDevAccountDetails from './lib/devAccountDetails';
 
 // set this environment variable to simulate the time for the request to be answered
@@ -104,8 +104,8 @@ export default function createMessageRoutes(app, server, compiler) {
     app.get('/credit-presentment/smart/message', async (req, res) => {
         const { scriptUID } = req.query;
         const props = await getMessageData(req, compiler);
-        const encodedData = btoa(toBinary(JSON.stringify(props)));
-        const markup = createMockZoidMarkup({ component: 'message', encodedData, scriptUID, port });
+        const jsonData = JSON.stringify(props);
+        const markup = createMockZoidMarkup({ component: 'message', jsonData, scriptUID, port });
 
         await waitForTimeout(REQUEST_DELAY);
 

utils/devServerProxy/modals.js

@@ -1,4 +1,4 @@
-import { createMockZoidMarkup, populateTemplate, waitForTimeout, btoa, toBinary } from './lib/miscellaneous';
+import { createMockZoidMarkup, populateTemplate, waitForTimeout } from './lib/miscellaneous';
 import getDevAccountDetails from './lib/devAccountDetails';
 
 const REQUEST_DELAY = process.env.REQUEST_DELAY ?? 500;
@@ -53,7 +53,7 @@ export default function createModalRoutes(app, server) {
     app.get('/credit-presentment/smart/modal', async (req, res) => {
         const { scriptUID } = req.query;
         const props = getModalData(req);
-        const encodedData = btoa(toBinary(JSON.stringify(props)));
+        const jsonData = JSON.stringify(props);
 
         const postfix = (() => {
             if (props.views) {
@@ -77,7 +77,7 @@ export default function createModalRoutes(app, server) {
 
         const markup = createMockZoidMarkup({
             component: `modal-${postfix}`,
-            encodedData,
+            jsonData,
             scriptUID,
             port
         });
@@ -97,10 +97,10 @@ export default function createModalRoutes(app, server) {
 
     app.get('/credit-presentment/lander/modal', async (req, res) => {
         const props = getModalData(req);
-        const encodedData = btoa(toBinary(JSON.stringify(props)));
+        const jsonData = JSON.stringify(props);
         const markup = createMockZoidMarkup({
             component: 'modal-v2-lander',
-            encodedData,
+            jsonData,
             port
         });