@paypal/connect-loader-component - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

dist/load-axo-script.d.ts

 import { LoadAxoOptions } from "./types";
 /**
  * Loads accelerated checkout components.
- * @param options (Optional) object with a minified parameter to determine if the script that is loaded should be minified or not (defaults to true if)
- * @returns Promise<HTMLScriptElement> or Promise containing error if failure to load AXO components
+ * @param options object with a minified parameter to determine if the script that is loaded should be minified or not (defaults to true if)
+ * @returns an object with metadata with a localeUrl parameter to be read by AXO SDK
  */
-declare function loadAxo(options?: LoadAxoOptions): Promise<{
+declare function loadAxo(options: LoadAxoOptions): Promise<{
     metadata: {
@@ -9,0 +9,0 @@ localeUrl: string;

dist/load-axo-script.js

@@ -42,8 +42,8 @@ "use strict";
  * Loads accelerated checkout components.
- * @param options (Optional) object with a minified parameter to determine if the script that is loaded should be minified or not (defaults to true if)
- * @returns Promise<HTMLScriptElement> or Promise containing error if failure to load AXO components
+ * @param options object with a minified parameter to determine if the script that is loaded should be minified or not (defaults to true if)
+ * @returns an object with metadata with a localeUrl parameter to be read by AXO SDK
  */
 function loadAxo(options) {
     return __awaiter(this, void 0, void 0, function () {
-        var assetUrl, localeUrl, err_1;
+        var version, assetUrl, localeUrl, err_1;
         return __generator(this, function (_a) {
@@ -53,9 +53,6 @@ switch (_a.label) {
                     _a.trys.push([0, 2, , 3]);
+                    version = options.client.getVersion();
                     assetUrl = getAssetsUrl(options);
                     localeUrl = getLocaleUrl(options);
-                    return [4 /*yield*/, (0, asset_loader_1.loadScript)({
-                            id: "axo-id",
-                            src: assetUrl,
-                            forceScriptReload: true,
-                        })];
+                    return [4 /*yield*/, Promise.all([loadHCFScript(version), loadAXOScript(assetUrl)])];
                 case 1:
@@ -73,2 +70,25 @@ _a.sent();
 /**
+ * Reads the version and to load the correct version of HCF, so we don't run into a version mismatch between hcf and client
+ * @param version (Required) string version that should be passed from the client getVersion
+ * @returns Promise<HTMLScriptElement>
+ */
+function loadHCFScript(version) {
+    return (0, asset_loader_1.loadScript)({
+        id: "hcf-".concat(version),
+        src: "https://js.braintreegateway.com/web/".concat(version, "/js/hosted-fields.min.js"),
+    });
+}
+/**
+ * Reads the url and to load the axo bundle script
+ * @param url (Required) string url for the correct axo asset
+ * @returns Promise<HTMLScriptElement>
+ */
+function loadAXOScript(url) {
+    return (0, asset_loader_1.loadScript)({
+        id: "axo-id",
+        src: url,
+        forceScriptReload: true,
+    });
+}
+/**
  * Prepends the domain to the asset url
@@ -96,3 +116,3 @@ * @param options object with assetUrl and bundleid parameters to determine which URL to return
         assetUrl: assetUrl,
-        bundleId: (_a = options === null || options === void 0 ? void 0 : options.metadata) === null || _a === void 0 ? void 0 : _a.bundleIdOveride,
+        bundleId: (_a = options === null || options === void 0 ? void 0 : options.metadata) === null || _a === void 0 ? void 0 : _a.bundleIdOverride,
     });
@@ -109,5 +129,5 @@ }
         assetUrl: constants_1.constants.LOCALE_PATH,
-        bundleId: (_a = options === null || options === void 0 ? void 0 : options.metadata) === null || _a === void 0 ? void 0 : _a.bundleIdOveride,
+        bundleId: (_a = options === null || options === void 0 ? void 0 : options.metadata) === null || _a === void 0 ? void 0 : _a.bundleIdOverride,
     });
 }
 module.exports = loadAxo;

dist/types.d.ts

 type LoadAxoOptionsMetaData = {
-    bundleIdOveride?: string;
+    bundleIdOverride?: string;
 };
+type Client = {
+    getVersion: () => string;
+};
 export type GenerateAssetUrl = {
@@ -9,2 +12,3 @@ assetUrl: string;
 export type LoadAxoOptions = {
+    client: Client;
     minified?: boolean;
@@ -11,0 +15,0 @@ metadata?: LoadAxoOptionsMetaData;

package.json

 {
   "name": "@paypal/connect-loader-component",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Loads AXO script",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -61,1 +61,9 @@ # accelerated-checkout-loader
 ```
+
+## Testing
+
+In order to test our accelerated checkout loader, we'll need to install [braintree.js](github.braintreeps.com) repo locally, which creates the final connect.js build for us to be consumed by accelerated checkout.
+
+Run `npm link` in the `accelerated-checkout-loader` folder, then in the braintree repo, install node_modules and then `npm run build`. This should create a `connect.js` file under `dist/hosted/web/{VERSION}`, which should include your loader changes.
+
+Now you can either stage it using web stage or just store it locally to be replaced whereever you were originally calling the connect file.

src/__tests__/load-axo-script.ts

@@ -14,2 +14,3 @@ jest.mock("@braintree/asset-loader", () => {
   let testContext;
+  const version = "3.96";
 
@@ -23,6 +24,11 @@ beforeEach(() => {
     };
+    testContext.client = {
+      getVersion: () => {
+        return version;
+      },
+    };
   });
 
   it("calls loadScript with the minified URL when specified", async () => {
-    const promise = loadAxo({ minified: true });
+    const promise = loadAxo({ client: testContext.client, minified: true });
     expect(promise).resolves.toStrictEqual(testContext.mockLoadResponse);
@@ -38,3 +44,6 @@ expect(assetLoader.loadScript).toHaveBeenCalled();
   it("loads the unminified URL when specified", () => {
-    const promise = loadAxo({ minified: false });
+    const promise = loadAxo({
+      client: testContext.client,
+      minified: false,
+    });
 
@@ -51,3 +60,3 @@ expect(promise).resolves.toStrictEqual(testContext.mockLoadResponse);
   it("default to the minified script when no environment is specified", () => {
-    const promise = loadAxo();
+    const promise = loadAxo({ client: testContext.client });
     expect(promise).resolves.toStrictEqual(testContext.mockLoadResponse);
@@ -64,3 +73,6 @@ expect(assetLoader.loadScript).toHaveBeenCalled();
     const bundleId = "2bc4343c92655";
-    const promise = loadAxo({ metadata: { bundleIdOveride: bundleId } });
+    const promise = loadAxo({
+      client: testContext.client,
+      metadata: { bundleIdOverride: bundleId },
+    });
 
@@ -83,4 +95,5 @@ expect(promise).resolves.toStrictEqual({
     const promise = loadAxo({
+      client: testContext.client,
       minified: true,
-      metadata: { bundleIdOveride: bundleId },
+      metadata: { bundleIdOverride: bundleId },
     });
@@ -99,2 +112,27 @@ expect(promise).resolves.toStrictEqual({
   });
+
+  it("calls loadScript for HCF and axo", () => {
+    const promise = loadAxo({
+      client: testContext.client,
+      minified: true,
+    });
+
+    expect(promise).resolves.toStrictEqual({
+      metadata: {
+        localeUrl: `${constants.CDNX_PROD}/${constants.LOCALE_PATH}`,
+      },
+    });
+    expect(assetLoader.loadScript).toHaveBeenCalledTimes(2);
+    expect(assetLoader.loadScript).toHaveBeenCalledWith(
+      expect.objectContaining({
+        id: `hcf-${version}`,
+        src: `https://js.braintreegateway.com/web/${version}/js/hosted-fields.min.js`,
+      })
+    );
+    expect(assetLoader.loadScript).toHaveBeenCalledWith(
+      expect.objectContaining({
+        src: `${constants.CDNX_PROD}/${constants.AXO_URL.minified}`,
+      })
+    );
+  });
 });

src/load-axo-script.ts

@@ -7,14 +7,13 @@ import { loadScript } from "@braintree/asset-loader";
  * Loads accelerated checkout components.
- * @param options (Optional) object with a minified parameter to determine if the script that is loaded should be minified or not (defaults to true if)
- * @returns Promise<HTMLScriptElement> or Promise containing error if failure to load AXO components
+ * @param options object with a minified parameter to determine if the script that is loaded should be minified or not (defaults to true if)
+ * @returns an object with metadata with a localeUrl parameter to be read by AXO SDK
  */
-async function loadAxo(options?: LoadAxoOptions) {
+async function loadAxo(options: LoadAxoOptions) {
   try {
+    const version = options.client.getVersion();
+
     const assetUrl = getAssetsUrl(options);
     const localeUrl = getLocaleUrl(options);
-    await loadScript({
-      id: "axo-id",
-      src: assetUrl,
-      forceScriptReload: true,
-    });
+
+    await Promise.all([loadHCFScript(version), loadAXOScript(assetUrl)]);
     return { metadata: { localeUrl } };
@@ -27,2 +26,27 @@ } catch (err) {
 /**
+ * Reads the version and to load the correct version of HCF, so we don't run into a version mismatch between hcf and client
+ * @param version (Required) string version that should be passed from the client getVersion
+ * @returns Promise<HTMLScriptElement>
+ */
+function loadHCFScript(version: string) {
+  return loadScript({
+    id: `hcf-${version}`,
+    src: `https://js.braintreegateway.com/web/${version}/js/hosted-fields.min.js`,
+  });
+}
+
+/**
+ * Reads the url and to load the axo bundle script
+ * @param url (Required) string url for the correct axo asset
+ * @returns Promise<HTMLScriptElement>
+ */
+function loadAXOScript(url: string) {
+  return loadScript({
+    id: "axo-id",
+    src: url,
+    forceScriptReload: true,
+  });
+}
+
+/**
  * Prepends the domain to the asset url
@@ -51,3 +75,3 @@ * @param options object with assetUrl and bundleid parameters to determine which URL to return
     assetUrl,
-    bundleId: options?.metadata?.bundleIdOveride,
+    bundleId: options?.metadata?.bundleIdOverride,
   });
@@ -64,3 +88,3 @@ }
     assetUrl: constants.LOCALE_PATH,
-    bundleId: options?.metadata?.bundleIdOveride,
+    bundleId: options?.metadata?.bundleIdOverride,
   });
@@ -67,0 +91,0 @@ }

src/types.ts

 type LoadAxoOptionsMetaData = {
-  bundleIdOveride?: string;
+  bundleIdOverride?: string;
 };
 
+type Client = {
+  getVersion: () => string;
+};
+
 export type GenerateAssetUrl = {
@@ -11,4 +15,5 @@ assetUrl: string;
 export type LoadAxoOptions = {
+  client: Client;
   minified?: boolean;
   metadata?: LoadAxoOptionsMetaData;
 };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

19525

increased by19.83%

Lines of code

424

increased by24.71%

Number of lines in readme file

69

increased by13.11%

No dependency changes