@traund/orquezta-widget-calculator 1.0.4 → 1.1.0

package/src/components/inputAmount.js

@@ -1,17 +1,21 @@
 import React, { Fragment } from "react";
-import Grid from "@material-ui/core/Grid";
-import Paper from "@material-ui/core/Paper";
-import Typography from "@material-ui/core/Typography";
-import InputBase from "@material-ui/core/InputBase";
-import CircularProgress from "@material-ui/core/CircularProgress";
-import InputAdornment from "@material-ui/core/InputAdornment";
-import TextField from "@material-ui/core/TextField";
-import FormHelperText from "@material-ui/core/FormHelperText";
+import {
+  Button,
+  Container,
+  Typography,
+  Box,
+  Alert,
+  Paper,
+  InputBase,
+  CircularProgress,
+  InputAdornment,
+  TextField,
+  FormHelperText,
+  Autocomplete
+} from '@mui/material';
+import Grid from '@mui/material/Grid2';
 import FlagsHelpers from "./../helpers/flagsHelpers";
-
-import { Autocomplete } from "@material-ui/lab";
 import { matchSorter } from "match-sorter";
-
 import componentStyles from "./componentStyles";
 
 const filterOptions = (options, { inputValue }) => {
@@ -44,7 +48,7 @@ const InputAmount = (props) => {
     return (
         <>
             <Grid container direction="column" spacing={0}>
-                <Grid item xs={12}>
+                <Grid size={{ xs: 12}}>
                     <Typography
                         style={classes.labelAmount}
                         gutterBottom
@@ -54,9 +58,9 @@ const InputAmount = (props) => {
                         {labels[id]}
                     </Typography>
                 </Grid>
-                <Grid item xs={12}>
+                <Grid size={{ xs: 12}}>
                     <Grid container>
-                        <Grid item xs={5}>
+                        <Grid size={{ xs: 5}}>
                             <Paper style={classes.inputAmount}>
                                 <InputBase
                                     id={id}
@@ -80,7 +84,7 @@ const InputAmount = (props) => {
                                 />
                             </Paper>
                         </Grid>
-                        <Grid item xs={7}>
+                        <Grid size={{ xs: 5}}>
                             <Autocomplete
                                 disabled={user.isLoading || user.isDisabled}
                                 options={transferOptions}
@@ -92,26 +96,34 @@ const InputAmount = (props) => {
                                         fontSize: 18,
                                     },
                                 }}
-                                filterOptions={filterOptions}
-                                value={
-                                    transferOptions.find(x => x.code == selectedOption.code)
-                                }
+                                isOptionEqualToValue={(option, value) => option.code === value?.code}
+                                value={selectedOption ? transferOptions.find(x => x.code === selectedOption.code) || null : null}
                                 autoHighlight
-                                getOptionLabel={(option) =>
-                                    `${option?.currency || ""}`
-                                }
-                                renderOption={(option) => (
-                                    <Fragment>
-                                        <span style={{ marginRight: "5px" }}>
-                                            <FlagsHelpers code={option.code == "PE-USD" ? "PE" : option.code} />
-                                        </span>
-                                        {" "}
-                                        {option?.currency || ""}
-                                    </Fragment>
-                                )}
+                                getOptionLabel={(option) => {
+                                    if (!option) return '';
+                                    if (typeof option === 'string') return option;
+                                    if (typeof option.currency === 'string') return option.currency;
+                                    return '';
+                                }}
+                                renderOption={(props, option) => {
+                                    if (!option) return null;
+                                    const { key, ...restProps } = props;
+                                    const code = option.code || 'unknown';
+                                    const currency = option.currency || '';
+                                    const flagCode = code === "PE-USD" ? "PE" : code;
+                                    
+                                    return (
+                                        <Box component="li" key={`${code}-${currency}`} {...restProps}>
+                                            <span style={{ marginRight: "5px" }}>
+                                                <FlagsHelpers code={flagCode} />
+                                            </span>
+                                            {currency}
+                                        </Box>
+                                    );
+                                }}
                                 disableClearable
                                 renderInput={(params) => (
-                                    <Paper variant="outlined" style={classes.rootFlags} >
+                                    <Paper variant="outlined" style={classes.rootFlags}>
                                         <TextField
                                             style={{ fontSize: "15px" }}
                                             {...params}
@@ -120,23 +132,20 @@ const InputAmount = (props) => {
                                                 ...params.InputProps,
                                                 startAdornment: (
                                                     <FlagsHelpers
-                                                        code={selectedOption.code == "PE-USD" ?
-                                                            "PE" :
-                                                            selectedOption.code
-                                                        }>
-                                                    </FlagsHelpers>
+                                                        code={selectedOption.code == "PE-USD" ? "PE" : selectedOption.code}
+                                                    />
                                                 ),
                                                 disableUnderline: true,
                                             }}
                                         />
                                     </Paper>
                                 )}
-                                onChange={onChangeCountry}
+                                onChange={(event, value) => onChangeCountry && onChangeCountry(event, value)}
                             />
                         </Grid>
                     </Grid>
                 </Grid>
-                <Grid item xs={12}>
+                <Grid size={{ xs: 12}}>
                     {!user.isLoading && !user.isDisabled && (
                         <FormHelperText style={{ color: "red" }}>
                             {(user.amount < user.minAmount &&

package/src/components/paymentMethodSelector.jsx

@@ -1,5 +1,5 @@
-import { Grid, Select } from "@material-ui/core";
-import MenuItem from "@material-ui/core/MenuItem"
+import { Grid, Select, MenuItem } from "@mui/material";
+
 import { useEffect, useState } from "react";
 
 const PaymentMethodSelector = ({ paymentMethods, onChange }) => {
@@ -16,7 +16,7 @@ const PaymentMethodSelector = ({ paymentMethods, onChange }) => {
     }, [paymentMethods])
 
     return <Grid container>
-        <Grid item xs={12}>
+        <Grid size={{ xs: 12}}>
             {paymentMethods && (<Grid item xs={12}  >
                 <Select
                     id="demo-customized-select-native"
@@ -28,7 +28,7 @@ const PaymentMethodSelector = ({ paymentMethods, onChange }) => {
                     {paymentMethods &&
                         paymentMethods.filter(e => e.id != "trc20").map((payment, index) => (
                             <MenuItem key={payment.name + index} value={payment.id}>
-                                {payment.label} {/*  ({payment.currency}) */}
+                                {payment.label} 
                             </MenuItem>
                         ))}
                 </Select>

package/src/components/simulatorStyles.js

@@ -1,6 +1,9 @@
-import { makeStyles } from "@material-ui/core";
+import { styled } from '@mui/material/styles';
+import { createTheme } from '@mui/material/styles';
 
-export const simulatorStyles = makeStyles((theme) => ({
+// Crear un tema para usar con makeStyles
+const theme = createTheme();
+export const simulatorStyles = styled((theme) => ({
     // 'input[type=number]::-webkit-outer-spin-button': {
     //     '-webkit-appearance': 'none',
     //     margin: 0

package/src/components/taxFeeAlert.js

@@ -1,7 +1,5 @@
-import React from "react";
-import Grid from "@material-ui/core/Grid";
-import Alert from "@material-ui/lab/Alert";
-
+import React from "react";;
+import {  Alert, Grid } from '@mui/material';
 class TaxFeeAlert extends React.Component {
     constructor(props) {
         super(props);
@@ -26,7 +24,7 @@ class TaxFeeAlert extends React.Component {
         return (
             <Grid container spacing={3}>
                 {taxFee > 0 && (
-                    <Grid item xs={12}>
+                    <Grid size={{ xs: 12}}>
                         <Alert severity="info">{alertMessage}</Alert>
                     </Grid>
                 )}

package/src/core/signature.js

@@ -24,9 +24,8 @@ export function generateSignature(secretKey, params) {
   };
 }
 
-export function getSignatureHeader(method, url, body = null, apikey = null) {
+export function getSignatureHeader(method, url, body = null, apikey = null, secretKey = null) {
     const referenceApiKey = apikey ;
-    const secretKey = process.env.NEXT_PUBLIC_STAGING_APIKEY;
     const signatureParams = {
         method: method,
         url: url,

package/src/firebase.config.js

@@ -9,7 +9,7 @@ const loadFirebaseDB = (testMode = 'production', externalConfig = null) => {
         if (externalConfig && externalConfig.provider) {
             firebaseConfig = externalConfig.provider;
         } else {
-            return console.error('No Firebase configuration provided');
+            firebaseConfig = BACKEND_SETTINGS[testMode].FIREBASE;
         }
         
         if (firebase.apps.length === 0) {

package/src/index.js

@@ -1,17 +1,36 @@
+import React from 'react';
+import { ThemeProvider } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import theme from './theme';
 import Calculator from "./calculatorV2";
 import Simulator from "./simulator";
+//import ModernCalculator from './calculate';
+// Componente de orden superior para proveer el tema
+const withThemeProvider = (WrappedComponent) => {
+  return function WithThemeProvider(props) {
+    return (
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        <WrappedComponent {...props} />
+      </ThemeProvider>
+    );
+  };
+};
 
 function WrappedSimulator(props) {
-    return <Simulator
-        testMode={props.testMode}
-        locale={props.locale}
-        appUrl={props.appUrl}
-        startUrl={props.startUrl}
-        onlyView={props.onlyView ?? false}
-        initialCountryTo={props.initialCountryTo ?? "PE-USD"}
-        reference={props.reference || ""}
-        config={props.config}
-    />;
+    return (
+        <Simulator
+            testMode={props.testMode}
+            locale={props.locale}
+            appUrl={props.appUrl}
+            startUrl={props.startUrl}
+            onlyView={props.onlyView ?? false}
+            initialCountryTo={props.initialCountryTo ?? "PE-USD"}
+            reference={props.reference || ""}
+            secretKey={props.secretKey || ""}
+            config={props.config}
+        />
+    );
 }
 
 function WrappedCalculator(props) {
@@ -23,9 +42,17 @@ function WrappedCalculator(props) {
             couponCode={props.couponCode || ""}
             onlySimulation={props.onlySimulation ?? false}
             reference={props.reference || ""}
+            secretKey={props.secretKey || ""}
             config={props.config}
         />
     );
 }
 
-export { WrappedCalculator, WrappedSimulator };
+
+
+
+const WrappedCalculatorWithTheme = withThemeProvider(WrappedCalculator);
+const WrappedSimulatorWithTheme = withThemeProvider(WrappedSimulator);
+
+
+export {   WrappedCalculatorWithTheme as WrappedCalculator, WrappedSimulatorWithTheme as  WrappedSimulator};

package/src/model/enums.js

@@ -14,4 +14,3 @@ export const SimulatorMode = Object.freeze({
     COLLECT: "COLLECT"
 });
 
-

package/src/simulator.js

@@ -1,9 +1,24 @@
-import React, { useState, useEffect, useCallback, useRef } from "react";
-import Grid from "@material-ui/core/Grid";
-import Paper from "@material-ui/core/Paper";
-import Typography from "@material-ui/core/Typography";
-import Chip from "@material-ui/core/Chip";
-import Button from "@material-ui/core/Button";
+import React, { useState, useEffect, useCallback, useRef, Fragment } from "react";
+
+import {
+  Button,
+  Container,
+  Typography,
+  Box,
+  Alert,
+  Paper,
+  InputBase,
+  CircularProgress,
+  InputAdornment,
+  TextField,
+  FormHelperText,
+  NativeSelect,
+  Tooltip,
+  Divider,
+  Chip,
+  Autocomplete
+} from '@mui/material';
+import Grid from '@mui/material/Grid2';
 import en from "./locale/en";
 import es from "./locale/es";
 import loadFirebaseDB from "./firebase.config";
@@ -22,7 +37,6 @@ import PaymentMethodSelector from "./components/paymentMethodSelector";
 import { simulatorStyles } from "./components/simulatorStyles";
 import { countries } from "./data/countries";
 import { applyTaxDiscount } from "./helpers/taxDiscount";
-import { Divider } from "@material-ui/core";
 const useStyles = simulatorStyles;
 
 function Simulator(props) {
@@ -35,7 +49,7 @@ function Simulator(props) {
 
     const __ENDPOINTS = new Endpoints(props.testMode, props.config);
     const __calculateHelper = new CalculateHelper(props.testMode, props.config);
-    const __operationsHelper = new OperationsHelper(props.testMode, props.reference,props.config);
+    const __operationsHelper = new OperationsHelper(props.testMode, props.reference,props.config, props.secretKey);
 
     const __firebase = loadFirebaseDB(props.testMode, props.config);
 
@@ -906,7 +920,7 @@ function Simulator(props) {
         cleanSimulationMode(storeId, simulatorMode, sender?.selectedOption?.type, sender?.selectedOption?.code, sender?.amount, receiver?.selectedOption?.code, sender?.currency, receiver?.currency);
     }, [simulatorMode])
 
-    return <main>
+    return <Fragment>
         <link
             href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap"
             rel="stylesheet"
@@ -922,9 +936,9 @@ function Simulator(props) {
                     direction="row"
                     justifyContent="center"
                     alignItems="center"
-                    style={{ paddingBottom: "10px" }}
+                    sx={{ paddingBottom: "10px" }}
                 >
-                    <Grid item>
+                    <Grid size="grow">
                         <Typography
                             className={classes.labelAmount}
                             gutterBottom
@@ -941,11 +955,11 @@ function Simulator(props) {
                     direction="row"
                     justifyContent="center"
                     alignItems="center"
-                    style={{ paddingBottom: "10px" }}
+                    sx={{ paddingBottom: "10px" }}
                 >
-                    <Grid item xs={9}>
+                    <Grid size={{ xs: 9}}>
                         <Grid container spacing={3} justifyContent="center">
-                            <Grid item>
+                            <Grid size="grow">
                                 <Chip
                                     className={(simulatorMode === SimulatorMode.SEND ? classes.chipOptionChecked : classes.chipOptionUnchecked)}
                                     label={content.simulator.header_chips.option_send}
@@ -953,7 +967,7 @@ function Simulator(props) {
                                     onClick={() => { handleSimulatorMode(SimulatorMode.SEND) }}
                                 />
                             </Grid>
-                            <Grid item>
+                            <Grid size="grow">
                                 <Chip
                                     className={(simulatorMode === SimulatorMode.COLLECT ? classes.chipOptionChecked : classes.chipOptionUnchecked)}
                                     label={content.simulator.header_chips.option_receive}
@@ -965,9 +979,9 @@ function Simulator(props) {
                     </Grid>
                 </Grid>
                 {(simulatorMode === SimulatorMode.SEND) ?
-                    <Grid item xs={12}>
+                    <Grid size={{ xs: 12}}>
                         <Grid container>
-                            <Grid item xs={12} style={{ paddingBottom: "15px" }}>
+                            <Grid size={{ xs: 12}} >
                                 <InputAmount
                                     id="transfer-sender"
                                     content={content}
@@ -977,7 +991,7 @@ function Simulator(props) {
                                 />
                             </Grid>
                             {!sender.isLoading && !receiver.isLoading &&
-                                <Grid item xs={12}>
+                                <Grid size={{ xs: 12}}>
                                     <Fees
                                         content={content}
                                         details={transferDetail}
@@ -987,7 +1001,7 @@ function Simulator(props) {
                                     />
                                 </Grid>}
                             {(sender.selectedOption.type == TransferType.COUNTRY) ?
-                                <Grid item xs={12} style={{ paddingBottom: "15px" }}>
+                                <Grid size={{ xs: 12}} >
 
                                     <InputAmount
                                         id="transfer-receiver"
@@ -999,7 +1013,7 @@ function Simulator(props) {
                                     />
 
                                 </Grid> :
-                                <Grid item xs={12} style={{ paddingBottom: "15px" }}>
+                                <Grid size={{ xs: 12}} >
 
                                     <InputAmount
                                         id="wallet-receiver"
@@ -1016,9 +1030,9 @@ function Simulator(props) {
                     </Grid> : ""
                 }
                 {(simulatorMode === SimulatorMode.COLLECT) ?
-                    <Grid item xs={12}>
+                    <Grid size={{ xs: 12}}>
                         <Grid container>
-                            <Grid item xs={12} style={{ paddingBottom: "15px" }}>
+                            <Grid size={{ xs: 12}} >
                                 <InputAmount
                                     id="collect-sender"
                                     content={content}
@@ -1027,7 +1041,7 @@ function Simulator(props) {
                                     onChangeCountry={handleSendCountry}
                                 />
                             </Grid>
-                            {!sender.isLoading && !receiver.isLoading && <Grid item xs={12}>
+                            {!sender.isLoading && !receiver.isLoading && <Grid size={{ xs: 12}}>
                                 <Fees
                                     content={content}
                                     details={transferDetail}
@@ -1036,7 +1050,7 @@ function Simulator(props) {
                                     locale={locale}
                                 />
                             </Grid>}
-                            <Grid item xs={12} style={{ paddingBottom: "15px" }}>
+                            <Grid size={{ xs: 12}} >
                                 <InputAmount
                                     id="collect-receiver"
                                     content={content}
@@ -1052,12 +1066,12 @@ function Simulator(props) {
 
                 {
                     (["VE", "AR"].includes(receiver.selectedOption.code) && !receiver.isLoading) &&
-                    <Grid item xs={12} style={{ marginTop: 15, marginBottom: 15 }}>
+                    <Grid size={{ xs: 12}} >
                         <PaymentMethodSelector paymentMethods={receiver.paymentMethods} onChange={handleOnchangePaymentMethod} />
                     </Grid>
                 }
 
-                {!props.onlyView && <Grid item xs={12} style={{ marginBottom: 15 }}>
+                {!props.onlyView && <Grid size={{ xs: 12}} >
                     <Disclaimers
                         simulatorMode={simulatorMode}
                         transferType={sender.selectedOption.type}
@@ -1066,34 +1080,34 @@ function Simulator(props) {
                         option={sender.selectedOption}
                     />
                 </Grid>}
-                {!props.onlyView && <Grid item xs={12}>
+                {!props.onlyView && <Grid size={{ xs: 12}} sx={{marginTop: "15px",marginBottom: "15px"}}>
                     <Button className={classes.button} variant="contained" onClick={handleNext}
                         disabled={sender.isLoading || receiver.isLoading || isOutOfLimits()} fullWidth>
                         {content.simulator.footer_action_button}
                     </Button>
                 </Grid>}
-                <Grid item xs={12} style={{ marginTop: 15, marginBottom: 15, textAlign: "center" }}>
+                <Grid size={{ xs: 12}} sx={{ textAlign: "center",marginTop: "15px" }}>
                     {(recalculate && sender.selectedOption.type != TransferType.WALLET) && <Timer onTimeout={calculateAgain} locale={locale} />}
                 </Grid>
-                <Grid item xs={12} style={{ marginTop: "30px" }}>
+                <Grid size={{ xs: 12}} sx={{marginTop: "60px"}}>
                     <Divider ></Divider>
                 </Grid>
-                <Grid item xs={12} container
+                <Grid size={{ xs: 12}} container
                     direction="row"
                     justifyContent="center"
                     alignItems="center"
-                    style={{ paddingBottom: "10px", }}  >
+                    sx={{ paddingBottom: "10px"}}  >
                     <Typography
                         variant="subtitle1"
-                        style={{ display: "flex", alignItems: "center", textAlign: "center" }}
+                        sx={{ display: "flex", alignItems: "center", textAlign: "center" }}
                     >
-                        <span style={{ fontSize: "10px", textAlign: "center" }}>Powered by&nbsp;</span>
-                        <span style={{ fontWeight: "bold", fontSize: "12px", textAlign: "center" }}>Orquezta</span>
+                        <span sx={{ fontSize: "10px", textAlign: "center" }}>Powered by&nbsp;</span>
+                        <span sx={{ fontWeight: "bold", fontSize: "12px", textAlign: "center" }}>Orquezta</span>
                     </Typography>
                 </Grid>
             </Grid>
         </Paper>
-    </main>;
+    </Fragment>;
 }
 
 export default Simulator;

package/src/theme.js

@@ -0,0 +1,99 @@
+import { createTheme } from '@mui/material/styles';
+
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: '#1976d2',
+      light: '#42a5f5',
+      dark: '#1565c0',
+      contrastText: '#fff',
+    },
+    secondary: {
+      main: '#9c27b0',
+      light: '#ba68c8',
+      dark: '#7b1fa2',
+      contrastText: '#fff',
+    },
+    error: {
+      main: '#d32f2f',
+      light: '#ef5350',
+      dark: '#c62828',
+      contrastText: '#fff',
+    },
+    warning: {
+      main: '#ed6c02',
+      light: '#ff9800',
+      dark: '#e65100',
+      contrastText: '#fff',
+    },
+    info: {
+      main: '#0288d1',
+      light: '#03a9f4',
+      dark: '#01579b',
+      contrastText: '#fff',
+    },
+    success: {
+      main: '#2e7d32',
+      light: '#4caf50',
+      dark: '#1b5e20',
+      contrastText: '#fff',
+    },
+    background: {
+      default: '#f5f5f5',
+      paper: '#fff',
+    },
+  },
+  typography: {
+    fontFamily: [
+      'Poppins',
+      '-apple-system',
+      'BlinkMacSystemFont',
+      '"Segoe UI"',
+      'Roboto',
+      '"Helvetica Neue"',
+      'Arial',
+      'sans-serif',
+      '"Apple Color Emoji"',
+      '"Segoe UI Emoji"',
+      '"Segoe UI Symbol"',
+    ].join(','),
+    h1: {
+      fontWeight: 500,
+      fontSize: '2.5rem',
+      lineHeight: 1.2,
+    },
+    h2: {
+      fontWeight: 500,
+      fontSize: '2rem',
+      lineHeight: 1.2,
+    },
+    button: {
+      textTransform: 'none',
+    },
+  },
+  shape: {
+    borderRadius: 4,
+  },
+  components: {
+    MuiButton: {
+      defaultProps: {
+        disableElevation: true,
+      },
+      styleOverrides: {
+        root: {
+          textTransform: 'none',
+          fontWeight: 600,
+        },
+      },
+    },
+    MuiAppBar: {
+      styleOverrides: {
+        root: {
+          boxShadow: 'none',
+        },
+      },
+    },
+  },
+});
+
+export default theme;

package/src/utils/operationsHelper.js

@@ -7,9 +7,10 @@ import { getSignatureHeader } from "../../src/core/signature";
 import { config } from "aws-sdk";
 
 class OperationsHelper {
-    constructor(testMode = 'production', secretKey = null, config=null) {
+    constructor(testMode = 'production', apiKey = null, config=null, secretKey = null) {
         this.endpoints = new EndPoints(testMode, config);
-        this.reference = secretKey;
+        this.reference = apiKey;
+        this.secretKey = secretKey;
         this.FEES = {
             "ach": { type: "A", value: 0 },
             "wise": { type: "A", value: 0.39 },
@@ -28,7 +29,7 @@ class OperationsHelper {
             body,
             {
                 headers: {
-                    "x-api-access-sig": getSignatureHeader('POST', url, body, this.reference) 
+                    "x-api-access-sig": getSignatureHeader('POST', url, body, this.reference,this.secretKey) 
                 },
             }
         );