@slanglabs/slang-conva-react-native-payments-assistant/index.js

The client library for adding and interacting with Slang CONVA's Payments In-App Voice Assistant.

import { Platform } from "react-native";
import { SlangPaymentsAssistantBridge } from "./rn-bridge";

const checkOS = () => {
  if (Platform.OS === "ios") {
    console.error("Slang doesn't support IOS yet!");
    return false;
  }
  return true;
};

const checkFunc = (cb, func) => {
  if (!checkOS()) return false;

  if (typeof cb === "function") {
    return true;
  }

  return false;
};

const ui = {
  showTrigger: () => {
    SlangPaymentsAssistantBridge.showTrigger();
  },
  hideTrigger: () => {
    SlangPaymentsAssistantBridge.hideTrigger();
  },
  expandTrigger: () => {
    SlangPaymentsAssistantBridge.expandTrigger();
  },
  collapseTrigger: () => {
    SlangPaymentsAssistantBridge.collapseTrigger();
  },
  setTheme: (theme) => {
    SlangPaymentsAssistantBridge.setTheme(theme);
  },
  setBackgroundColorGradient: (colors) => {
    SlangPaymentsAssistantBridge.setBackgroundColorGradient(colors);
  },
  setWaveColorGradient: (colors) => {
    SlangPaymentsAssistantBridge.setWaveColorGradient(colors);
  },
  setTextColor: (color) => {
    SlangPaymentsAssistantBridge.setTextColor(color);
  },
  setSecondaryTextColor: (color) => {
    SlangPaymentsAssistantBridge.setSecondaryTextColor(color);
  },
  setTextHighlightColor: (color) => {
    SlangPaymentsAssistantBridge.setTextHighlightColor(color);
  },
  setSettingsButtonBackgroundColor: (color) => {
    SlangPaymentsAssistantBridge.setSettingsButtonBackgroundColor(color);
  },
  setControlButtonBackgroundColor: (color) => {
    SlangPaymentsAssistantBridge.setControlButtonBackgroundColor(color);
  },
  setTriggerSize: (width, height) => {
    SlangPaymentsAssistantBridge.setTriggerSize(width, height);
  },
  // eg: image = require('image.jpg')
  setTriggerImageResource: (image) => {
    SlangPaymentsAssistantBridge.setTriggerImageResource(image);
  },
  setTriggerText: (triggerText) => {
    SlangPaymentsAssistantBridge.setTriggerText(triggerText);
  }
}

let transactionActionHandler = (transactionInfo, transactionUserJourney) => {
  return TransactionUserJourney.AppState.UNSUPPORTED;
};

let billPaymentsActionHandler = (billInfo, billPaymentUserJourney) => {
  return BillPaymentsUserJourney.UNSUPPORTED;
};

let navigationActionHandler = (navigationInfo, navigationUserJourney) => {
  return NavigationAppState.UNSUPPORTED;
};

const initialize = async (config) => {
  const check = checkOS();
  if (!check) return;

  let {
    assistantId,
    apiKey,
    locale = "en-IN",
    requestedLocales = ["en-IN"],
    triggerPosition,
    triggerStyle,
    enableCustomTrigger,
    onBoardingInfoTitle,
    onBoardingInfoDescription,
    brandColor,
    environment
  } = config;

  SlangPaymentsAssistantBridge.initialize({
    assistantId,
    apiKey,
    locale,
    requestedLocales,
    triggerPosition,
    triggerStyle,
    enableCustomTrigger,
    onBoardingInfoTitle,
    onBoardingInfoDescription,
    brandColor,
    environment
  });

};

const setAction = (action) => {
  if (checkFunc(action.onTransaction, "onTransaction")) {
    transactionActionHandler = action.onTransaction;
  }
  if (checkFunc(action.onBillPayment, "onBillPayment")) {
    billPaymentsActionHandler = action.onBillPayment;
  }
  if (checkFunc(action.onNavigation, "onNavigation")) {
    navigationActionHandler = action.onNavigation;
  }
  SlangPaymentsAssistantBridge.setAction(transactionActionHandler, billPaymentsActionHandler, navigationActionHandler);
}

