omnipay-reactnative-sdk 0.2.9 → 0.3.1

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 (16) hide show
  1. package/README.md +11 -12
  2. package/lib/commonjs/components/OmnipayProvider.js +23 -36
  3. package/lib/commonjs/components/OmnipayProvider.js.map +1 -1
  4. package/lib/commonjs/components/OmnipayView.js +116 -9
  5. package/lib/commonjs/components/OmnipayView.js.map +1 -1
  6. package/lib/module/components/OmnipayProvider.js +23 -36
  7. package/lib/module/components/OmnipayProvider.js.map +1 -1
  8. package/lib/module/components/OmnipayView.js +117 -10
  9. package/lib/module/components/OmnipayView.js.map +1 -1
  10. package/lib/typescript/components/OmnipayProvider.d.ts +0 -1
  11. package/lib/typescript/components/OmnipayProvider.d.ts.map +1 -1
  12. package/lib/typescript/components/OmnipayView.d.ts +7 -1
  13. package/lib/typescript/components/OmnipayView.d.ts.map +1 -1
  14. package/package.json +2 -1
  15. package/src/components/OmnipayProvider.tsx +25 -31
  16. package/src/components/OmnipayView.tsx +140 -8
package/README.md CHANGED
@@ -49,7 +49,7 @@ android.enableJetifier=true
49
49
  ## Usage
50
50
 
51
51
  ```js
52
- import Omnipay from 'omnipay-reactnative-sdk';
52
+ import { Omnipay } from 'omnipay-reactnative-sdk';
53
53
 
54
54
  <Omnipay
55
55
  color="#FD7A23"
@@ -57,20 +57,19 @@ import Omnipay from 'omnipay-reactnative-sdk';
57
57
  phoneNumber="08020001111"
58
58
  publicKey="OMNIPUBKEY_HZA3ERGYEE5XUFGTZDQV_MNKRSTA3-TU"
59
59
  view="bills"
60
- onEnterFullScreen={()=> hideExtraUiElements()}
61
- onExitFullScreen={()=> unhideExtraUiElements()}
60
+ onEnterFullScreen={() => hideExtraUiElements()}
61
+ onExitFullScreen={() => unhideExtraUiElements()}
62
62
  />;
63
-
64
63
  ```
65
64
 
66
65
  ### Properties
67
66
 
68
- | Name | Type | Description |
69
- | --- | --- | --- |
70
- | color | String | color of primary buttons and links |
71
- | env | String | dev or prod |
72
- | phoneNumber | String | phone number of the customer |
73
- | publicKey | String | public key of the company on omnipay |
74
- | view | String | the view to render. it accepts only bills |
67
+ | Name | Type | Description |
68
+ | ----------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
69
+ | color | String | color of primary buttons and links |
70
+ | env | String | dev or prod |
71
+ | phoneNumber | String | phone number of the customer |
72
+ | publicKey | String | public key of the company on omnipay |
73
+ | view | String | the view to render. it accepts only bills |
75
74
  | onEnterFullScreen | Function | the sdk uses a webview to render the content and might not neccesarily fill up the whole screen. This will be called whenever the sdk needs to show a modal. Other ui elements can be hidden at this point so the modal of the sdk can take up the full width and height of the screen |
76
- | onExitFullScreen | Function | this is when the hidden elements can be made visible again as the sdk is no longer displaying a modal |
75
+ | onExitFullScreen | Function | this is when the hidden elements can be made visible again as the sdk is no longer displaying a modal |
package/lib/commonjs/components/OmnipayProvider.js CHANGED
@@ -21,15 +21,14 @@ const OmnipayProvider = _ref => {
21
21
  color
22
22
  } = _ref;
23
23
  const [webviewStatus, setWebviewStatus] = (0, _react.useState)('loading');
24
- const [useFullscreen, setUseFullScreen] = (0, _react.useState)(false);
24
+ const [isVisible, setIsVisible] = (0, _react.useState)(false);
25
25
  const webviewRef = (0, _react.useRef)(null);
26
26
  const webHost = getWebHost();
27
27
  const webviewStyle = getWebviewStyle();
28
28
  const [webviewUrl, setWebviewUrl] = (0, _react.useState)(webHost);
29
- const isNoviewLoaded = !webviewUrl.includes("view");
30
- console.log(useFullscreen);
29
+ const showWebview = !webviewUrl.includes("view") && isVisible;
31
30
  function getWebviewStyle() {
32
- if (isNoviewLoaded) {
31
+ if (!showWebview) {
33
32
  return {
34
33
  opacity: 0,
35
34
  height: 0,
@@ -75,12 +74,8 @@ const OmnipayProvider = _ref => {
75
74
  if (dataKey === 'openLink') {
76
75
  _reactNative.Linking.openURL(dataValue);
77
76
  }
78
- if (dataKey === 'modalOpen') {
79
- setUseFullScreen(true);
80
- }
81
- if (dataKey === 'modalClosed') {
82
- setUseFullScreen(false);
83
- }
77
+ if (dataKey === 'modalOpen') {}
78
+ if (dataKey === 'modalClosed') {}
84
79
  }
85
80
  } catch (error) {}
86
81
  }
@@ -90,43 +85,35 @@ const OmnipayProvider = _ref => {
90
85
  if (phoneNumber.length === 11) {
91
86
  const webUrl = `${webHost}?theme=${color}&view=bills&publicKey=${publicKey}&phoneNumber=${phoneNumber}`;
92
87
  setWebviewUrl(webUrl);
88
+ setIsVisible(true);
93
89
  }
94
90
  }
95
91
  }, []);
