@developer_tribe/react-native-comnyx 0.3.2 → 0.3.4

package/lib/commonjs/components/CustomAlert.js

@@ -0,0 +1,132 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _useThemeColors = require("../hooks/useThemeColors.js");
+var _AppText = require("./AppText.js");
+var _ScaledSheet = require("./ScaledSheet.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const infoIcon = require('../assets/info-circle.png');
+function CustomPopup({
+  isVisible,
+  onClose,
+  title,
+  description,
+  onCancelButton,
+  onResendButton,
+  buttonText
+}) {
+  const themeColors = (0, _useThemeColors.useThemeColors)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
+    visible: isVisible,
+    transparent: true,
+    onRequestClose: onClose,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.overlay,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: [styles.popup, {
+          backgroundColor: themeColors.background
+        }],
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+          source: infoIcon,
+          height: 64,
+          width: 64
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_AppText.AppText, {
+          style: styles.title,
+          children: title
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_AppText.AppText, {
+          style: [styles.description, {
+            color: themeColors.navy
+          }],
+          children: description
+        }), onResendButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+          style: [styles.buttonUp, {
+            backgroundColor: themeColors.dark_background
+          }],
+          onPress: onResendButton,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AppText.AppText, {
+            localization: 'customer.form.resend',
+            style: [styles.buttonText, {
+              color: themeColors.light_text
+            }]
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+          style: [styles.buttonDown, {
+            borderColor: themeColors.dark_background
+          }],
+          onPress: onCancelButton,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AppText.AppText, {
+            localization: buttonText,
+            style: [styles.buttonText, {
+              color: themeColors.text
+            }]
+          })
+        })]
+      })
+    })
+  });
+}
+const styles = _ScaledSheet.ScaledSheet.create({
+  overlay: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.60)'
+  },
+  popup: {
+    width: '80%',
+    borderRadius: '20@s',
+    overflow: 'hidden',
+    alignItems: 'center',
+    paddingVertical: '20@vs'
+  },
+  title: {
+    marginVertical: '16@vs',
+    fontWeight: 700,
+    fontSize: '16@vs'
+  },
+  description: {
+    marginBottom: '16@vs',
+    alignItems: 'center',
+    textAlign: 'center',
+    width: '85%',
+    fontWeight: 500,
+    fontSize: '16@vs'
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: '16@vs',
+    fontWeight: '600'
+  },
+  buttonContainer: {
+    flexDirection: 'column',
+    width: '90%',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  buttonUp: {
+    borderRadius: '12@s',
+    width: '256@s',
+    height: '56@vs',
+    marginBottom: '16@vs',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  buttonDown: {
+    backgroundColor: 'transparent',
+    borderRadius: '12@s',
+    width: '256@s',
+    height: '56@vs',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: '12@vs',
+    borderWidth: 1
+  }
+});
+var _default = exports.default = /*#__PURE__*/_react.default.memo(CustomPopup);
+//# sourceMappingURL=CustomAlert.js.map

package/lib/commonjs/components/CustomAlert.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_useThemeColors","_AppText","_ScaledSheet","_jsxRuntime","e","__esModule","default","infoIcon","CustomPopup","isVisible","onClose","title","description","onCancelButton","onResendButton","buttonText","themeColors","useThemeColors","jsx","Modal","visible","transparent","onRequestClose","children","View","style","styles","overlay","jsxs","popup","backgroundColor","background","Image","source","height","width","AppText","color","navy","TouchableOpacity","buttonUp","dark_background","onPress","localization","light_text","buttonDown","borderColor","text","ScaledSheet","create","flex","justifyContent","alignItems","borderRadius","overflow","paddingVertical","marginVertical","fontWeight","fontSize","marginBottom","textAlign","buttonContainer","flexDirection","borderWidth","_default","exports","React","memo"],"sourceRoot":"../../../src","sources":["components/CustomAlert.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/CustomerForm.js

@@ -11,10 +11,16 @@ var _index = require("../api/index.js");
 var _AppText = require("./AppText.js");
 var _useLocalize = require("../hooks/useLocalize.js");
 var _useThemeColors = require("../hooks/useThemeColors.js");
+var _CustomAlert = _interopRequireDefault(require("./CustomAlert.js"));
 var _react = require("react");
-var _countries = require("../constants/countries.js");
+var _ScaledSheet = require("./ScaledSheet.js");
 var _jsxRuntime = require("react/jsx-runtime");
