update overlay, save 3ds comp on eligibility to class variable

Author: siddy2181

Diff for: dist/button.js

@@ -2,78 +2,21 @@
 /* eslint-disable eslint-comments/disable-enable-pair */
 /* eslint-disable no-restricted-globals, promise/no-native */
 import { type LoggerType } from "@krakenjs/beaver-logger/src";
-import { create, type ZoidComponent } from "@krakenjs/zoid/src";
-import { inlineMemoize, noop } from "@krakenjs/belter/src";
+import { type ZoidComponent } from "@krakenjs/zoid/src";
+import { ZalgoPromise } from "@krakenjs/zalgo-promise/src";
 import { FPTI_KEY } from "@paypal/sdk-constants/src";
-import { Overlay } from "../ui/overlay";
 
 import { ValidationError } from "../lib";
 
-type MerchantPayloadData = {|
-  amount: string,
-  currency: string,
-  nonce: string,
-  threeDSRequested?: boolean,
-  transactionContext?: Object,
-|};
-
-// eslint-disable-next-line no-undef
-type Request = <TRequestData, TResponse>({|
-  method?: string,
-  url: string,
-  // eslint-disable-next-line no-undef
-  data: TRequestData,
-  accessToken: ?string,
-  // eslint-disable-next-line no-undef
-|}) => Promise<TResponse>;
-
-type requestData = {|
-  intent: "THREE_DS_VERIFICATION",
-  payment_source: {|
-    card: {|
-      single_use_token: string,
-      verification_method: string,
-    |},
-  |},
-  amount: {|
-    currency_code: string,
-    value: string,
-  |},
-  transaction_context?: {|
-    soft_descriptor?: string,
-  |},
-|};
-
-type responseBody = {|
-  payment_id: string,
-  status: string,
-  intent: string,
-  payment_source: {|
-    card: {|
-      last_digits: string,
-      type: string,
-      name: string,
-      expiry: string,
-    |},
-  |},
-  amount: {|
-    currency_code: string,
-    value: string,
-  |},
-  transaction_context: {|
-    soft_descriptor: string,
-  |},
-  links: $ReadOnlyArray<{|
-    href: string,
-    rel: string,
-    method: string,
-  |}>,
-|};
-
-type SdkConfig = {|
-  authenticationToken: ?string,
-  paypalApiDomain: string,
-|};
+import {
+  requestData,
+  responseBody,
+  Request,
+  MerchantPayloadData,
+  SdkConfig,
+  threeDSResponse,
+} from "./types";
+import { getThreeDomainSecureComponent } from "./utils";
 
 const parseSdkConfig = ({ sdkConfig, logger }): SdkConfig => {
   if (!sdkConfig.authenticationToken) {
@@ -98,11 +41,9 @@ const parseMerchantPayload = ({
   // empty object
   const { threeDSRequested, amount, currency, nonce, transactionContext } =
     merchantPayload;
-
   // amount - validate that it's a string
   // currency - validate that it's a string
   // what validations are done on the API end - what client side validation is the API expecting
-
   return {
     intent: "THREE_DS_VERIFICATION",
     payment_source: {
@@ -123,14 +64,14 @@ const parseMerchantPayload = ({
 
 export interface ThreeDomainSecureComponentInterface {
   isEligible(): Promise<boolean>;
-  show(): ZoidComponent<void>;
+  show(): Promise<threeDSResponse>;
 }
 export class ThreeDomainSecureComponent {
   logger: LoggerType;
   request: Request;
   sdkConfig: SdkConfig;
   authenticationURL: string;
-
+  threeDSIframe: ZoidComponent;
   constructor({
     logger,
     request,
@@ -147,24 +88,24 @@ export class ThreeDomainSecureComponent {
 
   async isEligible(merchantPayload: MerchantPayloadData): Promise<boolean> {
     const data = parseMerchantPayload({ merchantPayload });
-    console.log(data);
-    console.log(this.request);
     try {
       // $FlowFixMe
       const { status, links } = await this.request<requestData, responseBody>({
         method: "POST",
-        url: `${this.sdkConfig.paypalApiDomain}/v2/payments/payment`,
+        url: `https://te-test-qa.qa.paypal.com:12326/v2/payments/payment`,
         data,
         accessToken: this.sdkConfig.authenticationToken,
       });
 
       let responseStatus = false;
-      console.log(links);
       if (status === "PAYER_ACTION_REQUIRED") {
         this.authenticationURL = links.find(
           (link) => link.rel === "payer-action"
         ).href;
         responseStatus = true;
+        this.threeDSIframe = getThreeDomainSecureComponent(
+          this.authenticationURL
+        );
       }
       return responseStatus;
     } catch (error) {
@@ -173,69 +114,47 @@ export class ThreeDomainSecureComponent {
     }
   }
 
-  show() {
-    return inlineMemoize(show, () => {
-      const component = create({
-        tag: "three-domain-secure-client",
-        url: this.authenticationURL,
-
-        attributes: {
-          iframe: {
-            scrolling: "no",
-          },
-        },
-
-        containerTemplate: ({
-          context,
-          focus,
-          close,
-          frame,
-          prerenderFrame,
-          doc,
-          event,
-          props,
-        }) => {
-          console.log("$$$$ props", props);
-          return (
-            <Overlay
-              context={context}
-              close={close}
-              focus={focus}
-              event={event}
-              frame={frame}
-              prerenderFrame={prerenderFrame}
-              content={props.content}
-              nonce={props.nonce}
-            />
-          ).render(dom({ doc }));
-        },
-
-        props: {
-          xcomponent: {
-            type: "string",
-            queryParam: true,
-            value: () => "1",
-          },
-          clientID: {
-            type: "string",
-            value: getClientID,
-            queryParam: true,
-          },
-          content: {
-            type: "object",
-            required: false,
-          },
-        },
+  show(): Promise<threeDSResponse> {
+    if (!this.threeDSIframe) {
+      throw new ValidationError(`Ineligible for three domain secure`);
+      return;
+    }
+    const promise = new ZalgoPromise();
+    const cancelThreeDS = () => {
+      return ZalgoPromise.try(() => {
+        // eslint-disable-next-line no-console
+        console.log("cancelled");
+      }).then(() => {
+        // eslint-disable-next-line no-use-before-define
+        instance.close();
       });
+    };
 
-      if (component.isChild()) {
-        window.xchild = {
-          props: component.xprops,
-          close: noop,
-        };
-      }
+    const instance = this.threeDSIframe({
+      onSuccess: (data) => {
+        // const {threeDSRefID, authentication_status, liability_shift } = data;
+        // let enrichedNonce;
+        // if(threeDSRefID) {
+        //   enrichedNonce = await updateNonceWith3dsData(threeDSRefID, this.fastlaneNonce)
+        // }
 
-      return component;
+        return promise.resolve(data);
+      },
+      onClose: cancelThreeDS,
+      onError: (err) => {
+        return promise.reject(
+          new Error(
+            `Error with obtaining 3DS contingency, ${JSON.stringify(err)}`
+          )
+        );
+      },
     });
+    const TARGET_ELEMENT = {
+      BODY: "body",
+    };
+    return instance
+      .renderTo(window.parent, TARGET_ELEMENT.BODY)
+      .then(() => promise)
+      .finally(instance.close);
   }
 }

Diff for: dist/test/button.js

@@ -71,9 +71,7 @@ describe("three domain secure component - isEligible method", () => {
   test.todo("create payload with correctly parameters", async () => {
     const threeDomainSecureClient = createThreeDomainSecureComponent();
     const mockedRequest = mockEligibilityRequest();
-    const eligibility = await threeDomainSecureClient.isEligible(
-      defaultMerchantPayload
-    );
+    await threeDomainSecureClient.isEligible(defaultMerchantPayload);
 
     expect(mockedRequest).toHaveBeenCalledWith();
   });

Diff for: src/three-domain-secure/component.jsx

@@ -0,0 +1,77 @@
+/* @flow */
+/* eslint-disable no-restricted-globals, promise/no-native */
+export type MerchantPayloadData = {|
+  amount: string,
+  currency: string,
+  nonce: string,
+  threeDSRequested?: boolean,
+  transactionContext?: Object,
+|};
+
+// eslint-disable-next-line no-undef
+export type Request = <TRequestData, TResponse>({|
+  method?: string,
+  url: string,
+  // eslint-disable-next-line no-undef
+  data: TRequestData,
+  accessToken: ?string,
+  // eslint-disable-next-line no-undef
+|}) => Promise<TResponse>;
+
+export type requestData = {|
+  intent: "THREE_DS_VERIFICATION",
+  payment_source: {|
+    card: {|
+      single_use_token: string,
+      verification_method: string,
+    |},
+  |},
+  amount: {|
+    currency_code: string,
+    value: string,
+  |},
+  transaction_context?: {|
+    soft_descriptor?: string,
+  |},
+|};
+
+export type responseBody = {|
+  payment_id: string,
+  status: string,
+  intent: string,
+  payment_source: {|
+    card: {|
+      last_digits: string,
+      type: string,
+      name: string,
+      expiry: string,
+    |},
+  |},
+  amount: {|
+    currency_code: string,
+    value: string,
+  |},
+  transaction_context: {|
+    soft_descriptor: string,
+  |},
+  links: $ReadOnlyArray<{|
+    href: string,
+    rel: string,
+    method: string,
+  |}>,
+|};
+
+export type SdkConfig = {|
+  authenticationToken: ?string,
+  paypalApiDomain: string,
+|};
+
+export type threeDSResponse = {|
+  liabilityShift: string,
+  authenticationStatus: string,
+  nonce?: string,
+|};
+
+export type TDSResult = {||};
+
+/* eslint-enable no-restricted-globals, promise/no-native */