96
- function WebviewContainer() {
97
- return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
98
- style: {
99
- flex: 1,
100
- height: "100%"
101
- }
102
- }, /*#__PURE__*/_react.default.createElement(_reactNativeWebview.default, {
103
- source: {
104
- uri: webviewUrl
105
- },
106
- style: webviewStyle,
107
- injectedJavaScriptBeforeContentLoaded: onWebviewMount,
108
- onMessage: onWebviewMessage,
109
- ref: webviewRef,
110
- onLoadStart: () => setWebviewStatus("loading"),
111
- onLoadEnd: () => setWebviewStatus('success')
112
- }), webviewStatus === 'loading' && !isNoviewLoaded && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
113
- style: styles.webviewLoader
114
- }, /*#__PURE__*/_react.default.createElement(_reactNative.ActivityIndicator, {
115
- size: "small",
116
- color: color
117
- })));
118
- }
119
92
  return /*#__PURE__*/_react.default.createElement(OmnipayContext.Provider, {
120
93
  value: {
121
- initiateBills: _initiateBills,
122
- container: WebviewContainer()
94
+ initiateBills: _initiateBills
123
95
  }
124
96
  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
125
97
  style: {
126
98
  flex: 1,
127
99
  height: "100%"
128
100
  }
129
- }, children));
101
+ }, /*#__PURE__*/_react.default.createElement(_reactNativeWebview.default, {
102
+ source: {
103
+ uri: webviewUrl
104
+ },
105
+ style: webviewStyle,
106
+ injectedJavaScriptBeforeContentLoaded: onWebviewMount,
107
+ onMessage: onWebviewMessage,
108
+ ref: webviewRef,
109
+ onLoadStart: () => setWebviewStatus("loading"),
110
+ onLoadEnd: () => setWebviewStatus('success')
111
+ }), webviewStatus === 'loading' && showWebview && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
112
+ style: styles.webviewLoader
113
+ }, /*#__PURE__*/_react.default.createElement(_reactNative.ActivityIndicator, {
114
+ size: "small",
115
+ color: color
116
+ })), children));
130
117
  };
131
118
  exports.OmnipayProvider = OmnipayProvider;