-function CustomerForm() {
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const closeIcon = require('../assets/x-close.png');
+const infoIcon = require('../assets/info-circle.png');
+function CustomerForm({
+  onBack
+}) {
   const {
     control,
     handleSubmit,
@@ -24,13 +30,17 @@ function CustomerForm() {
   } = (0, _reactHookForm.useForm)();
   const themeColors = (0, _useThemeColors.useThemeColors)();
   const localize = (0, _useLocalize.useLocalize)();
-  const [isCountryModalVisible, setIsCountryModalVisible] = (0, _react.useState)(false);
   const inputStyle = {
     ...styles.input,
     color: themeColors.text,
-    borderColor: themeColors.border,
+    borderColor: themeColors.gainsboro,
     backgroundColor: themeColors.background
   };
+  const [popupVisible, setPopupVisible] = (0, _react.useState)(false);
+  const [popupContent, setPopupContent] = (0, _react.useState)({
+    title: '',
+    description: 'null'
+  });
   const onSubmit = async data => {
     try {
       const customer = await (0, _index.createCustomer)({
@@ -49,232 +59,245 @@ function CustomerForm() {
       console.error('Error creating customer:', error);
     }
   };
+  const showErrorPopup = (title, description) => {
+    setPopupVisible(true);
+    setPopupContent({
+      title: title ?? 'customer.form.failed.name',
+      description: description ?? 'customer.form.failed.name.desc'
+    });
+  };
+
+  // eslint-disable-next-line react/no-unstable-nested-components
+  const InfoButton = ({
+    title,
+    description
+  }) => {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      onPress: () => showErrorPopup(title, description),
+      activeOpacity: 1,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+        source: infoIcon,
+        style: styles.infoIcon
+      })
+    });
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
     style: [styles.container, {
       backgroundColor: themeColors.background
     }],
     onPress: _reactNative.Keyboard.dismiss,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.headerContainer,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AppText.AppText, {
-        localization: "customer.form.title",
-        style: [styles.headerText, {
-          color: themeColors.text
-        }]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_AppText.AppText, {
-        localization: "customer.form.instructions",
-        style: [styles.headerText, {
-          color: themeColors.text
-        }]
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
-      control: control,
-      rules: {
-        maxLength: {
-          value: 30,
-          message: localize('customer.form.validation.name.maxLength')
-        }
-      },
-      render: ({
-        field: {
-          onChange,
-          value
-        }
-      }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
-        style: inputStyle,
-        placeholder: localize('customer.form.placeholder.name'),
-        placeholderTextColor: "#6C757D",
-        value: value,
-        onChangeText: onChange
-      }),
-      name: "name"
-    }), errors.name && /*#__PURE__*/(0, _jsxRuntime.jsx)(_AppText.AppText, {
-      localization: errors.name.message ? undefined : 'customer.form.error',
-      style: [styles.error, {
-        color: themeColors.error
-      }],
-      children: errors.name.message
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
-      control: control,
-      rules: {
-        maxLength: {
-          value: 2,
-          message: localize('customer.form.validation.country.maxLength')
-        }
-      },
-      render: ({
-        field: {
-          onChange,
-          value
-        }
-      }) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-          style: [styles.input, {
-            borderColor: themeColors.border,
-            backgroundColor: themeColors.background,
-            justifyContent: 'center'
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+      contentContainerStyle: styles.scrollContainer,
+      keyboardShouldPersistTaps: "handled",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: [styles.container, {
+          backgroundColor: themeColors.background
+        }],
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+          style: [styles.iconContainer, {
+            backgroundColor: themeColors.dark_background
           }],
-          onPress: () => setIsCountryModalVisible(true),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AppText.AppText, {
-            style: {
-              color: value ? themeColors.text : '#6C757D'
-            },
-            children: value ? _countries.countries.find(c => c.code === value)?.name : localize('customer.form.placeholder.country')
+          onPress: onBack,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+            source: closeIcon,
+            style: [styles.closeIcon, {
+              tintColor: themeColors.light_text
+            }]
           })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
-          visible: isCountryModalVisible,
-          transparent: true,
-          animationType: "slide",
-          onRequestClose: () => setIsCountryModalVisible(false),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: [styles.modalContainer, {
-              backgroundColor: 'rgba(0, 0, 0, 0.5)'
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: [styles.headerContainer, {
+            backgroundColor: themeColors.dark_background
+          }],
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AppText.AppText, {
+            localization: "customer.form.title",
+            style: [styles.headerText, {
+              color: themeColors.gainsboro
+            }]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_AppText.AppText, {
+            localization: "customer.form.instructions",
+            style: [styles.headerText, {
+              color: themeColors.light_text
+            }]
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.titleContainer,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AppText.AppText, {
+            style: [styles.title, {
+              color: themeColors.slate
+            }],
+            children: localize('customer.form.title')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+            control: control,
+            rules: {
+              maxLength: {
+                value: 30,
+                message: localize('customer.form.validation.name.maxLength')
+              }
+            },
+            render: ({
+              field: {
+                onChange,
+                value
+              }
+            }) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: [styles.inputContainer, {
+                borderBottomColor: themeColors.gainsboro
+              }],
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+                style: inputStyle,
+                placeholder: localize('customer.form.placeholder.name'),
+                placeholderTextColor: themeColors.gainsboro,
+                value: value,
+                onChangeText: onChange
+              }), errors.name && /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoButton, {
+                title: 'customer.form.failed.name',
+                description: 'customer.form.failed.name.desc'
+              })]
+            }),
+            name: "name"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_AppText.AppText, {
+            style: [styles.title, {
+              color: themeColors.slate
             }],
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-              style: [styles.modalContent, {
-                backgroundColor: themeColors.background
+            children: "Email"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+            control: control,
+            rules: {
+              pattern: {
+                value: /^\S+@\S+$/i,
+                message: localize('customer.form.validation.email.pattern')
+              }
+            },
+            render: ({
+              field: {
+                onChange,
+                value
+              }
+            }) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: [styles.inputContainer, {
+                borderBottomColor: themeColors.gainsboro
               }],
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
-                data: _countries.countries,
-                keyExtractor: item => item.code,
-                initialScrollIndex: _countries.countries.findIndex(c => c.code === value),
-                renderItem: ({
-                  item
-                }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-                  style: [styles.countryItem, {
-                    backgroundColor: value === item.code ? themeColors.primary : themeColors.background,
-                    borderBottomColor: themeColors.border
-                  }],
-                  onPress: () => {
-                    onChange(item.code);
-                    setIsCountryModalVisible(false);
-                  },
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AppText.AppText, {
-                    style: {
-                      color: value === item.code ? themeColors.background : themeColors.text,
-                      fontSize: 16
-                    },
-                    children: item.name
-                  })
-                })
-              })
-            })
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+                style: inputStyle,
+                placeholder: localize('customer.form.placeholder.email'),
+                placeholderTextColor: themeColors.gainsboro,
+                value: value,
+                onChangeText: onChange,
+                keyboardType: "email-address"
+              }), errors.email && /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoButton, {
+                title: 'customer.form.failed.email',
+                description: 'customer.form.failed.email.desc'
+              })]
+            }),
+            name: "email"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_AppText.AppText, {
+            style: [styles.title, {
+              color: themeColors.slate
+            }],
+            children: "Phone"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+            control: control,
+            rules: {
+              validate: value => {
+                if (!value) return true;
+                return typeof value === 'string' || localize('customer.form.validation.phone.invalid');
+              }
+            },
+            render: ({
+              field: {
+                onChange,
+                value
+              }
+            }) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: [styles.inputContainer, {
+                borderBottomColor: themeColors.gainsboro
+              }],
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+                style: inputStyle,
+                placeholder: localize('customer.form.placeholder.phone'),
+                placeholderTextColor: themeColors.gainsboro,
+                value: value,
+                onChangeText: onChange,
+                keyboardType: "phone-pad"
+              }), errors.phone && /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoButton, {
+                title: 'customer.form.failed.phone',
+                description: 'customer.form.failed.phone.desc'
+              })]
+            }),
+            name: "phone"
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+          style: [styles.button, {
+            backgroundColor: themeColors.dark_background
+          }],
+          onPress: handleSubmit(onSubmit),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AppText.AppText, {
+            localization: "customer.form.submit",
+            style: [styles.buttonText, {
+              color: themeColors.light_text
+            }]
           })
         })]