const setLifecycleObserver = (lifecycleObserver) => {
  SlangPaymentsAssistantBridge.setLifecycleObserver(lifecycleObserver)
}

const setUserProperties = (userProperties) => {
  const check = checkOS();
  if (!check) return;

  SlangPaymentsAssistantBridge.setUserProperties(userProperties);
}

const notifyNonVoiceUserJourney = (userJourney, payInfo) => {
  const check = checkOS();
  if (!check) return;

  SlangPaymentsAssistantBridge.notifyNonVoiceUserJourney(userJourney, payInfo);
}

const setAppDefaultUserJourney = (userJourney) => {
  const check = checkOS();
  if (!check) return;

  SlangPaymentsAssistantBridge.setAppDefaultUserJourney(userJourney);
}

const setAppDefaultSubDomain = (appSubDomain) => {
  const check = checkOS();
  if (!check) return;

  SlangPaymentsAssistantBridge.setAppDefaultSubDomain(appSubDomain);
}

const getActiveTransactionUserJourney = () => {
  const check = checkOS();
  if (!check) return;

  return SlangPaymentsAssistantBridge.getActiveTransactionUserJourney();
}

const getActiveBillPaymentUserJourney = () => {
  const check = checkOS();
  if (!check) return;

  return SlangPaymentsAssistantBridge.getActiveBillPaymentUserJourney();
}

const getActiveNavigationUserJourney = () => {
  const check = checkOS();
  if (!check) return;

  return SlangPaymentsAssistantBridge.getActiveNavigationUserJourney();
}

const startConversation = (userJourney) => {
  const check = checkOS();
  if (!check) return;

  SlangPaymentsAssistantBridge.startConversation(userJourney);
}

const notifyNonVoiceTransaction = (name, amount, action) => {
  const check = checkOS();
  if (!check) return;

  SlangPaymentsAssistantBridge.notifyNonVoiceTransaction(name, amount, action);
}

export const TransactionUserJourney = {
  AppState: {
    UNSUPPORTED: "unsupported",
    WAITING: "waiting",
    TRANSACTION: "transaction"
  }
}

export const AssistantUI = {
  Theme: {
    DARK: "DARK",
    LIGHT: "LIGHT"
  }
}

export const Environment = {
  PRODUCTION: "PRODUCTION",
  STAGING: "STAGING"
}

export const BillPaymentsUserJourney = {
  AppState: {
    WAITING: "waiting",
    UNSUPPORTED: "unsupported",
    PAYMENT: "payment"
  }
}

export const NavigationUserJourney = {
  AppState: {
    WAITING: "waiting",
    UNSUPPORTED: "unsupported",
    NAVIGATION: "navigation"
  }
}

export const PaymentsUserJourney = {
  TRANSACTION: "payments_transactions",
  BILL_PAYMENTS: "payments_bill_payments",
  NAVIGATION: "payments_navigation"
}

export const AssistantSubDomain = {
  PAYMENT: "payments"
}

export const AssistantUIPosition = {
  BaseUIPosition: {
    BOTTOM_LEFT: "BOTTOM_LEFT",
    CENTER_LEFT: "CENTER_LEFT",
    CENTER: "CENTER",
    CENTER_RIGHT: "CENTER_RIGHT",
    TOP_LEFT: "TOP_LEFT",
    TOP_RIGHT: "TOP_RIGHT",
    BOTTOM_RIGHT: "BOTTOM_RIGHT",
    BOTTOM_CENTER: "BOTTOM_CENTER",
    TOP_CENTER: "TOP_CENTER",
  }
}

export const TransactionAction = {
  UNKNOWN: "",
  REQUEST: "request",
  SCAN: "scan",
  SEND: "send"
}

export const TriggerStyle = {
  DEFAULT: "DEFAULT",
  FLAT: "FLAT"
}

export default {
  initialize,
  setAction,
  setLifecycleObserver,
  setUserProperties,
  notifyNonVoiceUserJourney,
  notifyNonVoiceTransaction,
  setAppDefaultUserJourney,
  setAppDefaultSubDomain,
  startConversation,
  getActiveBillPaymentUserJourney,
  getActiveTransactionUserJourney,
  getActiveNavigationUserJourney,
  ui
};