132
119
  const styles = _reactNative.StyleSheet.create({
package/lib/commonjs/components/OmnipayProvider.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["OmnipayContext","React","createContext","OmnipayProvider","children","publicKey","env","color","webviewStatus","setWebviewStatus","useState","useFullscreen","setUseFullScreen","webviewRef","useRef","webHost","getWebHost","webviewStyle","getWebviewStyle","webviewUrl","setWebviewUrl","isNoviewLoaded","includes","console","log","opacity","height","width","flex","styles","webview","onWebviewMount","Platform","OS","postMessage","data","current","JSON","stringify","error","onWebviewMessage","e","nativeEvent","eventData","parse","dataKey","dataValue","contactDetails","getContact","Linking","openURL","_initiateBills","useCallback","phoneNumber","length","webUrl","WebviewContainer","uri","webviewLoader","initiateBills","container","StyleSheet","create","hide","display","full","zIndex","backgroundColor","alignItems","justifyContent","position","top","left"],"sourceRoot":"../../src","sources":["OmnipayProvider.tsx"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAA0C;AAAA;AAAA;AAoBnC,MAAMA,cAAc,gBAAGC,cAAK,CAACC,aAAa,CAA4B,IAAI,CAAC;AAAC;AAE5E,MAAMC,eAAe,GAAG,QAA+D;EAAA,IAA9D;IAAEC,QAAQ;IAAEC,SAAS;IAAEC,GAAG;IAAEC;EAA4B,CAAC;EACrF,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAG,IAAAC,eAAQ,EAAS,SAAS,CAAC;EACrE,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAG,IAAAF,eAAQ,EAAC,KAAK,CAAC;EACzD,MAAMG,UAAU,GAAG,IAAAC,aAAM,EAAU,IAAI,CAAC;EACxC,MAAMC,OAAO,GAAGC,UAAU,EAAE;EAC5B,MAAMC,YAAY,GAAGC,eAAe,EAAE;EACtC,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAG,IAAAV,eAAQ,EAACK,OAAO,CAAC;EACrD,MAAMM,cAAc,GAAG,CAACF,UAAU,CAACG,QAAQ,CAAC,MAAM,CAAC;EAEnDC,OAAO,CAACC,GAAG,CAACb,aAAa,CAAC;EAG1B,SAASO,eAAe,GAAG;IACvB,IAAIG,cAAc,EAAE;MAChB,OAAO;QAAEI,OAAO,EAAE,CAAC;QAAEC,MAAM,EAAE,CAAC;QAAEC,KAAK,EAAE,CAAC;QAAEC,IAAI,EAAE;MAAE,CAAC;IACvD;IACA,OAAOC,MAAM,CAACC,OAAO;EACzB;EAEA,SAASd,UAAU,GAAG;IAClB,IAAIV,GAAG,KAAK,KAAK,EAAE;MACf,OAAO,oCAAoC;IAC/C;IACA,OAAO,yBAAyB;EACpC;EAGA,MAAMyB,cAAc,GAAI;AAC5B,0BAA0BC,qBAAQ,CAACC,EAAG;AACtC;AACA,KAAK;EAED,SAASC,WAAW,CAACC,IAAiB,EAAE;IACpC,IAAI,CAACtB,UAAU,CAACuB,OAAO,EAAE;MACrB;IACJ;IACA,IAAI;MACAvB,UAAU,CAACuB,OAAO,CAACF,WAAW,CAACG,IAAI,CAACC,SAAS,CAACH,IAAI,CAAC,CAAC;IACxD,CAAC,CAAC,OAAOI,KAAK,EAAE,CAAE;EACtB;EAEA,eAAeC,gBAAgB,CAACC,CAAsB,EAAE;IACpD,IAAI;MACA,IAAIA,CAAC,CAACC,WAAW,IAAID,CAAC,CAACC,WAAW,CAACP,IAAI,EAAE;QACrC,MAAMQ,SAAS,GAAGN,IAAI,CAACO,KAAK,CAACH,CAAC,CAACC,WAAW,CAACP,IAAI,CAAC;QAChD,MAAM;UAAEU,OAAO;UAAEC;QAAU,CAAC,GAAGH,SAAS;QACxC,IAAIE,OAAO,KAAK,eAAe,EAAE;UAC7B,MAAME,cAAc,GAAG,MAAM,IAAAC,qBAAU,GAAE;UACzCd,WAAW,CAAC;YACRW,OAAO,EAAE,iBAAiB;YAC1BC,SAAS,EAAEC;UACf,CAAC,CAAC;QACN;QAEA,IAAIF,OAAO,KAAK,UAAU,EAAE;UACxBI,oBAAO,CAACC,OAAO,CAACJ,SAAS,CAAC;QAC9B;QACA,IAAID,OAAO,KAAK,WAAW,EAAE;UACzBjC,gBAAgB,CAAC,IAAI,CAAC;QAC1B;QACA,IAAIiC,OAAO,KAAK,aAAa,EAAE;UAC3BjC,gBAAgB,CAAC,KAAK,CAAC;QAC3B;MACJ;IACJ,CAAC,CAAC,OAAO2B,KAAK,EAAE,CAAE;EACtB;EAIA,MAAMY,cAAc,GAAG,IAAAC,kBAAW,EAE1BC,WAAmB,IAClB;IACD9B,OAAO,CAACC,GAAG,CAAC6B,WAAW,CAAC;IACxB,IAAIA,WAAW,EAAE;MACb,IAAIA,WAAW,CAACC,MAAM,KAAK,EAAE,EAAE;QAC3B,MAAMC,MAAM,GAAI,GAAExC,OAAQ,UAASR,KAAM,yBAAwBF,SAAU,gBAAegD,WAAY,EAAC;QACvGjC,aAAa,CAACmC,MAAM,CAAC;MACzB;IACJ;EACJ,CAAC,EACD,EAAE,CACL;EAED,SAASC,gBAAgB,GAAG;IACxB,oBAAO,6BAAC,iBAAI;MAAC,KAAK,EAAE;QAAE5B,IAAI,EAAE,CAAC;QAAEF,MAAM,EAAE;MAAO;IAAE,gBAC5C,6BAAC,2BAAO;MACJ,MAAM,EAAE;QACJ+B,GAAG,EAAEtC;MACT,CAAE;MACF,KAAK,EAAEF,YAAa;MACpB,qCAAqC,EAAEc,cAAe;MACtD,SAAS,EAAES,gBAAiB;MAC5B,GAAG,EAAE3B,UAAW;MAChB,WAAW,EAAE,MAAMJ,gBAAgB,CAAC,SAAS,CAAE;MAC/C,SAAS,EAAE,MAAMA,gBAAgB,CAAC,SAAS;IAAE,EAC/C,EACDD,aAAa,KAAK,SAAS,IAAI,CAACa,cAAc,iBAC3C,6BAAC,iBAAI;MAAC,KAAK,EAAEQ,MAAM,CAAC6B;IAAc,gBAC9B,6BAAC,8BAAiB;MAAC,IAAI,EAAC,OAAO;MAAC,KAAK,EAAEnD;IAAM,EAAG,CAEvD,CACE;EACX;EAGA,oBACI,6BAAC,cAAc,CAAC,QAAQ;IAAC,KAAK,EAAE;MAAEoD,aAAa,EAAER,cAAc;MAAES,SAAS,EAAEJ,gBAAgB;IAAG;EAAE,gBAC7F,6BAAC,iBAAI;IAAC,KAAK,EAAE;MAAE5B,IAAI,EAAE,CAAC;MAAEF,MAAM,EAAE;IAAO;EAAE,GACpCtB,QAAQ,CACN,CACe;AAElC,CAAC;AAAC;AAEF,MAAMyB,MAAM,GAAGgC,uBAAU,CAACC,MAAM,CAAC;EAC7BC,IAAI,EAAE;IACFC,OAAO,EAAE;EACb,CAAC;EACDC,IAAI,EAAE;IACFrC,IAAI,EAAE,CAAC;IACPD,KAAK,EAAE,MAAM;IACbD,MAAM,EAAE;EACZ,CAAC;EACDI,OAAO,EAAE;IACLF,IAAI,EAAE,CAAC;IACPD,KAAK,EAAE,MAAM;IACbD,MAAM,EAAE;IACR;IACA;IACA;EACJ,CAAC;;EACDgC,aAAa,EAAE;IACXQ,MAAM,EAAE,CAAC;IACTC,eAAe,EAAE,OAAO;IACxBC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE,QAAQ;IACxBzC,IAAI,EAAE,CAAC;IACPD,KAAK,EAAE,MAAM;IACbD,MAAM,EAAE,MAAM;IACd4C,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,CAAC;IACNC,IAAI,EAAE;EACV;AACJ,CAAC,CAAC"}
1
+ {"version":3,"names":["OmnipayContext","React","createContext","OmnipayProvider","children","publicKey","env","color","webviewStatus","setWebviewStatus","useState","isVisible","setIsVisible","webviewRef","useRef","webHost","getWebHost","webviewStyle","getWebviewStyle","webviewUrl","setWebviewUrl","showWebview","includes","opacity","height","width","flex","styles","webview","onWebviewMount","Platform","OS","postMessage","data","current","JSON","stringify","error","onWebviewMessage","e","nativeEvent","eventData","parse","dataKey","dataValue","contactDetails","getContact","Linking","openURL","_initiateBills","useCallback","phoneNumber","console","log","length","webUrl","initiateBills","uri","webviewLoader","StyleSheet","create","hide","display","full","zIndex","backgroundColor","alignItems","justifyContent","position","top","left"],"sourceRoot":"../../src","sources":["OmnipayProvider.tsx"],"mappings":"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"}
package/lib/commonjs/components/OmnipayView.js CHANGED
@@ -5,20 +5,127 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.Omnipay = void 0;
7
7
  var _react = _interopRequireWildcard(require("react"));
8
- var _useOmnipay = require("../hooks/useOmnipay");
8
+ var _reactNative = require("react-native");
9
+ var _reactNativeWebview = require("react-native-webview");
10
+ var _functions = require("../functions");
9
11
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
10
12
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
11
13
  const Omnipay = _ref => {
12
14
  let {
13
- phoneNumber
15
+ color,
16
+ env,
17
+ publicKey,
18
+ phoneNumber,
19
+ view,
20
+ onEnterFullScreen,
21
+ onExitFullScreen
14
22
  } = _ref;
15
- const {
16
- initiateBills
17
- } = (0, _useOmnipay.useOmnipay)();
18
- (0, _react.useEffect)(() => {
19
- initiateBills(phoneNumber);
20
- }, [phoneNumber]);
21
- return /*#__PURE__*/_react.default.createElement(_react.Fragment, null);
23
+ const webviewRef = (0, _react.useRef)(null);
24
+ const [webviewStatus, setWebviewStatus] = (0, _react.useState)('loading');
25
+ const webHost = (0, _functions.getWebHost)(env);
26
+ const webUrl = `${webHost}?theme=${color}&view=${view}&publicKey=${publicKey}&phoneNumber=${phoneNumber}`;
27
+ const onWebviewMount = `
28
+ window.nativeOs = ${_reactNative.Platform.OS};
29
+ true;
30
+ `;
31
+ function postMessage(data) {
32
+ if (!webviewRef.current) {
33
+ return;
34
+ }
35
+ try {
36
+ webviewRef.current.postMessage(JSON.stringify(data));
37
+ } catch (error) {}
38
+ }
39
+ async function onWebviewMessage(e) {
40
+ try {
41
+ if (e.nativeEvent && e.nativeEvent.data) {
42
+ const eventData = JSON.parse(e.nativeEvent.data);
43
+ const {
44
+ dataKey,
45
+ dataValue
46
+ } = eventData;
47
+ if (dataKey === 'chooseContact') {
48
+ const contactDetails = await (0, _functions.getContact)();
49
+ postMessage({
50
+ dataKey: 'contactSelected',
51
+ dataValue: contactDetails
52
+ });
53
+ }
54
+ if (dataKey === 'modalOpen') {
55
+ if (onEnterFullScreen) {
56
+ onEnterFullScreen();
57
+ }
58
+ }
59
+ if (dataKey === 'modalClosed') {
60
+ if (onExitFullScreen) {
61
+ onExitFullScreen();
62
+ }
63
+ }
64
+ if (dataKey === 'openLink') {
65
+ _reactNative.Linking.openURL(dataValue);
66
+ }
67
+ }
68
+ } catch (error) {}
69
+ }
70
+ if (view !== 'bills') {
71
+ return /*#__PURE__*/_react.default.createElement(_reactNative.Text, null, "Invalid view");
72
+ }
73
+ if (!publicKey.includes('OMNIPUBKEY_')) {
74
+ return /*#__PURE__*/_react.default.createElement(_reactNative.Text, null, "Invalid public key");
75
+ }
76
+ if (phoneNumber.length !== 11) {
77
+ return /*#__PURE__*/_react.default.createElement(_reactNative.Text, null, "Invalid phone number");
78
+ }
79
+ if (color.length < 3) {
80
+ return /*#__PURE__*/_react.default.createElement(_reactNative.Text, null, "Invalid color");
81
+ }
82
+ if (!['dev', 'prod'].includes(env)) {
83
+ return /*#__PURE__*/_react.default.createElement(_reactNative.Text, null, "Invalid environment");
84
+ }
85
+ return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
86
+ style: styles.full
87
+ }, /*#__PURE__*/_react.default.createElement(_reactNativeWebview.WebView, {
88
+ source: {
89
+ uri: webUrl
90
+ },
91
+ style: styles.webview,
92
+ injectedJavaScriptBeforeContentLoaded: onWebviewMount,
93
+ onMessage: onWebviewMessage,
94
+ ref: webviewRef,
95
+ onLoadEnd: () => setWebviewStatus('success')
96
+ }), webviewStatus === 'loading' && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
97
+ style: styles.webviewLoader
98
+ }, /*#__PURE__*/_react.default.createElement(_reactNative.ActivityIndicator, {
99
+ size: "small",
100
+ color: color
101
+ }))));
22
102
  };
