@bikdotai/bik-widgets 1.0.0

package/.eslintrc

@@ -0,0 +1,22 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended"
+    ],
+    "overrides": [
+    ],
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react"
+    ],
+    "rules": {
+        "react/prop-types": "off"
+    }
+}

package/.eslintrc.js

@@ -0,0 +1,19 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:@typescript-eslint/recommended',
+  ],
+  overrides: [],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  plugins: ['react', '@typescript-eslint'],
+  rules: {},
+};

package/.github/workflows/main.yml

@@ -0,0 +1,293 @@
+name: CI/CD
+on:
+  pull_request:
+    types: [labeled]
+env:
+  NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+  GCP_SERVICE_ACCOUNT_JSON: ${{ secrets.GCP_SERVICE_ACCOUNT_JSON }}
+
+jobs:
+  test-widgets:
+    runs-on: ubuntu-latest
+    if: ${{ github.event.label.name == 'test:stage' }}
+    steps:
+      - name: Set Run ID Variable
+        run: echo "GITHUB_RUN_ID=${{ github.run_id }}" >> $GITHUB_ENV
+      - name: Display Run ID
+        run: echo $GITHUB_RUN_ID
+      - name: Checkout code
+        uses: actions/checkout@v3
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+      - name: Install dependencies
+        run: npm install --force
+      - name: Test widgets
+        run: npm run cypress-staging
+
+  build-widgets:
+    runs-on: ubuntu-latest
+    if: ${{ github.event.label.name == 'build:stage' }}
+    steps:
+      - name: Set Run ID Variable
+        run: echo "GITHUB_RUN_ID=${{ github.run_id }}" >> $GITHUB_ENV
+      - name: Display Run ID
+        run: echo $GITHUB_RUN_ID
+      - name: Checkout code
+        uses: actions/checkout@v3
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+      - name: Install dependencies
+        run: npm install --force
+      - name: Build widgets
+        run: npm run build-widgets
+      - name: Upload artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: dist
+          path: dist/
+
+  build-mfe:
+    runs-on: ubuntu-latest
+    if: ${{ github.event.label.name == 'build:stage' }}
+    steps:
+      - name: Set Run ID Variable
+        run: echo "GITHUB_RUN_ID=${{ github.run_id }}" >> $GITHUB_ENV
+      - name: Display Run ID
+        run: echo $GITHUB_RUN_ID
+      - name: Checkout code
+        uses: actions/checkout@v3
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+      - name: Install dependencies
+        run: npm install --force
+      - name: Build mfe
+        run: npm run build-mfe
+      - name: Upload artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: dist-mfe
+          path: dist-mfe/
+
+  build-widgets-prod:
+    runs-on: ubuntu-latest
+    if: ${{ github.event.label.name == 'build:prod'}}
+    steps:
+      - name: Set Run ID Variable
+        run: echo "GITHUB_RUN_ID=${{ github.run_id }}" >> $GITHUB_ENV
+      - name: Display Run ID
+        run: echo $GITHUB_RUN_ID
+      - name: Checkout code
+        uses: actions/checkout@v3
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+      - name: Install dependencies
+        run: npm install --force
+      - name: Build widgets prod
+        run: npm run build-widgets-prod
+      - name: Upload artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: dist
+          path: dist/
+
+  build-mfe-prod:
+    runs-on: ubuntu-latest
+    if: ${{ github.event.label.name == 'build:prod'}}
+    steps:
+      - name: Set Run ID Variable
+        run: echo "GITHUB_RUN_ID=${{ github.run_id }}" >> $GITHUB_ENV
+      - name: Display Run ID
+        run: echo $GITHUB_RUN_ID
+      - name: Checkout code
+        uses: actions/checkout@v3
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+      - name: Install dependencies
+        run: npm install --force
+      - name: Build mfe prod
+        run: npm run build-mfe-prod
+      - name: Upload artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: dist-mfe
+          path: dist-mfe/
+
+  upload-widgets:
+    needs: build-widgets
+    runs-on: ubuntu-latest
+    if: ${{ github.event.label.name == 'build:stage' }}
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+      - name: Authenticate with Google Cloud
+        uses: google-github-actions/auth@v2
+        with:
+          project_id: staging-bikayi
+          credentials_json: ${{ secrets.GCP_SERVICE_ACCOUNT_JSON }}
+      - name: Set up Google Cloud SDK
+        uses: google-github-actions/setup-gcloud@v2
+      - name: Download artifacts
+        uses: actions/download-artifact@v4
+        with:
+          name: dist
+          path: dist/
+      - name: Clear existing old chunks folder
+        run: |
+          gsutil -m rm -r gs://bik-widget-mfe/bap/old-chunks/*
+      - name: Copy current chucks folder to old chunks folder
+        run: |
+          gsutil -m cp gs://bik-widget-mfe/bap/chunks/* gs://bik-widget-mfe/bap/old-chunks
+      - name: Clear existing chunks folder
+        run: |
+          gsutil -m rm -r gs://bik-widget-mfe/bap/chunks/*
+      - name: Upload artifacts to Google Cloud Storage
+        run: |
+          gsutil -m cp dist/chunks/* gs://bik-widget-mfe/bap/chunks
+          gsutil -m cp dist/chunks/*.map gs://bik-widget-mfe/bap/source-map
+          gsutil cp dist/vendor.js gs://bik-widget-mfe/bap/widget-vendor/vendor.js
+          gsutil cp dist/vendor.js.map gs://bik-widget-mfe/bap/source-map/vendor.js.map
+          gsutil cp dist/stw.js gs://bik-widget-mfe/bap/widget-stw/stw.js
+          gsutil cp dist/captivateBanner.js gs://bik-widget-mfe/bap/widget-captivate-banner/captivateBanner.js
+          gsutil cp dist/shopifyForm.js gs://bik-widget-mfe/bap/widget-shopify-form/shopifyForm.js
+          gsutil cp dist/stw.js.map gs://bik-widget-mfe/bap/source-map/stw.js.map
+          gsutil cp dist/bottomDrawer.js gs://bik-widget-mfe/bap/widget-bottom-drawer/bottomDrawer.js
+          gsutil cp dist/bottomDrawer.js.map gs://bik-widget-mfe/bap/source-map/bottomDrawer.js.map
+          gsutil cp dist/scratchCard.js gs://bik-widget-mfe/bap/widget-scratch-card/scratchCard.js
+          gsutil cp dist/directReward.js gs://bik-widget-mfe/bap/widget-direct-reward/directReward.js
+          gsutil cp dist/directReward.js.map gs://bik-widget-mfe/bap/source-map/directReward.js.map
+          gsutil cp dist/singleButtonRedirection.js gs://bik-widget-mfe/bap/widget-single-button-redirection/singleButtonRedirection.js
+          gsutil cp dist/singleButtonRedirection.js.map gs://bik-widget-mfe/bap/source-map/singleButtonRedirection.js.map
+          gsutil cp dist/centrallyAligned.js gs://bik-widget-mfe/bap/widget-centrally-aligned/centrallyAligned.js
+          gsutil cp dist/centrallyAligned.js.map gs://bik-widget-mfe/bap/source-map/centrallyAligned.js.map
+      - name: Clean up
+        run: |
+          echo "Uploaded artifacts to buckets successfully"
+          rm -rf dist/
+          rm -rf /tmp/$GITHUB_RUN_ID.json
+
+  upload-mfe:
+    needs: build-mfe
+    runs-on: ubuntu-latest
+    if: ${{ github.event.label.name == 'build:stage' }}
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+      - name: Authenticate with Google Cloud
+        uses: google-github-actions/auth@v2
+        with:
+          project_id: staging-bikayi
+          credentials_json: ${{ secrets.GCP_SERVICE_ACCOUNT_JSON }}
+      - name: Set up Google Cloud SDK
+        uses: google-github-actions/setup-gcloud@v2
+      - name: Download artifacts
+        uses: actions/download-artifact@v4
+        with:
+          name: dist-mfe
+          path: dist-mfe/
+      - name: Clear existing old mfe chunks folder
+        run: |
+          gsutil -m rm -r gs://bik-widget-mfe/bap/mfe/old-chunks/*
+      - name: Copy current mfe chucks folder to old mfe chunks folder
+        run: |
+          gsutil -m cp gs://bik-widget-mfe/bap/mfe/chunks/* gs://bik-widget-mfe/bap/mfe/old-chunks
+      - name: Clear existing mfe chunks
+        run: |
+          gsutil -m rm -r gs://bik-widget-mfe/bap/mfe/chunks/*
+      - name: Upload artifacts to Google Cloud Storage
+        run: |
+          gsutil -m cp -r dist-mfe/* gs://bik-widget-mfe/bap/mfe
+      - name: Clean up
+        run: |
+          echo "Uploaded artifacts to buckets successfully"
+          rm -rf dist/
+          rm -rf /tmp/$GITHUB_RUN_ID.json
+
+  upload-widgets-prod:
+    needs: build-widgets-prod
+    runs-on: ubuntu-latest
+    if: ${{ github.event.label.name == 'build:prod'}}
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+      - name: Authenticate with Google Cloud
+        uses: google-github-actions/auth@v2
+        with:
+          project_id: bikai-d5ee5
+          credentials_json: ${{ secrets.GCP_SERVICE_ACCOUNT_JSON }}
+      - name: Set up Google Cloud SDK
+        uses: google-github-actions/setup-gcloud@v2
+      - name: Download artifacts
+        uses: actions/download-artifact@v4
+        with:
+          name: dist
+          path: dist/
+      - name: Clear existing old chunks folder (PROD)
+        run: gsutil -m rm -r gs://bik-assets/bap/old-chunks/*
+      - name: Copy current chucks folder to old chunks folder (PROD)
+        run: |
+          gsutil -m cp gs://bik-assets/bap/chunks/* gs://bik-assets/bap/old-chunks
+      - name: Clear existing chunks folder (PROD)
+        run: |
+          gsutil -m rm -r gs://bik-assets/bap/chunks/*
+      - name: Upload artifacts to Google Cloud Storage (PROD)
+        run: |
+          gsutil -m cp -r dist/* gs://bik-assets/bap/mfe
+          gsutil -m cp dist/chunks/* gs://bik-assets/bap/chunks
+          gsutil -m cp dist/chunks/*.map gs://bik-assets/bap/source-map
+          gsutil cp dist/vendor.js gs://bik-assets/bap/widget-vendor/vendor.js
+          gsutil cp dist/vendor.js.map gs://bik-assets/bap/source-map/vendor.js.map
+          gsutil cp dist/stw.js gs://bik-assets/bap/widget-stw/stw.js
+          gsutil cp dist/captivateBanner.js gs://bik-assets/bap/widget-captivate-banner/captivateBanner.js
+          gsutil cp dist/shopifyForm.js gs://bik-assets/bap/widget-shopify-form/shopifyForm.js
+          gsutil cp dist/stw.js.map gs://bik-assets/bap/source-map/stw.js.map
+          gsutil cp dist/bottomDrawer.js gs://bik-assets/bap/widget-bottom-drawer/bottomDrawer.js
+          gsutil cp dist/bottomDrawer.js.map gs://bik-assets/bap/source-map/bottomDrawer.js.map
+          gsutil cp dist/scratchCard.js gs://bik-assets/bap/widget-scratch-card/scratchCard.js
+          gsutil cp dist/directReward.js gs://bik-assets/bap/widget-direct-reward/directReward.js
+          gsutil cp dist/directReward.js.map gs://bik-assets/bap/source-map/directReward.js.map
+          gsutil cp dist/singleButtonRedirection.js gs://bik-assets/bap/widget-single-button-redirection/singleButtonRedirection.js
+          gsutil cp dist/singleButtonRedirection.js.map gs://bik-assets/bap/source-map/singleButtonRedirection.js.map
+          gsutil cp dist/centrallyAligned.js gs://bik-assets/bap/widget-centrally-aligned/centrallyAligned.js
+          gsutil cp dist/centrallyAligned.js.map gs://bik-assets/bap/source-map/centrallyAligned.js.map
+
+  upload-mfe-prod:
+    needs: build-mfe-prod
+    runs-on: ubuntu-latest
+    if: ${{ github.event.label.name == 'build:prod'}}
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+      - name: Authenticate with Google Cloud
+        uses: google-github-actions/auth@v2
+        with:
+          project_id: bikai-d5ee5
+          credentials_json: ${{ secrets.GCP_SERVICE_ACCOUNT_JSON }}
+      - name: Set up Google Cloud SDK
+        uses: google-github-actions/setup-gcloud@v2
+      - name: Download artifacts
+        uses: actions/download-artifact@v4
+        with:
+          name: dist-mfe
+          path: dist-mfe/
+      - name: Clear existing old mfe chunks folder (PROD)
+        run: |
+          gsutil -m rm -r gs://bik-assets/bap/mfe/old-chunks/*
+      - name: Copy current mfe chucks folder to old mfe chunks folder (PROD)
+        run: |
+          gsutil -m cp gs://bik-assets/bap/mfe/chunks/* gs://bik-assets/bap/mfe/old-chunks
+      - name: Clear existing mfe chunks (PROD)
+        run: |
+          gsutil -m rm -r gs://bik-assets/bap/mfe/chunks/*
+      - name: Upload artifacts to Google Cloud Storage (PROD)
+        run: |
+          gsutil -m cp -r dist-mfe/* gs://bik-assets/bap/mfe

package/.prettierignore

@@ -0,0 +1,13 @@
+node_modules
+dist
+dist-mfe
+build
+*.min.js
+*.min.css
+package-lock.json
+yarn.lock
+.git
+coverage
+cypress/results
+cypress/results-html
+*.log

package/.prettierrc

@@ -0,0 +1,10 @@
+{
+  "semi": true,
+  "trailingComma": "all",
+  "singleQuote": true,
+  "tabWidth": 2,
+  "printWidth": 80,
+  "useTabs": false,
+  "bracketSpacing": true,
+  "arrowParens": "avoid"
+}

package/README.md

@@ -0,0 +1,128 @@
+### Deploying mfe assets to bucket automatically
+
+Follow below steps
+
+- run `npm run build-mfe` locally
+- stage all changes and push/merge with `bap/qa`
+- Pipeline will auto run once it detects changes in `dist/moduleEntry.js`
+
+## Log Server
+
+A WebSocket server for collecting and displaying logs from your application in real-time, useful for debugging and monitoring during development on mobile devices.
+
+### Usage
+
+#### Start the Server
+
+```bash
+npm run log-server
+```
+
+The server will start and listen for incoming WebSocket connections. By default, it listens on port 4040, but you can specify a custom port:
+
+```bash
+npm run log-server 4001
+```
+
+#### Log Format
+
+The server expects log messages in JSON format with the following structure:
+
+```json
+{
+  "level": "info",
+  "message": "Your log message",
+  "timestamp": "2025-07-08T10:30:00.000Z",
+  "data": "optional additional data",
+  "source": "client"
+}
+```
+
+#### Viewing Logs
+
+Once connected, the server will display formatted logs in the terminal with:
+
+- Color-coded log levels (error: red, warn: yellow, info: blue, debug: cyan)
+- Timestamps with milliseconds
+- Source information
+- Additional data if provided
+
+---
+
+## useWebSocketLogger Hook
+
+A custom React hook for sending logs from the frontend to the WebSocket log server in real-time.
+
+### Features
+
+- Establishes a WebSocket connection to the log server
+- Queues log messages when connection is not available
+- Automatic reconnection with exponential backoff
+- Supports multiple log levels (info, warn, error, debug)
+- Conditional logging based on server availability
+
+### Usage
+
+#### Import the Hook
+
+```js
+import { useWebSocketLogger } from '../hooks/useWebSocketLogger';
+```
+
+#### Use in a Component
+
+```js
+const logger = useWebSocketLogger(true); // Pass true when log server is started
+
+// Log messages with different levels
+logger.log('User clicked button');
+logger.warn('Performance warning', { loadTime: 2000 });
+logger.error('API request failed', { error: 'Network timeout' });
+logger.debug('Debug information', { userId: 123 });
+```
+
+### API
+
+- `useWebSocketLogger(isWebSocketServerStarted: boolean)`
+  - `isWebSocketServerStarted`: Boolean flag to enable/disable WebSocket connection
+  - Returns an object with logging methods
+
+#### Methods
+
+- `log(message: string, data?: unknown)`: Log info level message
+- `warn(message: string, data?: unknown)`: Log warning level message
+- `error(message: string, data?: unknown)`: Log error level message
+- `debug(message: string, data?: unknown)`: Log debug level message
+
+#### Example
+
+```js
+import { useWebSocketLogger } from '../hooks/useWebSocketLogger';
+
+const MyComponent = () => {
+  const logger = useWebSocketLogger(process.env.NODE_ENV === 'development');
+
+  useEffect(() => {
+    logger.log('Component mounted');
+
+    // Log with additional data
+    logger.debug('User data loaded', {
+      userId: user.id,
+      timestamp: Date.now(),
+    });
+
+    return () => {
+      logger.log('Component unmounted');
+    };
+  }, []);
+
+  const handleError = error => {
+    logger.error('Button click failed', {
+      error: error.message,
+      stack: error.stack,
+    });
+  };
+
+  return <button onClick={handleClick}>Click me</button>;
+};
+```

package/cypress/apiHelper/endpoints.ts

@@ -0,0 +1,21 @@
+export function GetWidgetSrc(widgetId: string, templateId: string) {
+  return `${getBaseUrl()}/publicApiFunctions-getWidgetSourceV3/${templateId}/${Cypress.env('storeId')}/${widgetId}`;
+}
+
+export function GetVendorSrc() {
+  return `${getBaseUrl()}/publicApiFunctions-getCommonScripts/vendor`;
+}
+
+export function GetEventRequest() {
+  return `${getBaseUrl('dm')}/publicApiFunctions-sendWidgetEvent`;
+}
+
+export function GetCouponRequest() {
+  return `${getBaseUrl('dm')}/publicApiFunctions-fetchCouponCode`;
+}
+
+export function getBaseUrl(balancer?: string) {
+  return Cypress.env('isProd')
+    ? `https://bikapi.bikayi.app/bap/${balancer ?? 'static-scr'}`
+    : `https://api.staging.bik.ai/${balancer ?? 'dm'}`;
+}

package/cypress/apiHelper/executor.ts

@@ -0,0 +1,42 @@
+import { getBaseUrl } from './endpoints';
+
+class ApiRequest {
+  baseURL;
+  defaultHeaders;
+  constructor() {
+    this.baseURL = getBaseUrl();
+    this.defaultHeaders = {
+      authorization: Cypress.env('accessToken'),
+      'bik-referer': 'bik',
+      'Content-Type': 'application/json',
+    };
+  }
+
+  get(url, queryParams = {}, headers = {}) {
+    return this.request('GET', url, queryParams, headers);
+  }
+
+  post(url, body = {}, headers = {}) {
+    return this.request('POST', url, {}, headers, body);
+  }
+
+  request(method, url, queryParams = {}, headers = {}, body = {}) {
+    const requestOptions = {
+      method,
+      url: `${this.baseURL}${url}`,
+      headers: {
+        ...this.defaultHeaders,
+        ...headers,
+      },
+      qs: queryParams,
+      body: {
+        ...body,
+        storeId: Cypress.env('storeId'),
+      },
+    };
+
+    return cy.request(requestOptions);
+  }
+}
+
+export default ApiRequest;

package/cypress/e2e/bottomDrawer.cy.ts

@@ -0,0 +1,49 @@
+import {
+  GetEventRequest,
+  GetVendorSrc,
+  GetWidgetSrc,
+} from '../apiHelper/endpoints';
+import ApiRequest from '../apiHelper/executor';
+import { BOTTOM_DRAWER_PAYLOAD } from '../fixtures/payloads';
+
+describe('Bottom drawer e2e', () => {
+  it('should make an API call, open a URL, and perform frontend testing', () => {
+    new ApiRequest()
+      .post('/utilApiFunctions-deleteAllWidgets', {
+        password: 'sn@1234@A',
+      })
+      .then(() => {
+        new ApiRequest()
+          .post('/widgetInfraApiFunctions-publishWidget', BOTTOM_DRAWER_PAYLOAD)
+          .then(response => {
+            expect(response.status).to.eq(200);
+            expect(response.body).to.have.property('widgetId');
+            let apiCalled = false;
+            const widgetId = response.body.widgetId;
+            const templateId = 'P29OopljI3TkkYdfxJE0';
+            cy.intercept('POST', GetEventRequest(), req => {
+              apiCalled = true;
+              req.continue();
+            }).as('apiCall');
+            cy.visit(Cypress.env('storeUrl'));
+            cy.get(`script[src^="${GetVendorSrc()}"]`, {
+              timeout: 10000,
+            }).should('exist');
+            cy.get(
+              `script[src^="${GetWidgetSrc(widgetId, templateId)}"]`,
+            ).should('exist');
+            cy.get(`div[id="bik-widget-wrapper-${widgetId}"]`).should('exist');
+            cy.wrap(null).should(() => {
+              expect(apiCalled).to.be.true;
+            });
+            cy.get(`div[id="bik-widget-root-${widgetId}"]`).should('exist');
+            cy.get(`button[id="bik-bd-${widgetId}-cta-fab"]`).should('exist');
+            cy.get(`button[id="bik-bd-${widgetId}-cta-fab"]`).click();
+            cy.get(`button[id="bik-bd-${widgetId}-cta-whatsapp"]`).should(
+              'exist',
+            );
+            cy.get(`button[id="bik-bd-${widgetId}-cta-whatsapp"]`).click();
+          });
+      });
+  });
+});

package/cypress/e2e/directReward.cy.ts

@@ -0,0 +1,67 @@
+import {
+  GetEventRequest,
+  GetVendorSrc,
+  GetWidgetSrc,
+  GetCouponRequest,
+} from '../apiHelper/endpoints';
+import ApiRequest from '../apiHelper/executor';
+import { DIRECT_REWARD_PAYLOAD } from '../fixtures/payloads';
+
+describe('Direct Reward e2e', () => {
+  it('should make an API call, open a URL, and perform frontend testing', () => {
+    new ApiRequest()
+      .post('/utilApiFunctions-deleteAllWidgets', {
+        password: 'sn@1234@A',
+      })
+      .then(() => {
+        new ApiRequest()
+          .post('/widgetInfraApiFunctions-publishWidget', DIRECT_REWARD_PAYLOAD)
+          .then(response => {
+            expect(response.status).to.eq(200);
+            expect(response.body).to.have.property('widgetId');
+            let apiCalled = false;
+            let fetchedCoupon = false;
+            const widgetId = response.body.widgetId;
+            const templateId = '7fM9X24TY9Bk9f7fIG9C';
+            cy.intercept('POST', GetEventRequest(), req => {
+              apiCalled = true;
+              req.continue();
+            }).as('apiCall');
+            cy.intercept('POST', GetCouponRequest(), req => {
+              fetchedCoupon = true;
+              req.continue();
+            }).as('fetchCouponCall');
+            cy.visit(Cypress.env('storeUrl'));
+            cy.get(`script[src^="${GetVendorSrc()}"]`, {
+              timeout: 10000,
+            }).should('exist');
+            cy.get(
+              `script[src^="${GetWidgetSrc(widgetId, templateId)}"]`,
+            ).should('exist');
+            cy.get(`div[id="bik-widget-wrapper-${widgetId}"]`, {
+              timeout: 10000,
+            }).should('exist');
+            cy.wrap(null).should(() => {
+              expect(apiCalled).to.be.true;
+            });
+            cy.get(
+              `div[id="bik-dr-${widgetId}-user-details-container"]`,
+            ).should('exist');
+            cy.get(`input[id="bik-${widgetId}-input-whatsapp"]`).should(
+              'exist',
+            );
+            cy.get(`input[id="bik-${widgetId}-input-whatsapp"]`).type(
+              '7358264637',
+            );
+            cy.get(`div[id="bik-dr-${widgetId}-user-details-container"]`)
+              .find('button')
+              .click();
+            cy.wait(2000);
+            cy.wrap(null).should(() => {
+              expect(fetchedCoupon).to.be.true;
+            });
+            cy.get(`div[id="bik-${widgetId}-coupon-screen"]`).should('exist');
+          });
+      });
+  });
+});