@traund/orquezta-widget-calculator 1.0.5 → 1.1.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.
@@ -1,17 +1,21 @@
1
1
  import React, { Fragment } from "react";
2
- import Grid from "@material-ui/core/Grid";
3
- import Paper from "@material-ui/core/Paper";
4
- import Typography from "@material-ui/core/Typography";
5
- import InputBase from "@material-ui/core/InputBase";
6
- import CircularProgress from "@material-ui/core/CircularProgress";
7
- import InputAdornment from "@material-ui/core/InputAdornment";
8
- import TextField from "@material-ui/core/TextField";
9
- import FormHelperText from "@material-ui/core/FormHelperText";
2
+ import {
3
+ Button,
4
+ Container,
5
+ Typography,
6
+ Box,
7
+ Alert,
8
+ Paper,
9
+ InputBase,
10
+ CircularProgress,
11
+ InputAdornment,
12
+ TextField,
13
+ FormHelperText,
14
+ Autocomplete
15
+ } from '@mui/material';
16
+ import Grid from '@mui/material/Grid2';
10
17
  import FlagsHelpers from "./../helpers/flagsHelpers";
11
-
12
- import { Autocomplete } from "@material-ui/lab";
13
18
  import { matchSorter } from "match-sorter";
14
-
15
19
  import componentStyles from "./componentStyles";
16
20
 