23
103
  exports.Omnipay = Omnipay;
104
+ const styles = _reactNative.StyleSheet.create({
105
+ hide: {
106
+ display: 'none'
107
+ },
108
+ full: {
109
+ flex: 1,
110
+ width: '100%',
111
+ height: '100%'
112
+ },
113
+ webview: {
114
+ flex: 1,
115
+ width: '100%',
116
+ height: '100%'
117
+ },
118
+ webviewLoader: {
119
+ zIndex: 3,
120
+ backgroundColor: 'white',
121
+ alignItems: 'center',
122
+ justifyContent: 'center',
123
+ flex: 1,
124
+ width: '100%',
125
+ height: '100%',
126
+ position: 'absolute',
127
+ top: 0,
128
+ left: 0
129
+ }
130
+ });
24
131
  //# sourceMappingURL=OmnipayView.js.map
package/lib/commonjs/components/OmnipayView.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["Omnipay","phoneNumber","initiateBills","useOmnipay","useEffect"],"sourceRoot":"../../src","sources":["OmnipayView.tsx"],"mappings":";;;;;;AAAA;AACA;AAAiD;AAAA;AAO1C,MAAMA,OAAO,GAAG,QAEU;EAAA,IAFT;IACpBC;EACU,CAAC;EACX,MAAM;IAAEC;EAAc,CAAC,GAAG,IAAAC,sBAAU,GAAE;EAEtC,IAAAC,gBAAS,EAAC,MAAM;IACZF,aAAa,CAACD,WAAW,CAAC;EAC9B,CAAC,EAAE,CAACA,WAAW,CAAC,CAAC;EAIjB,oBACI,6BAAC,eAAQ,OAEE;AAEnB,CAAC;AAAC"}
1
+ {"version":3,"names":["Omnipay","color","env","publicKey","phoneNumber","view","onEnterFullScreen","onExitFullScreen","webviewRef","useRef","webviewStatus","setWebviewStatus","useState","webHost","getWebHost","webUrl","onWebviewMount","Platform","OS","postMessage","data","current","JSON","stringify","error","onWebviewMessage","e","nativeEvent","eventData","parse","dataKey","dataValue","contactDetails","getContact","Linking","openURL","includes","length","styles","full","uri","webview","webviewLoader","StyleSheet","create","hide","display","flex","width","height","zIndex","backgroundColor","alignItems","justifyContent","position","top","left"],"sourceRoot":"../../src","sources":["OmnipayView.tsx"],"mappings":"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"}
package/lib/module/components/OmnipayProvider.js CHANGED
@@ -11,15 +11,14 @@ export const OmnipayProvider = _ref => {
11
11
  color
12
12
  } = _ref;
13
13
  const [webviewStatus, setWebviewStatus] = useState('loading');
14
- const [useFullscreen, setUseFullScreen] = useState(false);
14
+ const [isVisible, setIsVisible] = useState(false);
15
15
  const webviewRef = useRef(null);
16
16
  const webHost = getWebHost();
17
17
  const webviewStyle = getWebviewStyle();
18
18
  const [webviewUrl, setWebviewUrl] = useState(webHost);
19
- const isNoviewLoaded = !webviewUrl.includes("view");
20
- console.log(useFullscreen);
19
+ const showWebview = !webviewUrl.includes("view") && isVisible;
21
20
  function getWebviewStyle() {
22
- if (isNoviewLoaded) {
21
+ if (!showWebview) {
23
22
  return {
24
23
  opacity: 0,
25
24
  height: 0,
@@ -65,12 +64,8 @@ export const OmnipayProvider = _ref => {
65
64
  if (dataKey === 'openLink') {
66
65
  Linking.openURL(dataValue);
67
66
  }
68
- if (dataKey === 'modalOpen') {
69
- setUseFullScreen(true);
70
- }
71
- if (dataKey === 'modalClosed') {
72
- setUseFullScreen(false);
73
- }
67
+ if (dataKey === 'modalOpen') {}
68
+ if (dataKey === 'modalClosed') {}
74
69
  }
75
70
  } catch (error) {}
76
71
  }
@@ -80,43 +75,35 @@ export const OmnipayProvider = _ref => {
80
75
  if (phoneNumber.length === 11) {
81
76
  const webUrl = `${webHost}?theme=${color}&view=bills&publicKey=${publicKey}&phoneNumber=${phoneNumber}`;
82
77
  setWebviewUrl(webUrl);
78
+ setIsVisible(true);
83
79
  }
84
80
  }
85
81
  }, []);
