custom service

swch · Oct 17, 2023 · d5afbff · d5afbff
1 parent 94cb322
commit d5afbff
Show file tree

Hide file tree

Showing 9 changed files with 261 additions and 78 deletions.
diff --git a/examples/custom-service/index.html b/examples/custom-service/index.html
@@ -0,0 +1,190 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Strivve Component</title>
+</head>
+
+<body>
+  <div style="max-width: 500px; margin: auto;">
+    <div id="account-link"></div>
+  </div>
+</body>
+
+<script src="https://swch.github.io/Strivve-UX-Components/main.js"></script>
+<script>
+
+const merchantSite = {
+  id: '123456789',
+  name: 'Merchant',
+  note: 'This is a mock merchant site',
+  host: 'www.mockmerchant.com',
+  tags: ['e-commerce', 'retail'],
+  interface_type: 'web',
+  job_type: 'full-time',
+  required_form_fields: ['name', 'email', 'address'],
+  images: [
+    {
+      url: 'https://d1t7g1oas7m24a.cloudfront.net/tiles/dynamic-synthetic-4?width=128&version=699b75be0871687b3ede6a430e5defeae80b76d6',
+      width: 128,
+      grayscale: false,
+    },
+    {
+      url: 'https://d1t7g1oas7m24a.cloudfront.net/tiles/dynamic-synthetic-4?width=128&version=699b75be0871687b3ede6a430e5defeae80b76d6',
+      width: 800,
+      grayscale: true,
+    },
+  ],
+  account_link: [
+    {
+      key_name: 'username',
+      label: 'Username',
+      secret: false,
+      type: 'initial_account_link',
+    },
+    {
+      key_name: 'password',
+      label: 'Password',
+      secret: true,
+      type: 'initial_account_link',
+    },
+  ],
+  messages: {
+    mfa_label: 'MFA Code',
+    additional_info_message: 'Please provide additional information',
+    auth_message: 'Authentication required',
+  },
+  script_directory: '/scripts',
+  record_final_site_artifacts: true,
+  puppeteer_screenshot: true,
+  login_page: '/login',
+  forgot_password_page: '/forgot-password',
+  credit_card_page: '/credit-card',
+  wallet_page: '/wallet',
+  merchant_sso_group: 'MockSSOGroup',
+  tier: 2,
+};
+
+class StrivveService {
+  constructor(options) {
+    this.safe_key = '';
+  }
+
+  async getMerchantSites(filters) {
+    const items = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+    return items.map((item, index) => ({
+      ...merchantSite,
+      id: `${merchantSite.id}-${index}`,
+      name: `${merchantSite.name} ${index}`,
+      tags: ['top_notify'],
+    }));
+  }
+
+  init() {
+    return Promise.resolve(true);
+  }
+
+  async getMerchantSite(id) {
+    const data = await this.getMerchantSites();
+    return data[0];
+  }
+
+  createJobs(data) {
+    return Promise.resolve({ body: [{ job_id: '1' }] });
+  }
+
+  createCardholder(body) {
+    return Promise.resolve({
+      body: {
+        id: 1,
+      },
+    });
+  }
+
+  createCardholderQuery(id) {
+    const query = {
+      callbacks: {},
+      addListener: (id, func, status) => {
+        query.callbacks[status] = func;
+      },
+    };
+
+    let count = 10;
+    const interval = setInterval(() => {
+      query.callbacks['job_status']?.({
+        type: 'job_status',
+        message: {
+          auth_percent_complete: count,
+          percent_complete: count,
+          status: 'AUTH',
+        },
+      });
+      count += 10;
+      if (count >= 100) {
+        query.callbacks['job_status']?.({
+          type: 'job_status',
+          message: {
+            auth_percent_complete: count,
+            percent_complete: count,
+            status: 'SUCCESSFUL',
+          },
+        });
+        clearInterval(interval);
+      }
+    }, 1000);
+    return query;
+  }
+
+  createCard(data) {
+    return Promise.resolve({ body: { id: 1 } });
+  }
+
+  cancelJob(id) {
+    return Promise.resolve({ body: { id: 1 } });
+  }
+
+  authorizeCardholder(data) {
+    return Promise.resolve({ body: { id: 1 } });
+  }
+
+  setSafeKey(key) {}
+
+  postCreds(body) {
+    return Promise.resolve({ body: { id: 1 } });
+  }
+}
+
+  Strivve.mountLinkingJourney({
+    Service: StrivveService,
+    element_id: 'account-link',
+    api_instance: 'customer-dev',
+    card: {
+      pan: '4111111111111111',
+      cvv: '321',
+      expiration_month: '2',
+      expiration_year: '24',
+      name_on_card: 'Mvick',
+      address: {
+        city: 'Seattle',
+        postal_code: '98177',
+        country: 'USA',
+        first_name: 'Jane',
+        last_name: 'Smith',
+        email: 'jane@test.com',
+        phone_number: '2065555555',
+        address1: 'test',
+        state: 'test',
+        subnational: 'WA',
+        is_primary: true,
+      },
+    },
+    account_link: {
+      messages: [{ label: 'Hello world' }, { label: 'Test' }],
+    },
+  });
+</script>
+
+</html>
diff --git a/public/index.html b/public/index.html
@@ -57,71 +57,8 @@
   <script>
     const id = 'full';
 