-      }),
-      name: "country"
-    }), errors.country && /*#__PURE__*/(0, _jsxRuntime.jsx)(_AppText.AppText, {
-      localization: errors.country.message ? undefined : 'customer.form.error',
-      style: [styles.error, {
-        color: themeColors.error
-      }],
-      children: errors.country.message
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
-      control: control,
-      rules: {
-        pattern: {
-          value: /^\S+@\S+$/i,
-          message: localize('customer.form.validation.email.pattern')
-        }
-      },
-      render: ({
-        field: {
-          onChange,
-          value
-        }
-      }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
-        style: inputStyle,
-        placeholder: localize('customer.form.placeholder.email'),
-        placeholderTextColor: "#6C757D",
-        value: value,
-        onChangeText: onChange,
-        keyboardType: "email-address"
-      }),
-      name: "email"
-    }), errors.email && /*#__PURE__*/(0, _jsxRuntime.jsx)(_AppText.AppText, {
-      localization: errors.email.message ? undefined : 'customer.form.error',
-      style: [styles.error, {
-        color: themeColors.error
-      }],
-      children: errors.email.message
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
-      control: control,
-      rules: {
-        validate: value => {
-          if (!value) return true;
-          return typeof value === 'string' || localize('customer.form.validation.phone.invalid');
-        }
-      },
-      render: ({
-        field: {
-          onChange,
-          value
-        }
-      }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
-        style: inputStyle,
-        placeholder: localize('customer.form.placeholder.phone'),
-        placeholderTextColor: "#6C757D",
-        value: value,
-        onChangeText: onChange,
-        keyboardType: "phone-pad"
-      }),
-      name: "phone"
-    }), errors.phone && /*#__PURE__*/(0, _jsxRuntime.jsx)(_AppText.AppText, {
-      localization: errors.phone.message ? undefined : 'customer.form.error',
-      style: [styles.error, {
-        color: themeColors.error
-      }],
-      children: errors.phone.message
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-      style: [styles.button, {
-        backgroundColor: themeColors.primary
-      }],
-      onPress: handleSubmit(onSubmit),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AppText.AppText, {
-        localization: "customer.form.submit",
-        style: styles.buttonText
       })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomAlert.default, {
+      isVisible: popupVisible,
+      onClose: () => setPopupVisible(false),
+      title: popupContent.title,
+      description: popupContent.description,
+      onCancelButton: () => {
+        setPopupVisible(false);
+        setPopupContent({
+          title: '',
+          description: ''
+        });
+      },
+      onResendButton: () => {
+        setPopupVisible(false);
+      }
     })]
   });
 }
