npm - react-native-unit-components - Versions diffs - 1.7.0 → 1.8.0 - Mend

react-native-unit-components 1.7.0 → 1.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (56) hide show

package/lib/module/webComponent/html.js CHANGED Viewed

@@ -4,7 +4,8 @@ export const HTML_PLACEHOLDER = {
   SCRIPT_UNIT: '<SCRIPT_UNIT>',
   BODY: '<BODY_HTML_CODE>',
   SCRIPT_FROM_NATIVE: '<SCRIPT_FROM_NATIVE>',
-  WINDOW_PARAMS: '<WINDOW_PARAMS>'
+  WINDOW_PARAMS: '<WINDOW_PARAMS>',
+  FONT_FACES: '<FONT_FACES>'
 };
 const htmlText = `
   <!DOCTYPE html>
@@ -21,9 +22,17 @@ const htmlText = `
     ${HTML_PLACEHOLDER.WINDOW_PARAMS}
     </script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
+    <style type="text/css">
+      ${HTML_PLACEHOLDER.FONT_FACES}
+      body {
+        margin: 0;
+      }
+    </style>
   </head>
-  <body style="margin: 0;">
+  <body>
     ${HTML_PLACEHOLDER.BODY}
     <script>

package/lib/module/webComponent/html.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["Platform","DISPATCH_RENDERING_EVENT","LISTENERS","POST_MESSAGE_TO_SDK","POST_PAGE_HEIGHT","DISPATCH_REQUEST_CARD_ACTION","DISPATCH_OPEN_ACTIONS_MENU","DISPATCH_REQUEST_ACCOUNT_ACTION","DISPATCH_ACTIVITY_FILTER_CHANGED_EVENT","HTML_PLACEHOLDER","SCRIPT_UNIT","BODY","SCRIPT_FROM_NATIVE","WINDOW_PARAMS","htmlText","OS","isPageLoaded","onLoad","unitRequestDownload","requestRendering","requestOpenLink","requestCloseFlow","cardActivated","cardStatusChange","unitRequestExternalSdk","unitAccountChanged","unitActivityFiltersChanged"],"sources":["html.ts"],"sourcesContent":["import { Platform } from 'react-native';\nimport { DISPATCH_RENDERING_EVENT, LISTENERS, POST_MESSAGE_TO_SDK, POST_PAGE_HEIGHT, DISPATCH_REQUEST_CARD_ACTION, DISPATCH_OPEN_ACTIONS_MENU, DISPATCH_REQUEST_ACCOUNT_ACTION, DISPATCH_ACTIVITY_FILTER_CHANGED_EVENT } from '../scripts/html/bodyScript';\n\nexport const HTML_PLACEHOLDER = {\n SCRIPT_UNIT: '<SCRIPT_UNIT>',\n BODY: '<BODY_HTML_CODE>',\n SCRIPT_FROM_NATIVE: '<SCRIPT_FROM_NATIVE>',\n WINDOW_PARAMS: '<WINDOW_PARAMS>'\n};\n\nconst htmlText = `\n <!DOCTYPE html>\n <html lang=\"en\">\n\n <head lang=\"en\">\n <title>Unit Web SDK Demo</title>\n <script>\n window.UnitMobileSDK = true\n window.UnitMobileSDKConfig = {\n os: \"${Platform.OS}\",\n walletName: \"${Platform.OS === 'ios' ? 'Apple' : 'Google'}\",\n }\n ${HTML_PLACEHOLDER.WINDOW_PARAMS}\n </script>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=0\">\n ~~</head~~>\n\n <body ~~style=\"~~margin: 0;\">\n ${HTML_PLACEHOLDER.BODY}\n\n <script>\n ${POST_MESSAGE_TO_SDK}\n\n ${POST_PAGE_HEIGHT}\n\n ${LISTENERS.isPageLoaded}\n\n ${LISTENERS.onLoad}\n\n ${LISTENERS.unitRequestDownload}\n\n ${LISTENERS.requestRendering}\n\n ${LISTENERS.requestOpenLink}\n\n ${LISTENERS.requestCloseFlow}\n\n ${LISTENERS.cardActivated}\n\n ${LISTENERS.cardStatusChange}\n\n ${LISTENERS.unitRequestExternalSdk}\n\n ${LISTENERS.unitAccountChanged}\n\n ${LISTENERS.unitActivityFiltersChanged}\n\n ${DISPATCH_RENDERING_EVENT}\n\n ${DISPATCH_OPEN_ACTIONS_MENU}\n\n ${DISPATCH_REQUEST_CARD_ACTION}\n\n ${DISPATCH_ACTIVITY_FILTER_CHANGED_EVENT}\n\n ${DISPATCH_REQUEST_ACCOUNT_ACTION}\n\n ${HTML_PLACEHOLDER.SCRIPT_FROM_NATIVE}\n </script>\n </body>\n </html>\n`;\n\nexport default htmlText;\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,cAAc;AACvC,SAASC,wBAAwB,EAAEC,SAAS,EAAEC,mBAAmB,EAAEC,gBAAgB,EAAEC,4BAA4B,EAAEC,0BAA0B,EAAEC,+BAA+B,EAAEC,sCAAsC,QAAQ,4BAA4B;AAE1P,OAAO,MAAMC,gBAAgB,GAAG;EAC9BC,WAAW,EAAE,eAAe;EAC5BC,IAAI,EAAE,kBAAkB;EACxBC,kBAAkB,EAAE,sBAAsB;EAC1CC,aAAa,EAAE;~~AACjB~~,CAAC;AAED,MAAMC,QAAQ,GAAI;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,~~aAAad~~,QAAQ,~~CAACe~~,EAAG;AACzB,~~qBAAqBf~~,QAAQ,~~CAACe~~,EAAE,KAAK,KAAK,GAAG,OAAO,GAAG,QAAS;AAChE;AACA,~~MAAMN~~,gBAAgB,CAACI,aAAc;AACrC;AACA;AACA;AACA;AACA;AACA,~~MAAMJ~~,gBAAgB,CAACE,IAAK;AAC5B;AACA;AACA,QAAQR,mBAAoB;AAC5B;AACA,QAAQC,gBAAiB;AACzB;AACA,QAAQF,SAAS,~~CAACc~~,YAAa;AAC/B;AACA,~~QAAQd~~,SAAS,~~CAACe~~,MAAO;AACzB;AACA,~~QAAQf~~,SAAS,~~CAACgB~~,mBAAoB;AACtC;AACA,~~QAAQhB~~,SAAS,~~CAACiB~~,gBAAiB;AACnC;AACA,~~QAAQjB~~,SAAS,~~CAACkB~~,eAAgB;AAClC;AACA,~~QAAQlB~~,SAAS,~~CAACmB~~,gBAAiB;AACnC;AACA,~~QAAQnB~~,SAAS,~~CAACoB~~,aAAc;AAChC;AACA,~~QAAQpB~~,SAAS,~~CAACqB~~,gBAAiB;AACnC;AACA,~~QAAQrB~~,SAAS,~~CAACsB~~,sBAAuB;AACzC;AACA,~~QAAQtB~~,SAAS,~~CAACuB~~,kBAAmB;AACrC;AACA,~~QAAQvB~~,SAAS,~~CAACwB~~,0BAA2B;AAC7C;AACA,~~QAAQzB~~,wBAAyB;AACjC;AACA,QAAQK,0BAA2B;AACnC;AACA,QAAQD,4BAA6B;AACrC;AACA,QAAQG,sCAAuC;AAC/C;AACA,QAAQD,+BAAgC;AACxC;AACA,QAAQE,gBAAgB,CAACG,kBAAmB;AAC5C;AACA;AACA;AACA,CAAC;AAED,~~eAAeE~~,QAAQ"}
1	+ {"version":3,"names":["Platform","DISPATCH_RENDERING_EVENT","LISTENERS","POST_MESSAGE_TO_SDK","POST_PAGE_HEIGHT","DISPATCH_REQUEST_CARD_ACTION","DISPATCH_OPEN_ACTIONS_MENU","DISPATCH_REQUEST_ACCOUNT_ACTION","DISPATCH_ACTIVITY_FILTER_CHANGED_EVENT","HTML_PLACEHOLDER","SCRIPT_UNIT","BODY","SCRIPT_FROM_NATIVE","WINDOW_PARAMS","FONT_FACES","htmlText","OS","isPageLoaded","onLoad","unitRequestDownload","requestRendering","requestOpenLink","requestCloseFlow","cardActivated","cardStatusChange","unitRequestExternalSdk","unitAccountChanged","unitActivityFiltersChanged"],"sources":["html.ts"],"sourcesContent":["import { Platform } from 'react-native';\nimport { DISPATCH_RENDERING_EVENT, LISTENERS, POST_MESSAGE_TO_SDK, POST_PAGE_HEIGHT, DISPATCH_REQUEST_CARD_ACTION, DISPATCH_OPEN_ACTIONS_MENU, DISPATCH_REQUEST_ACCOUNT_ACTION, DISPATCH_ACTIVITY_FILTER_CHANGED_EVENT } from '../scripts/html/bodyScript';\n\nexport const HTML_PLACEHOLDER = {\n SCRIPT_UNIT: '<SCRIPT_UNIT>',\n BODY: '<BODY_HTML_CODE>',\n SCRIPT_FROM_NATIVE: '<SCRIPT_FROM_NATIVE>',\n WINDOW_PARAMS: '<WINDOW_PARAMS>',\n FONT_FACES: '<FONT_FACES>'\n};\n\nconst htmlText = `\n <!DOCTYPE html>\n <html lang=\"en\">\n\n <head lang=\"en\">\n <title>Unit Web SDK Demo</title>\n <script>\n window.UnitMobileSDK = true\n window.UnitMobileSDKConfig = {\n os: \"${Platform.OS}\",\n walletName: \"${Platform.OS === 'ios' ? 'Apple' : 'Google'}\",\n }\n ${HTML_PLACEHOLDER.WINDOW_PARAMS}\n </script>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=0\">\n\n <style type=\"text/css\">\n ${HTML_PLACEHOLDER.FONT_FACES}\n\n body {\n margin: 0;\n }\n </style>\n </head>\n\n <body>\n ${HTML_PLACEHOLDER.BODY}\n\n <script>\n ${POST_MESSAGE_TO_SDK}\n\n ${POST_PAGE_HEIGHT}\n\n ${LISTENERS.isPageLoaded}\n\n ${LISTENERS.onLoad}\n\n ${LISTENERS.unitRequestDownload}\n\n ${LISTENERS.requestRendering}\n\n ${LISTENERS.requestOpenLink}\n\n ${LISTENERS.requestCloseFlow}\n\n ${LISTENERS.cardActivated}\n\n ${LISTENERS.cardStatusChange}\n\n ${LISTENERS.unitRequestExternalSdk}\n\n ${LISTENERS.unitAccountChanged}\n\n ${LISTENERS.unitActivityFiltersChanged}\n\n ${DISPATCH_RENDERING_EVENT}\n\n ${DISPATCH_OPEN_ACTIONS_MENU}\n\n ${DISPATCH_REQUEST_CARD_ACTION}\n\n ${DISPATCH_ACTIVITY_FILTER_CHANGED_EVENT}\n\n ${DISPATCH_REQUEST_ACCOUNT_ACTION}\n\n ${HTML_PLACEHOLDER.SCRIPT_FROM_NATIVE}\n </script>\n </body>\n </html>\n`;\n\nexport default htmlText;\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,cAAc;AACvC,SAASC,wBAAwB,EAAEC,SAAS,EAAEC,mBAAmB,EAAEC,gBAAgB,EAAEC,4BAA4B,EAAEC,0BAA0B,EAAEC,+BAA+B,EAAEC,sCAAsC,QAAQ,4BAA4B;AAE1P,OAAO,MAAMC,gBAAgB,GAAG;EAC9BC,WAAW,EAAE,eAAe;EAC5BC,IAAI,EAAE,kBAAkB;EACxBC,kBAAkB,EAAE,sBAAsB;EAC1CC,aAAa,EAAE,iBAAiB;EAChCC,UAAU,EAAE;AACd,CAAC;AAED,MAAMC,QAAQ,GAAI;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaf,QAAQ,CAACgB,EAAG;AACzB,qBAAqBhB,QAAQ,CAACgB,EAAE,KAAK,KAAK,GAAG,OAAO,GAAG,QAAS;AAChE;AACA,MAAMP,gBAAgB,CAACI,aAAc;AACrC;AACA;AACA;AACA;AACA,QAAQJ,gBAAgB,CAACK,UAAW;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAML,gBAAgB,CAACE,IAAK;AAC5B;AACA;AACA,QAAQR,mBAAoB;AAC5B;AACA,QAAQC,gBAAiB;AACzB;AACA,QAAQF,SAAS,CAACe,YAAa;AAC/B;AACA,QAAQf,SAAS,CAACgB,MAAO;AACzB;AACA,QAAQhB,SAAS,CAACiB,mBAAoB;AACtC;AACA,QAAQjB,SAAS,CAACkB,gBAAiB;AACnC;AACA,QAAQlB,SAAS,CAACmB,eAAgB;AAClC;AACA,QAAQnB,SAAS,CAACoB,gBAAiB;AACnC;AACA,QAAQpB,SAAS,CAACqB,aAAc;AAChC;AACA,QAAQrB,SAAS,CAACsB,gBAAiB;AACnC;AACA,QAAQtB,SAAS,CAACuB,sBAAuB;AACzC;AACA,QAAQvB,SAAS,CAACwB,kBAAmB;AACrC;AACA,QAAQxB,SAAS,CAACyB,0BAA2B;AAC7C;AACA,QAAQ1B,wBAAyB;AACjC;AACA,QAAQK,0BAA2B;AACnC;AACA,QAAQD,4BAA6B;AACrC;AACA,QAAQG,sCAAuC;AAC/C;AACA,QAAQD,+BAAgC;AACxC;AACA,QAAQE,gBAAgB,CAACG,kBAAmB;AAC5C;AACA;AACA;AACA,CAAC;AAED,eAAeG,QAAQ"}

package/lib/typescript/scripts/html/fontFaces.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import type { UNFonts } from '../../types/shared/fonts.types';
2	+ export declare const getFontFacesString: (fonts?: UNFonts) => string;

package/lib/typescript/styles/fonts.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const getFontName: (fontFamily: string, fontWeight: number \| string) => string;

package/lib/typescript/types/shared/fonts.types.d.ts ADDED Viewed

@@ -0,0 +1,23 @@
+export type UNFonts = {
+    [fontFamily: string]: UNFontData[];
+};
+export type UNFontData = {
+    fontWeight: FontWeight;
+    sources: UNFontSource[];
+};
+export type UNFontSource = {
+    fileName: string;
+    assetDirRelativePath: string;
+    format?: string;
+};
+export declare enum FontWeight {
+    Thin = 100,
+    ExtraLight = 200,
+    Light = 300,
+    Regular = 400,
+    Medium = 500,
+    SemiBold = 600,
+    Bold = 700,
+    ExtraBold = 800,
+    Black = 900
+}

package/lib/typescript/types/shared/index.d.ts CHANGED Viewed

@@ -5,3 +5,5 @@ export * from './achCredit.types';
 export * from './payments.types';
 export * from './account.types';
 export * from './checkDeposit.types';
+export * from './activity.types';
+export * from './fonts.types';

package/lib/typescript/unitSdkManager/UnitSdkManager.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import type { NativeModules } from 'react-native';
 import { UnitUiManager } from './unitUiManager/unitUiManager';
+import type { UNFonts } from '../types/shared/fonts.types';
 export declare enum UNEnvironment {
     sandbox = "sandbox",
     production = "production"
@@ -13,16 +14,18 @@ export declare class UnitSDK {
     protected static customerToken?: string;
     protected static theme?: string;
     protected static language?: string;
+    protected static fonts?: UNFonts;
     protected static signedNonce?: string;
     protected static pushProvisionModule?: typeof NativeModules;
     static ui: UnitUiManager;
-    static init: (env: UNEnvironment, theme?: string, language?: string) => Promise<void>;
+    static init: (env: UNEnvironment, theme?: string, language?: string, fonts?: UNFonts) => Promise<void>;
     static setPushProvisioningModule: (pushProvisionModule: typeof NativeModules) => void;
     static getPushProvisionModule: () => import("react-native").NativeModulesStatic | undefined;
     static setSignedNonce: (signedNonce: string) => void;
     static getEnv: () => UNEnvironment | undefined;
     static getTheme: () => string | undefined;
     static getLanguage: () => string | undefined;
+    static getFonts: () => UNFonts | undefined;
     static getSignedNonce: () => string | undefined;
     static setCustomerToken: (customerToken: string) => void;
     static getCustomerToken: () => string | undefined;

package/lib/typescript/webComponent/WebComponent.d.ts CHANGED Viewed

@@ -13,7 +13,6 @@ export interface WebComponentProps {
     isScrollable?: boolean;
     nestedScrollEnabled?: boolean;
     handleScroll?: (event: any) => void;
-    width?: number;
     windowParams?: string;
 }
 export declare const WebComponent: React.ForwardRefExoticComponent<WebComponentProps & React.RefAttributes<WebView<{}>>>;

package/lib/typescript/webComponent/html.d.ts CHANGED Viewed

@@ -3,6 +3,7 @@ export declare const HTML_PLACEHOLDER: {
     BODY: string;
     SCRIPT_FROM_NATIVE: string;
     WINDOW_PARAMS: string;
+    FONT_FACES: string;
 };
 declare const htmlText: string;
 export default htmlText;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unit-components",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "Unit React Native components",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/components/UNAccountComponent/UNAccountComponent.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { Dimensions, View } from 'react-native';
+import { View } from 'react-native';
 import type WebView from 'react-native-webview';
 import { HeightEvent, PageMessage } from '../..//messages/webMessages/pageMessage';
 import { RequestRefreshEvent, RequestRenderingEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
@@ -45,7 +45,6 @@ export enum AccountAction {
 export const UNAccountComponent = React.forwardRef<UNAccountRef, UNAccountComponentProps>(function UNAccountComponent(props, accountRef) {
   const [height, setHeight] = useState(0);
-  const windowWidth = Dimensions.get('window').width;
   const [requestRefreshEvent, setRequestRefreshEvent] = useState<RequestRefreshEvent | null>(null);
@@ -122,7 +121,7 @@ export const UNAccountComponent = React.forwardRef<UNAccountRef, UNAccountCompon
   };
   return (
-    <View style={{ height }}>
+    <View style={{ height, width: '100%' }}>
       <WebComponent
         ref={webRef}
         type={WebComponentType.account}
@@ -132,7 +131,6 @@ export const UNAccountComponent = React.forwardRef<UNAccountRef, UNAccountCompon
         theme={props.theme}
         language={props.language}
         onMessage={message => handleMessage(message)}
-        width={windowWidth}
         isScrollable={false}
       />
     </View>

package/src/components/UNCardComponent/UNCardComponent.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React, { useImperativeHandle, useRef, useState, useEffect } from 'react';
-import { Dimensions, View } from 'react-native';
+import { View } from 'react-native';
 import type WebView from 'react-native-webview';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
 import { RequestRefreshEvent, RequestRenderingEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
@@ -42,7 +42,6 @@ export interface CardRef {
 export const UNCardComponent = React.forwardRef<CardRef, UNCardComponentProps>(function UNCardComponent(props, cardRef) {
   const [height, setHeight] = useState(0);
-  const windowWidth = Dimensions.get('window').width;
   const webRef = useRef<WebView>(null);
@@ -134,7 +133,7 @@ export const UNCardComponent = React.forwardRef<CardRef, UNCardComponentProps>(f
   }, [props.pushProvisioningModule]);
   return (
-    <View style={{ height }}>
+    <View style={{ height, width: '100%' }}>
       <WebComponent
         ref={webRef}
         type={WebComponentType.card}
@@ -144,7 +143,6 @@ export const UNCardComponent = React.forwardRef<CardRef, UNCardComponentProps>(f
         language={props.language}
         script={getCardScript()}
         onMessage={message => handleMessage(message)}
-        width={windowWidth}
         isScrollable={false}
       />
     </View>

package/src/helpers/pushProvisioningService/hooks/useCardWallet.ts CHANGED Viewed

@@ -20,7 +20,7 @@ export const useCardWallet = (cardId: string) => {
       return encryptedPayload;
     };
-    const getCardWalletData = async ()  => {
+    const getCardWalletData = async () => {
       const currentProvisioningModule = UnitSDK.getPushProvisionModule();
       if (!currentProvisioningModule) return;
       try {
@@ -46,7 +46,7 @@ export const useCardWallet = (cardId: string) => {
 };
-const parseWalletsResponse = (walletsResponse: string): UNWallet | null  => {
+const parseWalletsResponse = (walletsResponse: string): UNWallet | null => {
   try {
     const parsedWalletsResponse = JSON.parse(walletsResponse);
     const wallets = parsedWalletsResponse.wallets;

package/src/scripts/html/fontFaces.ts ADDED Viewed

@@ -0,0 +1,56 @@
+import { Platform } from 'react-native';
+import type { FontWeight, UNFonts, UNFontSource, UNFontData } from '../../types/shared/fonts.types';
+const getUrl = (source: UNFontSource): string => {
+  if (Platform.OS == 'ios') {
+    return `url('${source.fileName}')`;
+  }
+  // Handle '/' of dir Relative path
+  let relativeDirPath = source.assetDirRelativePath;
+  if (source.assetDirRelativePath[-1] !== '/') {
+    relativeDirPath = `${source.assetDirRelativePath}/`;
+  }
+  if (source.assetDirRelativePath[0] !== '/') {
+    relativeDirPath = `/${source.assetDirRelativePath}`;
+  }
+  return `url('file:///android_asset${relativeDirPath}${source.fileName}')`;
+};
+const getFontFace = (fontFamily: string, fontWeight: FontWeight, sources: UNFontSource[]): string => {
+  const numOfSources = sources.length;
+  const sourcesString = sources
+    .map((source, index) => {
+      const suffix = index === numOfSources - 1 ? ';' : ',';
+      const url = getUrl(source);
+      const format = source?.format ? `format('${source.format}')` : '';
+      return `${url} ${format}${suffix}`;
+    })
+    .join('\n');
+  return `
+    @font-face {
+      font-family: '${fontFamily}';
+      src: ${sourcesString}
+      font-weight: ${fontWeight.valueOf()};
+    }
+  `;
+};
+export const getFontFacesString = (fonts?: UNFonts): string => {
+  if (!fonts) return '';
+  const fontFaces: string[] = [];
+  // Iterate over all the fonts and their variants
+  // create font-face for each variant
+  Object.entries(fonts).forEach(([familyName, familyFonts]) => {
+    familyFonts.forEach((fontData: UNFontData) => {
+      fontFaces.push(getFontFace(familyName, fontData.fontWeight, fontData.sources));
+    });
+  });
+  // Combine all the font faces into a single string
+  return fontFaces.join('\n');
+};

package/src/styles/fonts.ts ADDED Viewed

@@ -0,0 +1,70 @@
+import { FontWeight, UNFontData } from '../types/shared';
+import { UnitSDK } from '../unitSdkManager/UnitSdkManager';
+const getFontWeightName = (familyFonts: UNFontData[], fontWeight?: number | string) => {
+  /**
+   * Given family variants and the required weight
+   * Return the closet font that defined by the client.
+   */
+  if (!fontWeight || fontWeight === 'normal') return 'Regular';
+  if (fontWeight === 'bold') return 'Bold';
+  const fontWeightNumber = Number(fontWeight);
+  // Select the closet variant
+  let selectedFontWeight = FontWeight.Regular.valueOf();
+  let minDistance = 1000;
+  familyFonts.forEach((fontData: UNFontData) => {
+    const currDistance = Math.abs(fontData.fontWeight - fontWeightNumber);
+    if (currDistance < minDistance) {
+      minDistance = currDistance;
+      selectedFontWeight = fontData.fontWeight.valueOf();
+    }
+  });
+  // FontWeight to String
+  switch (selectedFontWeight) {
+    case FontWeight.Thin:
+      return 'Thin';
+    case  FontWeight.ExtraLight:
+      return 'ExtraLight';
+    case FontWeight.Light:
+      return 'Light';
+    case FontWeight.Regular:
+      return 'Regular';
+    case FontWeight.Medium:
+      return 'Medium';
+    case FontWeight.SemiBold:
+      return 'SemiBold';
+    case FontWeight.Bold:
+      return 'Bold';
+    case FontWeight.ExtraBold:
+      return 'ExtraBold';
+    case FontWeight.Black:
+      return 'Black';
+    default:
+      return 'Regular';
+  }
+};
+export const getFontName = (fontFamily: string, fontWeight: number | string): string => {
+  /*
+   * Get the font family name and the font weight name from the THEME object.
+   * Then, return a possible font.
+  */
+  const fontsInApp = UnitSDK.getFonts();
+  if (!fontsInApp) {
+    throw new Error('Fonts are not found in the app');
+  }
+  const familyFonts = fontsInApp[fontFamily];
+  if (!familyFonts) {
+    throw new Error(`Font family ${fontFamily} not found in the app's fonts`);
+  }
+  const fontWeightName = getFontWeightName(familyFonts, fontWeight);
+  return `${fontFamily}-${fontWeightName}`;
+};

package/src/types/shared/fonts.types.ts ADDED Viewed

@@ -0,0 +1,28 @@
+export type UNFonts = {
+  [fontFamily: string]: UNFontData[];
+}
+export type UNFontData = {
+  // Using 'field' instead of 'key' to account for potential variants unrelated to font weight.
+  fontWeight: FontWeight;
+  sources: UNFontSource[];
+}
+export type UNFontSource = {
+  // using the fileName for iOS and relative path for Android
+  fileName: string;
+  assetDirRelativePath: string;
+  format?: string;
+}
+export enum FontWeight {
+  Thin = 100,
+  ExtraLight = 200,
+  Light = 300,
+  Regular = 400,
+  Medium = 500,
+  SemiBold = 600,
+  Bold = 700,
+  ExtraBold = 800,
+  Black = 900
+}

package/src/types/shared/index.ts CHANGED Viewed

@@ -5,3 +5,5 @@ export * from './achCredit.types';
 export * from './payments.types';
 export * from './account.types';
 export * from './checkDeposit.types';
+export * from './activity.types';
+export * from './fonts.types';

package/src/unitSdkManager/UnitSdkManager.ts CHANGED Viewed

@@ -3,6 +3,7 @@ import EventBus from '../helpers/EventBus';
 import { SDKMessage } from '../messages/nativeMessages/sdkMessage';
 import { fetchUnitScript } from './UnitSdk.api';
 import { UnitUiManager } from './unitUiManager/unitUiManager';
+import type { UNFonts } from '../types/shared/fonts.types';
 export enum UNEnvironment {
   sandbox = 'sandbox',
@@ -20,17 +21,20 @@ export class UnitSDK {
   protected static customerToken?: string;
   protected static theme?: string;
   protected static language?: string;
+  protected static fonts?: UNFonts;
   protected static signedNonce?: string;
   protected static pushProvisionModule?: typeof NativeModules;
   public static ui: UnitUiManager;
-  public static init = async (env: UNEnvironment, theme?: string, language?: string) => {
+  public static init = async (env: UNEnvironment, theme?: string, language?: string, fonts?: UNFonts) => {
     try {
       this.env = env;
       this.theme = theme;
       this.language = language;
+      this.fonts = fonts;
       this.ui = new UnitUiManager();
       await fetchUnitScript();
       EventBus.Instance.event(SDKMessage.IS_SDK_INITIALIZED, {});
@@ -63,6 +67,10 @@ export class UnitSDK {
     return this.language;
   };
+  public static getFonts = () => {
+    return this.fonts;
+  };
   public static getSignedNonce = () => {
     return this.signedNonce;
   };

package/src/webComponent/WebComponent.tsx CHANGED Viewed

@@ -13,6 +13,7 @@ import type { WebViewMessage } from '../messages/webMessages';
 import { SDKMessage, SdkScriptFetched } from '../messages/nativeMessages/sdkMessage';
 import { handleRequestDownload } from './WebComponent.utils';
 import type { PresentationMode, WebComponentType } from '../types/internal/webComponent.types';
+import { getFontFacesString } from '../scripts/html/fontFaces';
 const { UNAppInfo } = NativeModules;
@@ -27,7 +28,6 @@ export interface WebComponentProps {
   isScrollable?: boolean,
   nestedScrollEnabled?: boolean,
   handleScroll?: (event: any) => void,
-  width?: number;
   windowParams?: string;
 }
@@ -37,7 +37,6 @@ export const WebComponent = React.forwardRef<WebView, WebComponentProps>(functio
   const [componentCurrentTheme, setComponentCurrentTheme] = useState<string | undefined>(props.theme ?? UnitSDK.getTheme());
   const [componentCurrentLanguage, setComponentCurrentLanguage] = useState<string | undefined>(props.language ?? UnitSDK.getLanguage());
   const [baseName, setBaseName] = useState<string>();
-  const width = props.width ?? '100%';
   const updateUnitScript = (data: SdkScriptFetched) => {
     setUnitScript(data.unitScript);
@@ -81,7 +80,11 @@ export const WebComponent = React.forwardRef<WebView, WebComponentProps>(functio
     const languageParam = componentCurrentLanguage ? ` language="${componentCurrentLanguage}"` : '';
     const componentParams = (props.params || '') + themeParam + languageParam;
+    const fontFaces = getFontFacesString(UnitSDK.getFonts());
     let newHtml = html.replace(HTML_PLACEHOLDER.BODY, getHtmlBody(props.type.valueOf(), componentParams, props.presentationMode));
+    newHtml = newHtml.replace(HTML_PLACEHOLDER.FONT_FACES, fontFaces);
     newHtml = newHtml.replace(HTML_PLACEHOLDER.SCRIPT_FROM_NATIVE, props.script || '');
     newHtml = newHtml.replace(HTML_PLACEHOLDER.WINDOW_PARAMS, props.windowParams || '');
     setSourceHtml(newHtml);
@@ -131,8 +134,8 @@ export const WebComponent = React.forwardRef<WebView, WebComponentProps>(functio
       onScroll={_onScroll}
       overScrollMode="never"
       injectedJavaScript={unitScript}
-      style={{ width: width, flex: 1, opacity: 0.99, backgroundColor: 'transparent' }}
-      source={{ html: sourceHtml, baseUrl: `https://${baseName}` }}
+      style={{ width: '100%', flex: 1, opacity: 0.99, backgroundColor: 'transparent' }}
+      source={{ html: sourceHtml, baseUrl: Platform.OS === 'android' ?  `https://${baseName}` : ''}}
       onMessage={onMessage}
       androidHardwareAccelerationDisabled
     />

package/src/webComponent/html.ts CHANGED Viewed

@@ -5,7 +5,8 @@ export const HTML_PLACEHOLDER = {
   SCRIPT_UNIT: '<SCRIPT_UNIT>',
   BODY: '<BODY_HTML_CODE>',
   SCRIPT_FROM_NATIVE: '<SCRIPT_FROM_NATIVE>',
-  WINDOW_PARAMS: '<WINDOW_PARAMS>'
+  WINDOW_PARAMS: '<WINDOW_PARAMS>',
+  FONT_FACES: '<FONT_FACES>'
 };
 const htmlText = `
@@ -23,9 +24,17 @@ const htmlText = `
     ${HTML_PLACEHOLDER.WINDOW_PARAMS}
     </script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
+    <style type="text/css">
+      ${HTML_PLACEHOLDER.FONT_FACES}
+      body {
+        margin: 0;
+      }
+    </style>
   </head>
-  <body style="margin: 0;">
+  <body>
     ${HTML_PLACEHOLDER.BODY}
     <script>