-    const appearance = {
-      layout: {
-        logoImageUrl:
-          'https://unsplash.com/photos/CoNsEK5iHug/download?ixid=M3wxMjA3fDB8MXxhbGx8fHx8fHx8fHwxNjg5MjE2MTEwfA&force=true&w=640',
-        appName: 'My Application',
-      },
-      variables: {
-        primaryColor: '#6C47FF',
-        secondaryColor: '#6C47FF',
-        iconColor: 'white',
-        borderColor: 'gray',
-        backgroundColor: '#000000',
-        textColor: 'white',
-        fontFamily: 'Jost',
-      },
-      elements: {
-        button: {
-          borderRadius: '0px',
-          border: 'none',
-        },
-        secondaryButton: {
-          borderRadius: '0px',
-          border: 'none',
-        },
-        outlinedButton: {
-          borderRadius: '0px',
-          border: 'none',
-        },
-        selectSiteCarouselItem: {
-          borderRadius: '0px',
-          color: 'white',
-          backgroundColor: '#000000',
-        },
-        selectSiteItem: {
-          borderRadius: '0px',
-          color: 'white',
-          backgroundColor: '#000000',
-        },
-        selectSiteItemDisabled: {
-          borderRadius: '0px',
-          color: 'white',
-          backgroundColor: '#000000',
-        },
-        selectSiteItemCard: {
-          color: 'black',
-        },
-        input: {
-          borderRadius: '0px',
-        },
-        iconButton: {
-          borderRadius: '0px',
-          backgroundColor: 'var(--primaryColor)',
-        },
-        modalStatus: {
-          borderRadius: '0px',
-        },
-        modalWarning: {
-          borderRadius: '0px',
-        },
-      },
-    };
-
     // mount journey
     const stv = Strivve.mountLinkingJourney({
-      // appearance,
       element_id: id,
       api_instance: 'customer-dev',
       card: {

diff --git a/public/main.js b/public/main.js
diff --git a/src/component/AccountLinkView.tsx b/src/component/AccountLinkView.tsx
@@ -38,8 +38,6 @@ export function AccountLinkView({
   const isSuccessJob = state?.message?.termination_type === 'BILLABLE';
   const isFailedJob = failedStatus.includes(state?.message?.termination_type);
 
-  console.log('===', state);
-
   useEffect(() => {
     const accountLink = core.createAccountLink(options);
     accountLink.subscribe((state: AccountLinkState) => {

diff --git a/src/component/LinkingJourney.stories.ts b/src/component/LinkingJourney.stories.ts
@@ -60,5 +60,8 @@ export const Component: Story = {
     appearance: defaultAppearance,
     localization: defaultLocalization,
     core: coreTest,
+    headerOptions: {
+      title: 'Product'
+    }
   },
 };
diff --git a/src/component/MySiteList.tsx b/src/component/MySiteList.tsx
@@ -48,6 +48,7 @@ function MySiteList({
   const successful = sites.filter((item) => item.job?.status === 'SUCCESSFUL');
   const pendings = sites.filter((item) => item.job?.status === 'UPDATING');
 
+
   const renderitem = (item: MerchantSite) => {
     const image = item.images?.find((image: any) => image.width === 128);
     const active = Boolean(selected?.find((m) => m.id === item.id));
@@ -175,10 +176,10 @@ function MySiteList({
         {successful.length > 0 && (
           <div>
             <p css={appearance.elements?.mySiteTitle}>
-              {localization.my_sites_error_title}
+              {localization.my_sites_success_title}
             </p>
             <p css={appearance.elements?.mySiteDescription}>
-              {localization.my_sites_error_text}
+              {localization.my_sites_success_text}
             </p>
             {successful?.map(renderitem)}
           </div>

diff --git a/src/component/testHelper.ts b/src/component/testHelper.ts
@@ -74,6 +74,7 @@ export class StrivveService implements StrivveServiceInterface {
       ...merchantSite,
       id: `${merchantSite.id}-${index}`,
       name: `${merchantSite.name} ${index}`,
+      tags: ['top_notify']
     }));
   }
 
@@ -87,33 +88,68 @@ export class StrivveService implements StrivveServiceInterface {
   }
 
   createJobs(data: JobBody[]): Promise<any> {
-    return Promise.resolve();
+    return Promise.resolve({ body: [{ job_id: '1' }] });
   }
 
   createCardholder(body: CardholderBody): Promise<any> {
-    return Promise.resolve();
+
+    return Promise.resolve({
+      body: {
+        id: 1,
+      }
+    });
   }
 
-  createCardholderQuery(id: string) {
-    return Promise.resolve();
+  createCardholderQuery(id: string):any {
+    const query: any = {
+      callbacks: {},
+      addListener:(id: string, func: any, status: string) => {
+        query.callbacks[status] = func;
+      }
+    };
+
+    let count = 10;
+    const interval = setInterval(() => {
+      query.callbacks['job_status']?.({
+        type: 'job_status',
+        message: {
+          auth_percent_complete: count,
+          percent_complete: count,
+          status: 'AUTH',
+        }
+      })
+      count += 10;
+      if (count >= 100) {
+        query.callbacks['job_status']?.({
+          type: 'job_status',
+          message: {
+            auth_percent_complete: count,
+            percent_complete: count,
+            status: 'SUCCESSFUL',
+          }
+        })
+        clearInterval(interval);
+      }
+    }, 1000);
+    return query;
   }
 
   createCard(data: CardBody): Promise<any> {
-    return Promise.resolve();
+    return Promise.resolve({ body: { id: 1 } });
   }
 
   cancelJob(id: number): Promise<any> {
-    return Promise.resolve();
+    return Promise.resolve({ body: { id: 1 } });
   }
 
   authorizeCardholder(data: any): Promise<any> {
-    return Promise.resolve();
+    return Promise.resolve({ body: { id:  1} });
   }
 
   setSafeKey(key: string): void {}
 
   postCreds(body: PostCredsBody): Promise<any> {
-    return Promise.resolve();
+    return Promise.resolve({ body: { id: 1 } });
   }
 }
 

diff --git a/src/core/accountLink.ts b/src/core/accountLink.ts
@@ -205,7 +205,6 @@ export default class AccountLinkCore {
 
   createQuery(job: any) {
     const query = this.service.createCardholderQuery(job.cardholder_id);
-
     const statusHandler = (data: any) => {
       const message = data.message || data.error_message;
       this.onMessage?.(data.job_id, message);