-const styles = _reactNative.StyleSheet.create({
+const styles = _ScaledSheet.ScaledSheet.create({
   container: {
-    padding: 24,
+    paddingBottom: '24@vs',
     flex: 1,
-    justifyContent: 'center'
+    justifyContent: 'space-between'
   },
   headerContainer: {
-    marginBottom: 24
+    paddingHorizontal: '24@s',
+    marginBottom: '24@vs',
+    paddingBottom: '32@vs'
   },
   headerText: {
-    fontSize: 15,
+    fontSize: '30@vs',
     fontWeight: '600',
-    textAlign: 'center'
+    textAlign: 'left'
   },
   input: {
-    height: 56,
-    borderWidth: 1,
-    borderRadius: 12,
-    paddingHorizontal: 16,
-    fontSize: 16,
+    borderRadius: '12@s',
+    paddingHorizontal: '12@s',
+    fontSize: '16@vs',
     backgroundColor: 'white',
-    marginBottom: 16
+    paddingVertical: '8@vs',
+    width: '95%'
   },
   button: {
-    padding: 16,
-    borderRadius: 12,
+    paddingHorizontal: '16@s',
+    paddingVertical: '16@vs',
+    borderRadius: '12@s',
     alignItems: 'center',
-    marginTop: 24
+    marginTop: '24@vs',
+    marginHorizontal: '20@s'
   },
   buttonText: {
     color: 'white',
-    fontSize: 16,
+    fontSize: '16@vs',
     fontWeight: '600'
   },
   error: {
-    fontSize: 14,
-    marginLeft: 16,
-    top: -16
+    fontSize: '14@vs',
+    marginLeft: '16@s',
+    top: '-16@vs'
   },
   modalContainer: {
     flex: 1,
@@ -284,12 +307,43 @@ const styles = _reactNative.StyleSheet.create({
   modalContent: {
     width: '90%',
     height: '70%',
-    borderRadius: 12,
+    borderRadius: '12@s',
     overflow: 'hidden'
   },
   countryItem: {
-    padding: 16,
+    paddingHorizontal: '16@s',
+    paddingVertical: '16@vs',
     borderBottomWidth: 1
+  },
+  title: {
+    fontSize: '16@vs'
+  },
+  iconContainer: {
+    paddingHorizontal: '20@s',
+    paddingVertical: '10@vs'
+  },
+  inputContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderBottomWidth: 1,
+    marginBottom: '8@vs'
+  },
+  closeIcon: {
+    width: '24@vs',
+    height: '24@vs'
+  },
+  scrollContainer: {
+    flexGrow: 1,
+    justifyContent: 'space-between'
+  },
+  infoIcon: {
+    width: '24@vs',
+    height: '24@vs',
+    tintColor: 'red'
+  },
+  titleContainer: {
+    marginHorizontal: '20@s',
+    flex: 1
   }
 });
 //# sourceMappingURL=CustomerForm.js.map