86
- function WebviewContainer() {
87
- return /*#__PURE__*/React.createElement(View, {
88
- style: {
89
- flex: 1,
90
- height: "100%"
91
- }
92
- }, /*#__PURE__*/React.createElement(WebView, {
93
- source: {
94
- uri: webviewUrl
95
- },
96
- style: webviewStyle,
97
- injectedJavaScriptBeforeContentLoaded: onWebviewMount,
98
- onMessage: onWebviewMessage,
99
- ref: webviewRef,
100
- onLoadStart: () => setWebviewStatus("loading"),
101
- onLoadEnd: () => setWebviewStatus('success')
102
- }), webviewStatus === 'loading' && !isNoviewLoaded && /*#__PURE__*/React.createElement(View, {
103
- style: styles.webviewLoader
104
- }, /*#__PURE__*/React.createElement(ActivityIndicator, {
105
- size: "small",
106
- color: color
107
- })));
108
- }
109
82
  return /*#__PURE__*/React.createElement(OmnipayContext.Provider, {
110
83
  value: {
111
- initiateBills: _initiateBills,
112
- container: WebviewContainer()
84
+ initiateBills: _initiateBills
113
85
  }
114
86
  }, /*#__PURE__*/React.createElement(View, {
115
87
  style: {
116
88
  flex: 1,
117
89
  height: "100%"
118
90
  }
119
- }, children));
91
+ }, /*#__PURE__*/React.createElement(WebView, {
92
+ source: {
93
+ uri: webviewUrl
94
+ },
95
+ style: webviewStyle,
96
+ injectedJavaScriptBeforeContentLoaded: onWebviewMount,
97
+ onMessage: onWebviewMessage,
98
+ ref: webviewRef,
99
+ onLoadStart: () => setWebviewStatus("loading"),
100
+ onLoadEnd: () => setWebviewStatus('success')
101
+ }), webviewStatus === 'loading' && showWebview && /*#__PURE__*/React.createElement(View, {
102
+ style: styles.webviewLoader
103
+ }, /*#__PURE__*/React.createElement(ActivityIndicator, {
104
+ size: "small",
105
+ color: color
106
+ })), children));
120
107
  };