17
21
  const filterOptions = (options, { inputValue }) => {
@@ -44,7 +48,7 @@ const InputAmount = (props) => {
44
48
  return (
45
49
  <>
46
50
  <Grid container direction="column" spacing={0}>
47
- <Grid item xs={12}>
51
+ <Grid size={{ xs: 12}}>
48
52
  <Typography
49
53
  style={classes.labelAmount}
50
54
  gutterBottom
@@ -54,9 +58,9 @@ const InputAmount = (props) => {
54
58
  {labels[id]}
55
59
  </Typography>
56
60
  </Grid>
57
- <Grid item xs={12}>
61
+ <Grid size={{ xs: 12}}>
58
62
  <Grid container>
59
- <Grid item xs={5}>
63
+ <Grid size={{ xs: 5}}>
60
64
  <Paper style={classes.inputAmount}>
61
65
  <InputBase
62
66
  id={id}
@@ -80,7 +84,7 @@ const InputAmount = (props) => {
80
84
  />
81
85
  </Paper>
82
86
  </Grid>
83
- <Grid item xs={7}>
87
+ <Grid size={{ xs: 5}}>
84
88
  <Autocomplete
85
89
  disabled={user.isLoading || user.isDisabled}
86
90
  options={transferOptions}
@@ -92,26 +96,34 @@ const InputAmount = (props) => {
92
96
  fontSize: 18,
93
97
  },
94
98
  }}
95
- filterOptions={filterOptions}
96
- value={
97
- transferOptions.find(x => x.code == selectedOption.code)
98
- }
99
+ isOptionEqualToValue={(option, value) => option.code === value?.code}
100
+ value={selectedOption ? transferOptions.find(x => x.code === selectedOption.code) || null : null}
99
101
  autoHighlight
100
- getOptionLabel={(option) =>
101
- `${option?.currency || ""}`
102
- }
103
- renderOption={(option) => (
104
- <Fragment>
105
- <span style={{ marginRight: "5px" }}>
106
- <FlagsHelpers code={option.code == "PE-USD" ? "PE" : option.code} />
107
- </span>
108
- {" "}
109
- {option?.currency || ""}
110
- </Fragment>
111
- )}
102
+ getOptionLabel={(option) => {
103
+ if (!option) return '';
104
+ if (typeof option === 'string') return option;
105
+ if (typeof option.currency === 'string') return option.currency;
106
+ return '';
107
+ }}
108
+ renderOption={(props, option) => {
109
+ if (!option) return null;
110
+ const { key, ...restProps } = props;
111
+ const code = option.code || 'unknown';
112
+ const currency = option.currency || '';
113
+ const flagCode = code === "PE-USD" ? "PE" : code;
114
+
115
+ return (
116
+ <Box component="li" key={`${code}-${currency}`} {...restProps}>
117
+ <span style={{ marginRight: "5px" }}>
118
+ <FlagsHelpers code={flagCode} />
119
+ </span>
120
+ {currency}
121
+ </Box>
122
+ );
123
+ }}
112
124
  disableClearable
113
125
  renderInput={(params) => (
114
- <Paper variant="outlined" style={classes.rootFlags} >
126
+ <Paper variant="outlined" style={classes.rootFlags}>
115
127
  <TextField
116
128
  style={{ fontSize: "15px" }}
117
129
  {...params}
@@ -120,23 +132,20 @@ const InputAmount = (props) => {
120
132
  ...params.InputProps,
121
133
  startAdornment: (
122
134
  <FlagsHelpers
123
- code={selectedOption.code == "PE-USD" ?
124
- "PE" :
125
- selectedOption.code
126
- }>
127
- </FlagsHelpers>
135
+ code={selectedOption.code == "PE-USD" ? "PE" : selectedOption.code}
136
+ />
128
137
  ),
129
138
  disableUnderline: true,
130
139
  }}
131
140
  />
132
141
  </Paper>
133
142
  )}
134
- onChange={onChangeCountry}
143
+ onChange={(event, value) => onChangeCountry && onChangeCountry(event, value)}
135
144
  />
136
145
  </Grid>
137
146
  </Grid>
138
147
  </Grid>
139
- <Grid item xs={12}>
148
+ <Grid size={{ xs: 12}}>
140
149
  {!user.isLoading && !user.isDisabled && (
141
150
  <FormHelperText style={{ color: "red" }}>
142
151
  {(user.amount < user.minAmount &&
@@ -1,5 +1,5 @@
1
- import { Grid, Select } from "@material-ui/core";
2
- import MenuItem from "@material-ui/core/MenuItem"
1
+ import { Grid, Select, MenuItem } from "@mui/material";
2
+
3
3
  import { useEffect, useState } from "react";
4
4
 
5
5
  const PaymentMethodSelector = ({ paymentMethods, onChange }) => {
@@ -16,7 +16,7 @@ const PaymentMethodSelector = ({ paymentMethods, onChange }) => {
16
16
  }, [paymentMethods])
17
17
 
18
18
  return <Grid container>
19
- <Grid item xs={12}>
19
+ <Grid size={{ xs: 12}}>
20
20
  {paymentMethods && (<Grid item xs={12} >
21
21
  <Select
22
22
  id="demo-customized-select-native"
@@ -28,7 +28,7 @@ const PaymentMethodSelector = ({ paymentMethods, onChange }) => {
28
28
  {paymentMethods &&
29
29
  paymentMethods.filter(e => e.id != "trc20").map((payment, index) => (
30
30
  <MenuItem key={payment.name + index} value={payment.id}>
31
- {payment.label} {/* ({payment.currency}) */}
31
+ {payment.label}
32
32
  </MenuItem>
33
33
  ))}
34
34
  </Select>
@@ -1,6 +1,9 @@
1
- import { makeStyles } from "@material-ui/core";
1
+ import { styled } from '@mui/material/styles';
2
+ import { createTheme } from '@mui/material/styles';
2
3
 
3
- export const simulatorStyles = makeStyles((theme) => ({
4
+ // Crear un tema para usar con makeStyles
5
+ const theme = createTheme();
6
+ export const simulatorStyles = styled((theme) => ({
4
7
  // 'input[type=number]::-webkit-outer-spin-button': {
5
8
  // '-webkit-appearance': 'none',
6
9
  // margin: 0
@@ -1,7 +1,5 @@
1
- import React from "react";
2
- import Grid from "@material-ui/core/Grid";
3
- import Alert from "@material-ui/lab/Alert";
4
-
1
+ import React from "react";;
2
+ import { Alert, Grid } from '@mui/material';
5
3
  class TaxFeeAlert extends React.Component {
6
4
  constructor(props) {
7
5
  super(props);
@@ -26,7 +24,7 @@ class TaxFeeAlert extends React.Component {
26
24
  return (
27
25
  <Grid container spacing={3}>
28
26
  {taxFee > 0 && (
29
- <Grid item xs={12}>
27
+ <Grid size={{ xs: 12}}>
30
28
  <Alert severity="info">{alertMessage}</Alert>
31
29
  </Grid>
32
30
  )}
@@ -9,7 +9,7 @@ const loadFirebaseDB = (testMode = 'production', externalConfig = null) => {
9
9
  if (externalConfig && externalConfig.provider) {
10
10
  firebaseConfig = externalConfig.provider;
11
11
  } else {
12
- return console.error('No Firebase configuration provided');
12
+ firebaseConfig = BACKEND_SETTINGS[testMode].FIREBASE;
13
13
  }
14
14
 
15
15
  if (firebase.apps.length === 0) {
package/src/index.js CHANGED
@@ -1,18 +1,36 @@
1
+ import React from 'react';
2
+ import { ThemeProvider } from '@mui/material/styles';
3
+ import CssBaseline from '@mui/material/CssBaseline';
4
+ import theme from './theme';
1
5
  import Calculator from "./calculatorV2";
2
6
  import Simulator from "./simulator";
7
+ //import ModernCalculator from './calculate';
8
+ // Componente de orden superior para proveer el tema
9
+ const withThemeProvider = (WrappedComponent) => {
10
+ return function WithThemeProvider(props) {
11
+ return (
12
+ <ThemeProvider theme={theme}>
13
+ <CssBaseline />
14
+ <WrappedComponent {...props} />
15
+ </ThemeProvider>
16
+ );
17
+ };
18
+ };
3
19
 
4
20
  function WrappedSimulator(props) {
5
- return <Simulator
6
- testMode={props.testMode}
7
- locale={props.locale}
8
- appUrl={props.appUrl}
9
- startUrl={props.startUrl}
10
- onlyView={props.onlyView ?? false}
11
- initialCountryTo={props.initialCountryTo ?? "PE-USD"}
12
- reference={props.reference || ""}
13
- secretKey={props.secretKey || ""}
14
- config={props.config}
15
- />;
21
+ return (
22
+ <Simulator
23
+ testMode={props.testMode}
24
+ locale={props.locale}
25
+ appUrl={props.appUrl}
26
+ startUrl={props.startUrl}
27
+ onlyView={props.onlyView ?? false}
28
+ initialCountryTo={props.initialCountryTo ?? "PE-USD"}
29
+ reference={props.reference || ""}
30
+ secretKey={props.secretKey || ""}
31
+ config={props.config}
32
+ />
33
+ );
16
34
  }
17
35
 
18
36
  function WrappedCalculator(props) {
@@ -30,4 +48,11 @@ function WrappedCalculator(props) {
30
48
  );
31
49
  }
32
50
 
33
- export { WrappedCalculator, WrappedSimulator };
51
+
52
+
53
+
54
+ const WrappedCalculatorWithTheme = withThemeProvider(WrappedCalculator);
55
+ const WrappedSimulatorWithTheme = withThemeProvider(WrappedSimulator);
56
+
57
+
58
+ export { WrappedCalculatorWithTheme as WrappedCalculator, WrappedSimulatorWithTheme as WrappedSimulator};
@@ -14,4 +14,3 @@ export const SimulatorMode = Object.freeze({
14
14
  COLLECT: "COLLECT"
15
15
  });
16
16
 
17
-
package/src/simulator.js CHANGED
@@ -1,9 +1,24 @@
1
- import React, { useState, useEffect, useCallback, useRef } from "react";
2
- import Grid from "@material-ui/core/Grid";
3
- import Paper from "@material-ui/core/Paper";
4
- import Typography from "@material-ui/core/Typography";
5
- import Chip from "@material-ui/core/Chip";
6
- import Button from "@material-ui/core/Button";
1
+ import React, { useState, useEffect, useCallback, useRef, Fragment } from "react";
2
+
3
+ import {
4
+ Button,
5
+ Container,
6
+ Typography,
7
+ Box,
8
+ Alert,
9
+ Paper,
10
+ InputBase,
11
+ CircularProgress,
12
+ InputAdornment,
13
+ TextField,
14
+ FormHelperText,
15
+ NativeSelect,
16
+ Tooltip,
17
+ Divider,
18
+ Chip,
19
+ Autocomplete
20
+ } from '@mui/material';
21
+ import Grid from '@mui/material/Grid2';
7
22
  import en from "./locale/en";
8
23
  import es from "./locale/es";
9
24
  import loadFirebaseDB from "./firebase.config";
@@ -22,7 +37,6 @@ import PaymentMethodSelector from "./components/paymentMethodSelector";
22
37
  import { simulatorStyles } from "./components/simulatorStyles";
23
38
  import { countries } from "./data/countries";
24
39
  import { applyTaxDiscount } from "./helpers/taxDiscount";
25
- import { Divider } from "@material-ui/core";
26
40
  const useStyles = simulatorStyles;
27
41
 
28
42
  function Simulator(props) {
@@ -906,7 +920,7 @@ function Simulator(props) {
906
920
  cleanSimulationMode(storeId, simulatorMode, sender?.selectedOption?.type, sender?.selectedOption?.code, sender?.amount, receiver?.selectedOption?.code, sender?.currency, receiver?.currency);
907
921
  }, [simulatorMode])
908
922
 
909
- return <main>
923
+ return <Fragment>
910
924
  <link
911
925
  href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap"
912
926
  rel="stylesheet"
@@ -922,9 +936,9 @@ function Simulator(props) {
922
936
  direction="row"
923
937
  justifyContent="center"
924
938
  alignItems="center"
925
- style={{ paddingBottom: "10px" }}
939
+ sx={{ paddingBottom: "10px" }}
926
940
  >
927
- <Grid item>
941
+ <Grid size="grow">
928
942
  <Typography
929
943
  className={classes.labelAmount}
930
944
  gutterBottom
@@ -941,11 +955,11 @@ function Simulator(props) {
941
955
  direction="row"
942
956
  justifyContent="center"
943
957
  alignItems="center"
944
- style={{ paddingBottom: "10px" }}
958
+ sx={{ paddingBottom: "10px" }}
945
959
  >
946
- <Grid item xs={9}>
960
+ <Grid size={{ xs: 9}}>
947
961
  <Grid container spacing={3} justifyContent="center">
948
- <Grid item>
962
+ <Grid size="grow">
949
963
  <Chip
950
964
  className={(simulatorMode === SimulatorMode.SEND ? classes.chipOptionChecked : classes.chipOptionUnchecked)}
951
965
  label={content.simulator.header_chips.option_send}
@@ -953,7 +967,7 @@ function Simulator(props) {
953
967
  onClick={() => { handleSimulatorMode(SimulatorMode.SEND) }}
954
968
  />
955
969
  </Grid>
956
- <Grid item>
970
+ <Grid size="grow">
957
971
  <Chip
958
972
  className={(simulatorMode === SimulatorMode.COLLECT ? classes.chipOptionChecked : classes.chipOptionUnchecked)}
959
973
  label={content.simulator.header_chips.option_receive}
@@ -965,9 +979,9 @@ function Simulator(props) {
965
979
  </Grid>
966
980
  </Grid>
967
981
  {(simulatorMode === SimulatorMode.SEND) ?
968
- <Grid item xs={12}>
982
+ <Grid size={{ xs: 12}}>
969
983
  <Grid container>
970
- <Grid item xs={12} style={{ paddingBottom: "15px" }}>
984
+ <Grid size={{ xs: 12}} >
971
985
  <InputAmount
972
986
  id="transfer-sender"
973
987
  content={content}
@@ -977,7 +991,7 @@ function Simulator(props) {
977
991
  />
978
992
  </Grid>
979
993
  {!sender.isLoading && !receiver.isLoading &&
980
- <Grid item xs={12}>
994
+ <Grid size={{ xs: 12}}>
981
995
  <Fees
982
996
  content={content}
983
997
  details={transferDetail}
@@ -987,7 +1001,7 @@ function Simulator(props) {
987
1001
  />
988
1002
  </Grid>}
989
1003
  {(sender.selectedOption.type == TransferType.COUNTRY) ?
990
- <Grid item xs={12} style={{ paddingBottom: "15px" }}>
1004
+ <Grid size={{ xs: 12}} >
991
1005
 
992
1006
  <InputAmount
993
1007
  id="transfer-receiver"
@@ -999,7 +1013,7 @@ function Simulator(props) {
999
1013
  />
1000
1014
 
1001
1015
  </Grid> :
1002
- <Grid item xs={12} style={{ paddingBottom: "15px" }}>
1016
+ <Grid size={{ xs: 12}} >
1003
1017
 
1004
1018
  <InputAmount
1005
1019
  id="wallet-receiver"
@@ -1016,9 +1030,9 @@ function Simulator(props) {
1016
1030
  </Grid> : ""
1017
1031
  }
1018
1032
  {(simulatorMode === SimulatorMode.COLLECT) ?
1019
- <Grid item xs={12}>
1033
+ <Grid size={{ xs: 12}}>
1020
1034
  <Grid container>
1021
- <Grid item xs={12} style={{ paddingBottom: "15px" }}>
1035
+ <Grid size={{ xs: 12}} >
1022
1036
  <InputAmount
1023
1037
  id="collect-sender"
1024
1038
  content={content}
@@ -1027,7 +1041,7 @@ function Simulator(props) {
1027
1041
  onChangeCountry={handleSendCountry}
1028
1042
  />
1029
1043
  </Grid>
1030
- {!sender.isLoading && !receiver.isLoading && <Grid item xs={12}>
1044
+ {!sender.isLoading && !receiver.isLoading && <Grid size={{ xs: 12}}>
1031
1045
  <Fees
1032
1046
  content={content}
1033
1047
  details={transferDetail}
@@ -1036,7 +1050,7 @@ function Simulator(props) {
1036
1050
  locale={locale}
1037
1051
  />
1038
1052
  </Grid>}
1039
- <Grid item xs={12} style={{ paddingBottom: "15px" }}>
1053
+ <Grid size={{ xs: 12}} >
1040
1054
  <InputAmount
1041
1055
  id="collect-receiver"
1042
1056
  content={content}
@@ -1052,12 +1066,12 @@ function Simulator(props) {
1052
1066
 
1053
1067
  {
1054
1068
  (["VE", "AR"].includes(receiver.selectedOption.code) && !receiver.isLoading) &&
1055
- <Grid item xs={12} style={{ marginTop: 15, marginBottom: 15 }}>
1069
+ <Grid size={{ xs: 12}} >
1056
1070
  <PaymentMethodSelector paymentMethods={receiver.paymentMethods} onChange={handleOnchangePaymentMethod} />
1057
1071
  </Grid>
1058
1072
  }
1059
1073
 
1060
- {!props.onlyView && <Grid item xs={12} style={{ marginBottom: 15 }}>
1074
+ {!props.onlyView && <Grid size={{ xs: 12}} >
1061
1075
  <Disclaimers
1062
1076
  simulatorMode={simulatorMode}
1063
1077
  transferType={sender.selectedOption.type}
@@ -1066,34 +1080,34 @@ function Simulator(props) {
1066
1080
  option={sender.selectedOption}
1067
1081
  />
1068
1082
  </Grid>}
1069
- {!props.onlyView && <Grid item xs={12}>
1083
+ {!props.onlyView && <Grid size={{ xs: 12}} sx={{marginTop: "15px",marginBottom: "15px"}}>
1070
1084
  <Button className={classes.button} variant="contained" onClick={handleNext}
1071
1085
  disabled={sender.isLoading || receiver.isLoading || isOutOfLimits()} fullWidth>
1072
1086
  {content.simulator.footer_action_button}
1073
1087
  </Button>
1074
1088
  </Grid>}
1075
- <Grid item xs={12} style={{ marginTop: 15, marginBottom: 15, textAlign: "center" }}>
1089
+ <Grid size={{ xs: 12}} sx={{ textAlign: "center",marginTop: "15px" }}>
1076
1090
  {(recalculate && sender.selectedOption.type != TransferType.WALLET) && <Timer onTimeout={calculateAgain} locale={locale} />}
1077
1091
  </Grid>
1078
- <Grid item xs={12} style={{ marginTop: "30px" }}>
1092
+ <Grid size={{ xs: 12}} sx={{marginTop: "60px"}}>
1079
1093
  <Divider ></Divider>
1080
1094
  </Grid>
1081
- <Grid item xs={12} container
1095
+ <Grid size={{ xs: 12}} container
1082
1096
  direction="row"
1083
1097
  justifyContent="center"
1084
1098
  alignItems="center"
1085
- style={{ paddingBottom: "10px", }} >
1099
+ sx={{ paddingBottom: "10px"}} >
1086
1100
  <Typography
1087
1101
  variant="subtitle1"
1088
- style={{ display: "flex", alignItems: "center", textAlign: "center" }}
1102
+ sx={{ display: "flex", alignItems: "center", textAlign: "center" }}
1089
1103
  >
1090
- <span style={{ fontSize: "10px", textAlign: "center" }}>Powered by&nbsp;</span>
1091
- <span style={{ fontWeight: "bold", fontSize: "12px", textAlign: "center" }}>Orquezta</span>
1104
+ <span sx={{ fontSize: "10px", textAlign: "center" }}>Powered by&nbsp;</span>
1105
+ <span sx={{ fontWeight: "bold", fontSize: "12px", textAlign: "center" }}>Orquezta</span>
1092
1106
  </Typography>
1093
1107
  </Grid>
1094
1108
  </Grid>
1095
1109
  </Paper>
1096
- </main>;
1110
+ </Fragment>;
1097
1111
  }
1098
1112
 
1099
1113
  export default Simulator;
package/src/theme.js ADDED
@@ -0,0 +1,99 @@
1
+ import { createTheme } from '@mui/material/styles';
2
+
3
+ const theme = createTheme({
4
+ palette: {
5
+ primary: {
6
+ main: '#1976d2',
7
+ light: '#42a5f5',
8
+ dark: '#1565c0',
9
+ contrastText: '#fff',
10
+ },
11
+ secondary: {
12
+ main: '#9c27b0',
13
+ light: '#ba68c8',
14
+ dark: '#7b1fa2',
15
+ contrastText: '#fff',
16
+ },
17
+ error: {
18
+ main: '#d32f2f',
19
+ light: '#ef5350',
20
+ dark: '#c62828',
21
+ contrastText: '#fff',
22
+ },
23
+ warning: {
24
+ main: '#ed6c02',
25
+ light: '#ff9800',
26
+ dark: '#e65100',
27
+ contrastText: '#fff',
28
+ },
29
+ info: {
30
+ main: '#0288d1',
31
+ light: '#03a9f4',
32
+ dark: '#01579b',
33
+ contrastText: '#fff',
34
+ },
35
+ success: {
36
+ main: '#2e7d32',
37
+ light: '#4caf50',
38
+ dark: '#1b5e20',
39
+ contrastText: '#fff',
40
+ },
41
+ background: {
42
+ default: '#f5f5f5',
43
+ paper: '#fff',
44
+ },
45
+ },
46
+ typography: {
47
+ fontFamily: [
48
+ 'Poppins',
49
+ '-apple-system',
50
+ 'BlinkMacSystemFont',
51
+ '"Segoe UI"',
52
+ 'Roboto',
53
+ '"Helvetica Neue"',
54
+ 'Arial',
55
+ 'sans-serif',
56
+ '"Apple Color Emoji"',
57
+ '"Segoe UI Emoji"',
58
+ '"Segoe UI Symbol"',
59
+ ].join(','),
60
+ h1: {
61
+ fontWeight: 500,
62
+ fontSize: '2.5rem',
63
+ lineHeight: 1.2,
64
+ },
65
+ h2: {
66
+ fontWeight: 500,
67
+ fontSize: '2rem',
68
+ lineHeight: 1.2,
69
+ },
70
+ button: {
71
+ textTransform: 'none',
72
+ },
73
+ },
74
+ shape: {
75
+ borderRadius: 4,
76
+ },
77
+ components: {
78
+ MuiButton: {
79
+ defaultProps: {
80
+ disableElevation: true,
81
+ },
82
+ styleOverrides: {
83
+ root: {
84
+ textTransform: 'none',
85
+ fontWeight: 600,
86
+ },
87
+ },
88
+ },
89
+ MuiAppBar: {
90
+ styleOverrides: {
91
+ root: {
92
+ boxShadow: 'none',
93
+ },
94
+ },
95
+ },
96
+ },
97
+ });
98
+
99
+ export default theme;