121
108
  const styles = StyleSheet.create({
122
109
  hide: {
package/lib/module/components/OmnipayProvider.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["React","useCallback","useRef","useState","ActivityIndicator","Linking","Platform","StyleSheet","View","WebView","getContact","OmnipayContext","createContext","OmnipayProvider","children","publicKey","env","color","webviewStatus","setWebviewStatus","useFullscreen","setUseFullScreen","webviewRef","webHost","getWebHost","webviewStyle","getWebviewStyle","webviewUrl","setWebviewUrl","isNoviewLoaded","includes","console","log","opacity","height","width","flex","styles","webview","onWebviewMount","OS","postMessage","data","current","JSON","stringify","error","onWebviewMessage","e","nativeEvent","eventData","parse","dataKey","dataValue","contactDetails","openURL","_initiateBills","phoneNumber","length","webUrl","WebviewContainer","uri","webviewLoader","initiateBills","container","create","hide","display","full","zIndex","backgroundColor","alignItems","justifyContent","position","top","left"],"sourceRoot":"../../src","sources":["OmnipayProvider.tsx"],"mappings":"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"}
1
+ {"version":3,"names":["React","useCallback","useRef","useState","ActivityIndicator","Linking","Platform","StyleSheet","View","WebView","getContact","OmnipayContext","createContext","OmnipayProvider","children","publicKey","env","color","webviewStatus","setWebviewStatus","isVisible","setIsVisible","webviewRef","webHost","getWebHost","webviewStyle","getWebviewStyle","webviewUrl","setWebviewUrl","showWebview","includes","opacity","height","width","flex","styles","webview","onWebviewMount","OS","postMessage","data","current","JSON","stringify","error","onWebviewMessage","e","nativeEvent","eventData","parse","dataKey","dataValue","contactDetails","openURL","_initiateBills","phoneNumber","console","log","length","webUrl","initiateBills","uri","webviewLoader","create","hide","display","full","zIndex","backgroundColor","alignItems","justifyContent","position","top","left"],"sourceRoot":"../../src","sources":["OmnipayProvider.tsx"],"mappings":"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"}
package/lib/module/components/OmnipayView.js CHANGED
@@ -1,15 +1,122 @@
1
- import React, { Fragment, useEffect } from 'react';
2
- import { useOmnipay } from '../hooks/useOmnipay';
1
+ import React, { Fragment, useRef, useState } from 'react';
2
+ import { StyleSheet, View, Platform, ActivityIndicator, Text, Linking } from 'react-native';
3
+ import { WebView } from 'react-native-webview';
4
+ import { getContact, getWebHost } from "../functions";
3
5
  export const Omnipay = _ref => {
4
6
  let {
5
- phoneNumber
7
+ color,
8
+ env,
9
+ publicKey,
10
+ phoneNumber,
11
+ view,
12
+ onEnterFullScreen,
13
+ onExitFullScreen
6
14
  } = _ref;
7
- const {
8
- initiateBills
9
- } = useOmnipay();
10
- useEffect(() => {
11
- initiateBills(phoneNumber);
12
- }, [phoneNumber]);
13
- return /*#__PURE__*/React.createElement(Fragment, null);
15
+ const webviewRef = useRef(null);
16
+ const [webviewStatus, setWebviewStatus] = useState('loading');
17
+ const webHost = getWebHost(env);
18
+ const webUrl = `${webHost}?theme=${color}&view=${view}&publicKey=${publicKey}&phoneNumber=${phoneNumber}`;
19
+ const onWebviewMount = `
20
+ window.nativeOs = ${Platform.OS};
21
+ true;
22
+ `;
23
+ function postMessage(data) {
24
+ if (!webviewRef.current) {
25
+ return;
26
+ }
27
+ try {
28
+ webviewRef.current.postMessage(JSON.stringify(data));
29
+ } catch (error) {}
30
+ }
31
+ async function onWebviewMessage(e) {
32
+ try {
33
+ if (e.nativeEvent && e.nativeEvent.data) {
34
+ const eventData = JSON.parse(e.nativeEvent.data);
35
+ const {
36
+ dataKey,
37
+ dataValue
38
+ } = eventData;
39
+ if (dataKey === 'chooseContact') {
40
+ const contactDetails = await getContact();
41
+ postMessage({
42
+ dataKey: 'contactSelected',
43
+ dataValue: contactDetails
44
+ });
45
+ }
46
+ if (dataKey === 'modalOpen') {
47
+ if (onEnterFullScreen) {
48
+ onEnterFullScreen();
49
+ }
50
+ }
51
+ if (dataKey === 'modalClosed') {
52
+ if (onExitFullScreen) {
53
+ onExitFullScreen();
54
+ }
55
+ }
56
+ if (dataKey === 'openLink') {
57
+ Linking.openURL(dataValue);
58
+ }
59
+ }
60
+ } catch (error) {}
61
+ }
62
+ if (view !== 'bills') {
63
+ return /*#__PURE__*/React.createElement(Text, null, "Invalid view");
64
+ }
65
+ if (!publicKey.includes('OMNIPUBKEY_')) {
66
+ return /*#__PURE__*/React.createElement(Text, null, "Invalid public key");
67
+ }
68
+ if (phoneNumber.length !== 11) {
69
+ return /*#__PURE__*/React.createElement(Text, null, "Invalid phone number");
70
+ }
71
+ if (color.length < 3) {
72
+ return /*#__PURE__*/React.createElement(Text, null, "Invalid color");
73
+ }
74
+ if (!['dev', 'prod'].includes(env)) {
75
+ return /*#__PURE__*/React.createElement(Text, null, "Invalid environment");
76
+ }
77
+ return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(View, {
78
+ style: styles.full
79
+ }, /*#__PURE__*/React.createElement(WebView, {
80
+ source: {
81
+ uri: webUrl
82
+ },
83
+ style: styles.webview,
84
+ injectedJavaScriptBeforeContentLoaded: onWebviewMount,
85
+ onMessage: onWebviewMessage,
86
+ ref: webviewRef,
87
+ onLoadEnd: () => setWebviewStatus('success')
88
+ }), webviewStatus === 'loading' && /*#__PURE__*/React.createElement(View, {
89
+ style: styles.webviewLoader
90
+ }, /*#__PURE__*/React.createElement(ActivityIndicator, {
91
+ size: "small",
92
+ color: color
93
+ }))));
14
94
  };
95
+ const styles = StyleSheet.create({
96
+ hide: {
97
+ display: 'none'
98
+ },
99
+ full: {
100
+ flex: 1,
101
+ width: '100%',
102
+ height: '100%'
103
+ },
104
+ webview: {
105
+ flex: 1,
106
+ width: '100%',
107
+ height: '100%'
108
+ },
109
+ webviewLoader: {
110
+ zIndex: 3,
111
+ backgroundColor: 'white',
112
+ alignItems: 'center',
113
+ justifyContent: 'center',
114
+ flex: 1,
115
+ width: '100%',
116
+ height: '100%',
117
+ position: 'absolute',
118
+ top: 0,
119
+ left: 0
120
+ }
121
+ });
15
122
  //# sourceMappingURL=OmnipayView.js.map
package/lib/module/components/OmnipayView.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["React","Fragment","useEffect","useOmnipay","Omnipay","phoneNumber","initiateBills"],"sourceRoot":"../../src","sources":["OmnipayView.tsx"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,EAAEC,SAAS,QAAQ,OAAO;AAClD,SAASC,UAAU,QAAQ,qBAAqB;AAOhD,OAAO,MAAMC,OAAO,GAAG,QAEU;EAAA,IAFT;IACpBC;EACU,CAAC;EACX,MAAM;IAAEC;EAAc,CAAC,GAAGH,UAAU,EAAE;EAEtCD,SAAS,CAAC,MAAM;IACZI,aAAa,CAACD,WAAW,CAAC;EAC9B,CAAC,EAAE,CAACA,WAAW,CAAC,CAAC;EAIjB,oBACI,oBAAC,QAAQ,OAEE;AAEnB,CAAC"}
1
+ {"version":3,"names":["React","Fragment","useRef","useState","StyleSheet","View","Platform","ActivityIndicator","Text","Linking","WebView","getContact","getWebHost","Omnipay","color","env","publicKey","phoneNumber","view","onEnterFullScreen","onExitFullScreen","webviewRef","webviewStatus","setWebviewStatus","webHost","webUrl","onWebviewMount","OS","postMessage","data","current","JSON","stringify","error","onWebviewMessage","e","nativeEvent","eventData","parse","dataKey","dataValue","contactDetails","openURL","includes","length","styles","full","uri","webview","webviewLoader","create","hide","display","flex","width","height","zIndex","backgroundColor","alignItems","justifyContent","position","top","left"],"sourceRoot":"../../src","sources":["OmnipayView.tsx"],"mappings":"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"}
package/lib/typescript/components/OmnipayProvider.d.ts CHANGED
@@ -7,7 +7,6 @@ declare type OmnipayProviderProps = {
7
7
  };
8
8
  export declare type OmnipayContextType = {
9
9
  initiateBills: (phoneNumber: string) => void;
10
- container?: JSX.Element;
11
10
  };
12
11
  export declare const OmnipayContext: React.Context<OmnipayContextType | null>;
13
12
  export declare const OmnipayProvider: ({ children, publicKey, env, color }: OmnipayProviderProps) => JSX.Element;
package/lib/typescript/components/OmnipayProvider.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"OmnipayProvider.d.ts","sourceRoot":"","sources":["../../../src/components/OmnipayProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAK7D,aAAK,oBAAoB,GAAG;IACxB,SAAS,EAAE,MAAM,CAAA;IACjB,GAAG,EAAE,KAAK,GAAG,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,YAAY,EAAE,CAAA;CACtD,CAAA;AAQD,oBAAY,kBAAkB,GAAG;IAC7B,aAAa,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,SAAS,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CAC1B,CAAA;AAED,eAAO,MAAM,cAAc,0CAAuD,CAAC;AAEnF,eAAO,MAAM,eAAe,wCAAyC,oBAAoB,gBAiHxF,CAAC"}
1
+ {"version":3,"file":"OmnipayProvider.d.ts","sourceRoot":"","sources":["../../../src/components/OmnipayProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAK7D,aAAK,oBAAoB,GAAG;IACxB,SAAS,EAAE,MAAM,CAAA;IACjB,GAAG,EAAE,KAAK,GAAG,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,YAAY,EAAE,CAAA;CACtD,CAAA;AAQD,oBAAY,kBAAkB,GAAG;IAC7B,aAAa,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CAChD,CAAA;AAED,eAAO,MAAM,cAAc,0CAAuD,CAAC;AAEnF,eAAO,MAAM,eAAe,wCAAyC,oBAAoB,gBA4GxF,CAAC"}
package/lib/typescript/components/OmnipayView.d.ts CHANGED
@@ -1,6 +1,12 @@
1
1
  declare type OmnipayProps = {
2
+ color: string;
3
+ env: 'dev' | 'prod';
4
+ publicKey: string;
2
5
  phoneNumber: string;
6
+ view: 'bills';
7
+ onEnterFullScreen?: () => void;
8
+ onExitFullScreen?: () => void;
3
9
  };
4
- export declare const Omnipay: ({ phoneNumber, }: OmnipayProps) => JSX.Element;
10
+ export declare const Omnipay: ({ color, env, publicKey, phoneNumber, view, onEnterFullScreen, onExitFullScreen, }: OmnipayProps) => JSX.Element;
5
11
  export {};
6
12
  //# sourceMappingURL=OmnipayView.d.ts.map
package/lib/typescript/components/OmnipayView.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"OmnipayView.d.ts","sourceRoot":"","sources":["../../../src/components/OmnipayView.tsx"],"names":[],"mappings":"AAGA,aAAK,YAAY,GAAG;IAChB,WAAW,EAAE,MAAM,CAAC;CACvB,CAAC;AAGF,eAAO,MAAM,OAAO,qBAEjB,YAAY,KAAG,WAcjB,CAAC"}
1
+ {"version":3,"file":"OmnipayView.d.ts","sourceRoot":"","sources":["../../../src/components/OmnipayView.tsx"],"names":[],"mappings":"AAYA,aAAK,YAAY,GAAG;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,KAAK,GAAG,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,OAAO,CAAC;IACd,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CACjC,CAAC;AAQF,eAAO,MAAM,OAAO,uFAQjB,YAAY,KAAG,WA8FjB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "omnipay-reactnative-sdk",
3
- "version": "0.2.9",
3
+ "version": "0.3.1",
4
4
  "description": "Omnipay react native sdk",
5
5
  "main": "lib/commonjs/index",
6
6
  "module": "lib/module/index",
@@ -152,6 +152,7 @@
152
152
  ]
153
153
  },
154
154
  "dependencies": {
155
+ "react-native-modal": "^13.0.1",
155
156
  "react-native-select-contact": "^1.6.3",
156
157
  "react-native-webview": "^11.23.1"
157
158
  }
package/src/components/OmnipayProvider.tsx CHANGED
@@ -18,25 +18,22 @@ type Status = 'error' | 'loading' | 'success';
18
18
 
19
19
  export type OmnipayContextType = {
20
20
  initiateBills: (phoneNumber: string) => void;
21
- container?: JSX.Element
22
21
  }
23
22
 
24
23
  export const OmnipayContext = React.createContext<OmnipayContextType | null>(null);
25
24
 
26
25
  export const OmnipayProvider = ({ children, publicKey, env, color }: OmnipayProviderProps) => {
27
26
  const [webviewStatus, setWebviewStatus] = useState<Status>('loading');
28
- const [useFullscreen, setUseFullScreen] = useState(false);
27
+ const [isVisible, setIsVisible] = useState(false);
29
28
  const webviewRef = useRef<WebView>(null);
30
29
  const webHost = getWebHost();
31
30
  const webviewStyle = getWebviewStyle();
32
31
  const [webviewUrl, setWebviewUrl] = useState(webHost);
33
- const isNoviewLoaded = !webviewUrl.includes("view");
34
-
35
- console.log(useFullscreen)
32
+ const showWebview = !webviewUrl.includes("view") && isVisible;
36
33
 
37
34
 
38
35
  function getWebviewStyle() {
39
- if (isNoviewLoaded) {
36
+ if (!showWebview) {
40
37
  return { opacity: 0, height: 0, width: 0, flex: 0 };
41
38
  }
42
39
  return styles.webview;
@@ -81,10 +78,10 @@ export const OmnipayProvider = ({ children, publicKey, env, color }: OmnipayProv
81
78
  Linking.openURL(dataValue);
82
79
  }
83
80
  if (dataKey === 'modalOpen') {
84
- setUseFullScreen(true)
81
+
85
82
  }
86
83
  if (dataKey === 'modalClosed') {
87
- setUseFullScreen(false)
84
+
88
85
  }
89
86
  }
90
87
  } catch (error) { }
@@ -100,38 +97,35 @@ export const OmnipayProvider = ({ children, publicKey, env, color }: OmnipayProv
100
97
  if (phoneNumber) {
101
98
  if (phoneNumber.length === 11) {
102
99
  const webUrl = `${webHost}?theme=${color}&view=bills&publicKey=${publicKey}&phoneNumber=${phoneNumber}`;
103
- setWebviewUrl(webUrl)
100
+ setWebviewUrl(webUrl);
101
+ setIsVisible(true);
104
102
  }
105
103
  }
106
104
  },
107
105
  []
108
106
  );
109
107
 
110
- function WebviewContainer() {
111
- return <View style={{ flex: 1, height: "100%" }}>
112
- <WebView
113
- source={{
114
- uri: webviewUrl,
115
- }}
116
- style={webviewStyle}
117
- injectedJavaScriptBeforeContentLoaded={onWebviewMount}
118
- onMessage={onWebviewMessage}
119
- ref={webviewRef}
120
- onLoadStart={() => setWebviewStatus("loading")}
121
- onLoadEnd={() => setWebviewStatus('success')}
122
- />
123
- {webviewStatus === 'loading' && !isNoviewLoaded && (
124
- <View style={styles.webviewLoader}>
125
- <ActivityIndicator size="small" color={color} />
126
- </View>
127
- )}
128
- </View>;
129
- }
130
-
131
108
 
132
109
  return (
133
- <OmnipayContext.Provider value={{ initiateBills: _initiateBills, container: WebviewContainer() }}>
110
+ <OmnipayContext.Provider value={{ initiateBills: _initiateBills }}>
134
111
  <View style={{ flex: 1, height: "100%" }}>
112
+ <WebView
113
+ source={{
114
+ uri: webviewUrl,
115
+ }}
116
+ style={webviewStyle}
117
+ injectedJavaScriptBeforeContentLoaded={onWebviewMount}
118
+ onMessage={onWebviewMessage}
119
+ ref={webviewRef}
120
+ onLoadStart={() => setWebviewStatus("loading")}
121
+ onLoadEnd={() => setWebviewStatus('success')}
122
+ />
123
+ {webviewStatus === 'loading' && showWebview && (
124
+ <View style={styles.webviewLoader}>
125
+ <ActivityIndicator size="small" color={color} />
126
+ </View>
127
+ )}
128
+
135
129
  {children}
136
130
  </View>
137
131
  </OmnipayContext.Provider>
package/src/components/OmnipayView.tsx CHANGED
@@ -1,28 +1,160 @@
1
- import React, { Fragment, useEffect } from 'react';
2
- import { useOmnipay } from '../hooks/useOmnipay';
1
+ import React, { Fragment, useRef, useState } from 'react';
2
+ import {
3
+ StyleSheet,
4
+ View,
5
+ Platform,
6
+ ActivityIndicator,
7
+ Text,
8
+ Linking,
9
+ } from 'react-native';
10
+ import { WebView, WebViewMessageEvent } from 'react-native-webview';
11
+ import { getContact, getWebHost } from "../functions"
3
12
 
4
13
  type OmnipayProps = {
14
+ color: string;
15
+ env: 'dev' | 'prod';
16
+ publicKey: string;
5
17
  phoneNumber: string;
18
+ view: 'bills';
19
+ onEnterFullScreen?: () => void;
20
+ onExitFullScreen?: () => void;
6
21
  };
7
22
 
23
+ type PostMessage = {
24
+ [key: string]: unknown;
25
+ };
26
+
27
+ type Status = 'error' | 'loading' | 'success';
8
28
 
9
29
  export const Omnipay = ({
30
+ color,
31
+ env,
32
+ publicKey,
10
33
  phoneNumber,
34
+ view,
35
+ onEnterFullScreen,
36
+ onExitFullScreen,
11
37
  }: OmnipayProps): JSX.Element => {
12
- const { initiateBills } = useOmnipay();
13
38
 
14
- useEffect(() => {
15
- initiateBills(phoneNumber)
16
- }, [phoneNumber]);
39
+ const webviewRef = useRef<WebView>(null);
40
+ const [webviewStatus, setWebviewStatus] = useState<Status>('loading');
41
+ const webHost = getWebHost(env);
42
+ const webUrl = `${webHost}?theme=${color}&view=${view}&publicKey=${publicKey}&phoneNumber=${phoneNumber}`;
43
+
44
+
45
+
46
+ const onWebviewMount = `
47
+ window.nativeOs = ${Platform.OS};
48
+ true;
49
+ `;
50
+
51
+ function postMessage(data: PostMessage) {
52
+ if (!webviewRef.current) {
53
+ return;
54
+ }
55
+ try {
56
+ webviewRef.current.postMessage(JSON.stringify(data));
57
+ } catch (error) { }
58
+ }
59
+
60
+ async function onWebviewMessage(e: WebViewMessageEvent) {
61
+ try {
62
+ if (e.nativeEvent && e.nativeEvent.data) {
63
+ const eventData = JSON.parse(e.nativeEvent.data);
64
+ const { dataKey, dataValue } = eventData;
65
+ if (dataKey === 'chooseContact') {
66
+ const contactDetails = await getContact();
67
+ postMessage({
68
+ dataKey: 'contactSelected',
69
+ dataValue: contactDetails,
70
+ });
71
+ }
72
+ if (dataKey === 'modalOpen') {
73
+ if (onEnterFullScreen) {
74
+ onEnterFullScreen();
75
+ }
76
+ }
77
+ if (dataKey === 'modalClosed') {
78
+ if (onExitFullScreen) {
79
+ onExitFullScreen();
80
+ }
81
+ }
82
+ if (dataKey === 'openLink') {
83
+ Linking.openURL(dataValue);
84
+ }
85
+ }
86
+ } catch (error) { }
87
+ }
17
88
 
18
89
 
90
+ if (view !== 'bills') {
91
+ return <Text>Invalid view</Text>;
92
+ }
93
+
94
+ if (!publicKey.includes('OMNIPUBKEY_')) {
95
+ return <Text>Invalid public key</Text>;
96
+ }
97
+
98
+ if (phoneNumber.length !== 11) {
99
+ return <Text>Invalid phone number</Text>;
100
+ }
101
+
102
+ if (color.length < 3) {
103
+ return <Text>Invalid color</Text>;
104
+ }
105
+
106
+ if (!['dev', 'prod'].includes(env)) {
107
+ return <Text>Invalid environment</Text>;
108
+ }
19
109
 
20
110
  return (
21
111
  <Fragment>
22
-
112
+ <View style={styles.full}>
113
+ <WebView
114
+ source={{
115
+ uri: webUrl,
116
+ }}
117
+ style={styles.webview}
118
+ injectedJavaScriptBeforeContentLoaded={onWebviewMount}
119
+ onMessage={onWebviewMessage}
120
+ ref={webviewRef}
121
+ onLoadEnd={() => setWebviewStatus('success')}
122
+ />
123
+ {webviewStatus === 'loading' && (
124
+ <View style={styles.webviewLoader}>
125
+ <ActivityIndicator size="small" color={color} />
126
+ </View>
127
+ )}
128
+ </View>
23
129
  </Fragment>
24
130
  );
25
131
  };
26
132
 
27
-
133
+ const styles = StyleSheet.create({
134
+ hide: {
135
+ display: 'none',
136
+ },
137
+ full: {
138
+ flex: 1,
139
+ width: '100%',
140
+ height: '100%',
141
+ },
142
+ webview: {
143
+ flex: 1,
144
+ width: '100%',
145
+ height: '100%',
146
+ },
147
+ webviewLoader: {
148
+ zIndex: 3,
149
+ backgroundColor: 'white',
150
+ alignItems: 'center',
151
+ justifyContent: 'center',
152
+ flex: 1,
153
+ width: '100%',
154
+ height: '100%',
155
+ position: 'absolute',
156
+ top: 0,
157
+ left: 0,
158
+ },
159
+ });
28
160