@developer_tribe/react-native-comnyx 0.3.2 → 0.3.3

package/lib/module/components/CustomAlert.js

@@ -0,0 +1,127 @@
+"use strict";
+
+import React from 'react';
+import { Modal, View, Image, TouchableOpacity } from 'react-native';
+import { useThemeColors } from "../hooks/useThemeColors.js";
+import { AppText } from "./AppText.js";
+import { ScaledSheet } from "./ScaledSheet.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const infoIcon = require('../assets/info-circle.png');
+function CustomPopup({
+  isVisible,
+  onClose,
+  title,
+  description,
+  onCancelButton,
+  onResendButton,
+  buttonText
+}) {
+  const themeColors = useThemeColors();
+  return /*#__PURE__*/_jsx(Modal, {
+    visible: isVisible,
+    transparent: true,
+    onRequestClose: onClose,
+    children: /*#__PURE__*/_jsx(View, {
+      style: styles.overlay,
+      children: /*#__PURE__*/_jsxs(View, {
+        style: [styles.popup, {
+          backgroundColor: themeColors.background
+        }],
+        children: [/*#__PURE__*/_jsx(Image, {
+          source: infoIcon,
+          height: 64,
+          width: 64
+        }), /*#__PURE__*/_jsx(AppText, {
+          style: styles.title,
+          children: title
+        }), /*#__PURE__*/_jsx(AppText, {
+          style: [styles.description, {
+            color: themeColors.navy
+          }],
+          children: description
+        }), onResendButton && /*#__PURE__*/_jsx(TouchableOpacity, {
+          style: [styles.buttonUp, {
+            backgroundColor: themeColors.dark_background
+          }],
+          onPress: onResendButton,
+          children: /*#__PURE__*/_jsx(AppText, {
+            localization: 'customer.form.resend',
+            style: [styles.buttonText, {
+              color: themeColors.light_text
+            }]
+          })
+        }), /*#__PURE__*/_jsx(TouchableOpacity, {
+          style: [styles.buttonDown, {
+            borderColor: themeColors.dark_background
+          }],
+          onPress: onCancelButton,
+          children: /*#__PURE__*/_jsx(AppText, {
+            localization: buttonText,
+            style: [styles.buttonText, {
+              color: themeColors.text
+            }]
+          })
+        })]
+      })
+    })
+  });
+}
+const styles = 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
+  }
+});
+export default /*#__PURE__*/React.memo(CustomPopup);
+//# sourceMappingURL=CustomAlert.js.map

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

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

package/lib/module/components/CustomerForm.js

@@ -1,16 +1,21 @@
 "use strict";
 
-import { View, TextInput, StyleSheet, TouchableOpacity, Modal, FlatList, Pressable, Keyboard } from 'react-native';
+import { View, TextInput, TouchableOpacity, Pressable, Keyboard, Image, ScrollView } from 'react-native';
 import { useForm, Controller } from 'react-hook-form';
 import { useAppStore } from "../store.js";
 import { createCustomer } from "../api/index.js";
 import { AppText } from "./AppText.js";
 import { useLocalize } from "../hooks/useLocalize.js";
 import { useThemeColors } from "../hooks/useThemeColors.js";
+import CustomPopup from "./CustomAlert.js";
 import { useState } from 'react';
-import { countries } from "../constants/countries.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-export function CustomerForm() {
+import { ScaledSheet } from "./ScaledSheet.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const closeIcon = require('../assets/x-close.png');
+const infoIcon = require('../assets/info-circle.png');
+export function CustomerForm({
+  onBack
+}) {
   const {
     control,
     handleSubmit,
@@ -20,13 +25,17 @@ export function CustomerForm() {
   } = useForm();
   const themeColors = useThemeColors();
   const localize = useLocalize();
-  const [isCountryModalVisible, setIsCountryModalVisible] = useState(false);
   const inputStyle = {
     ...styles.input,
     color: themeColors.text,
-    borderColor: themeColors.border,
+    borderColor: themeColors.gainsboro,
     backgroundColor: themeColors.background
   };
+  const [popupVisible, setPopupVisible] = useState(false);
+  const [popupContent, setPopupContent] = useState({
+    title: '',
+    description: 'null'
+  });
   const onSubmit = async data => {
     try {
       const customer = await createCustomer({
@@ -45,232 +54,245 @@ export 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__*/_jsx(TouchableOpacity, {
+      onPress: () => showErrorPopup(title, description),
+      activeOpacity: 1,
+      children: /*#__PURE__*/_jsx(Image, {
+        source: infoIcon,
+        style: styles.infoIcon
+      })
+    });
+  };
   return /*#__PURE__*/_jsxs(Pressable, {
     style: [styles.container, {
       backgroundColor: themeColors.background
     }],
     onPress: Keyboard.dismiss,
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: styles.headerContainer,
-      children: [/*#__PURE__*/_jsx(AppText, {
-        localization: "customer.form.title",
-        style: [styles.headerText, {
-          color: themeColors.text
-        }]
-      }), /*#__PURE__*/_jsx(AppText, {
-        localization: "customer.form.instructions",
-        style: [styles.headerText, {
-          color: themeColors.text
-        }]
-      })]
-    }), /*#__PURE__*/_jsx(Controller, {
-      control: control,
-      rules: {
-        maxLength: {
-          value: 30,
-          message: localize('customer.form.validation.name.maxLength')
-        }
-      },
-      render: ({
-        field: {
-          onChange,
-          value
-        }
-      }) => /*#__PURE__*/_jsx(TextInput, {
-        style: inputStyle,
-        placeholder: localize('customer.form.placeholder.name'),
-        placeholderTextColor: "#6C757D",
-        value: value,
-        onChangeText: onChange
-      }),
-      name: "name"
-    }), errors.name && /*#__PURE__*/_jsx(AppText, {
-      localization: errors.name.message ? undefined : 'customer.form.error',
-      style: [styles.error, {
-        color: themeColors.error
-      }],
-      children: errors.name.message
-    }), /*#__PURE__*/_jsx(Controller, {
-      control: control,
-      rules: {
-        maxLength: {
-          value: 2,
-          message: localize('customer.form.validation.country.maxLength')
-        }
-      },
-      render: ({
-        field: {
-          onChange,
-          value
-        }
-      }) => /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(Pressable, {
-          style: [styles.input, {
-            borderColor: themeColors.border,
-            backgroundColor: themeColors.background,
-            justifyContent: 'center'
+    children: [/*#__PURE__*/_jsx(ScrollView, {
+      contentContainerStyle: styles.scrollContainer,
+      keyboardShouldPersistTaps: "handled",
+      children: /*#__PURE__*/_jsxs(View, {
+        style: [styles.container, {
+          backgroundColor: themeColors.background
+        }],
+        children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+          style: [styles.iconContainer, {
+            backgroundColor: themeColors.dark_background
           }],
-          onPress: () => setIsCountryModalVisible(true),
-          children: /*#__PURE__*/_jsx(AppText, {
-            style: {
-              color: value ? themeColors.text : '#6C757D'
-            },
-            children: value ? countries.find(c => c.code === value)?.name : localize('customer.form.placeholder.country')
+          onPress: onBack,
+          children: /*#__PURE__*/_jsx(Image, {
+            source: closeIcon,
+            style: [styles.closeIcon, {
+              tintColor: themeColors.light_text
+            }]
           })
-        }), /*#__PURE__*/_jsx(Modal, {
-          visible: isCountryModalVisible,
-          transparent: true,
-          animationType: "slide",
-          onRequestClose: () => setIsCountryModalVisible(false),
-          children: /*#__PURE__*/_jsx(View, {
-            style: [styles.modalContainer, {
-              backgroundColor: 'rgba(0, 0, 0, 0.5)'
+        }), /*#__PURE__*/_jsxs(View, {
+          style: [styles.headerContainer, {
+            backgroundColor: themeColors.dark_background
+          }],
+          children: [/*#__PURE__*/_jsx(AppText, {
+            localization: "customer.form.title",
+            style: [styles.headerText, {
+              color: themeColors.gainsboro
+            }]
+          }), /*#__PURE__*/_jsx(AppText, {
+            localization: "customer.form.instructions",
+            style: [styles.headerText, {
+              color: themeColors.light_text
+            }]
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.titleContainer,
+          children: [/*#__PURE__*/_jsx(AppText, {
+            style: [styles.title, {
+              color: themeColors.slate
+            }],
+            children: localize('customer.form.title')
+          }), /*#__PURE__*/_jsx(Controller, {
+            control: control,
+            rules: {
+              maxLength: {
+                value: 30,
+                message: localize('customer.form.validation.name.maxLength')
+              }
+            },
+            render: ({
+              field: {
+                onChange,
+                value
+              }
+            }) => /*#__PURE__*/_jsxs(View, {
+              style: [styles.inputContainer, {
+                borderBottomColor: themeColors.gainsboro
+              }],
+              children: [/*#__PURE__*/_jsx(TextInput, {
+                style: inputStyle,
+                placeholder: localize('customer.form.placeholder.name'),
+                placeholderTextColor: themeColors.gainsboro,
+                value: value,
+                onChangeText: onChange
+              }), errors.name && /*#__PURE__*/_jsx(InfoButton, {
+                title: 'customer.form.failed.name',
+                description: 'customer.form.failed.name.desc'
+              })]
+            }),
+            name: "name"
+          }), /*#__PURE__*/_jsx(AppText, {
+            style: [styles.title, {
+              color: themeColors.slate
             }],
-            children: /*#__PURE__*/_jsx(View, {
-              style: [styles.modalContent, {
-                backgroundColor: themeColors.background
+            children: "Email"
+          }), /*#__PURE__*/_jsx(Controller, {
+            control: control,
+            rules: {
+              pattern: {
+                value: /^\S+@\S+$/i,
+                message: localize('customer.form.validation.email.pattern')
+              }
+            },
+            render: ({
+              field: {
+                onChange,
+                value
+              }
+            }) => /*#__PURE__*/_jsxs(View, {
+              style: [styles.inputContainer, {
+                borderBottomColor: themeColors.gainsboro
+              }],
+              children: [/*#__PURE__*/_jsx(TextInput, {
+                style: inputStyle,
+                placeholder: localize('customer.form.placeholder.email'),
+                placeholderTextColor: themeColors.gainsboro,
+                value: value,
+                onChangeText: onChange,
+                keyboardType: "email-address"
+              }), errors.email && /*#__PURE__*/_jsx(InfoButton, {
+                title: 'customer.form.failed.email',
+                description: 'customer.form.failed.email.desc'
+              })]
+            }),
+            name: "email"
+          }), /*#__PURE__*/_jsx(AppText, {
+            style: [styles.title, {
+              color: themeColors.slate
+            }],
+            children: "Phone"
+          }), /*#__PURE__*/_jsx(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__*/_jsxs(View, {
+              style: [styles.inputContainer, {
+                borderBottomColor: themeColors.gainsboro
               }],
-              children: /*#__PURE__*/_jsx(FlatList, {
-                data: countries,
-                keyExtractor: item => item.code,
-                initialScrollIndex: countries.findIndex(c => c.code === value),
-                renderItem: ({
-                  item
-                }) => /*#__PURE__*/_jsx(Pressable, {
-                  style: [styles.countryItem, {
-                    backgroundColor: value === item.code ? themeColors.primary : themeColors.background,
-                    borderBottomColor: themeColors.border
-                  }],
-                  onPress: () => {
-                    onChange(item.code);
-                    setIsCountryModalVisible(false);
-                  },
-                  children: /*#__PURE__*/_jsx(AppText, {
-                    style: {
-                      color: value === item.code ? themeColors.background : themeColors.text,
-                      fontSize: 16
-                    },
-                    children: item.name
-                  })
-                })
-              })
-            })
+              children: [/*#__PURE__*/_jsx(TextInput, {
+                style: inputStyle,
+                placeholder: localize('customer.form.placeholder.phone'),
+                placeholderTextColor: themeColors.gainsboro,
+                value: value,
+                onChangeText: onChange,
+                keyboardType: "phone-pad"
+              }), errors.phone && /*#__PURE__*/_jsx(InfoButton, {
+                title: 'customer.form.failed.phone',
+                description: 'customer.form.failed.phone.desc'
+              })]
+            }),
+            name: "phone"
+          })]
+        }), /*#__PURE__*/_jsx(TouchableOpacity, {
+          style: [styles.button, {
+            backgroundColor: themeColors.dark_background
+          }],
+          onPress: handleSubmit(onSubmit),
+          children: /*#__PURE__*/_jsx(AppText, {
+            localization: "customer.form.submit",
+            style: [styles.buttonText, {
+              color: themeColors.light_text
+            }]
           })
         })]
-      }),
-      name: "country"
-    }), errors.country && /*#__PURE__*/_jsx(AppText, {
-      localization: errors.country.message ? undefined : 'customer.form.error',
-      style: [styles.error, {
-        color: themeColors.error
-      }],
-      children: errors.country.message
-    }), /*#__PURE__*/_jsx(Controller, {
-      control: control,
-      rules: {
-        pattern: {
-          value: /^\S+@\S+$/i,
-          message: localize('customer.form.validation.email.pattern')
-        }
-      },
-      render: ({
-        field: {
-          onChange,
-          value
-        }
-      }) => /*#__PURE__*/_jsx(TextInput, {
-        style: inputStyle,
-        placeholder: localize('customer.form.placeholder.email'),
-        placeholderTextColor: "#6C757D",
-        value: value,
-        onChangeText: onChange,
-        keyboardType: "email-address"
-      }),
-      name: "email"
-    }), errors.email && /*#__PURE__*/_jsx(AppText, {
-      localization: errors.email.message ? undefined : 'customer.form.error',
-      style: [styles.error, {
-        color: themeColors.error
-      }],
-      children: errors.email.message
-    }), /*#__PURE__*/_jsx(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__*/_jsx(TextInput, {
-        style: inputStyle,
-        placeholder: localize('customer.form.placeholder.phone'),
-        placeholderTextColor: "#6C757D",
-        value: value,
-        onChangeText: onChange,
-        keyboardType: "phone-pad"
-      }),
-      name: "phone"
-    }), errors.phone && /*#__PURE__*/_jsx(AppText, {
-      localization: errors.phone.message ? undefined : 'customer.form.error',
-      style: [styles.error, {
-        color: themeColors.error
-      }],
-      children: errors.phone.message
-    }), /*#__PURE__*/_jsx(TouchableOpacity, {
-      style: [styles.button, {
-        backgroundColor: themeColors.primary
-      }],
-      onPress: handleSubmit(onSubmit),
-      children: /*#__PURE__*/_jsx(AppText, {
-        localization: "customer.form.submit",
-        style: styles.buttonText
       })
+    }), /*#__PURE__*/_jsx(CustomPopup, {
+      isVisible: popupVisible,
+      onClose: () => setPopupVisible(false),
+      title: popupContent.title,
+      description: popupContent.description,
+      onCancelButton: () => {
+        setPopupVisible(false);
+        setPopupContent({
+          title: '',
+          description: ''
+        });
+      },
+      onResendButton: () => {
+        setPopupVisible(false);
+      }
     })]
   });
 }
-const styles = StyleSheet.create({
+const styles = 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,
@@ -280,12 +302,43 @@ const styles = 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',
+    borderWidth: 1,
+    marginBottom: '8@vs'
+  },
+  closeIcon: {
+    width: '24@s',
+    height: '24@vs'
+  },
+  scrollContainer: {
+    flexGrow: 1,
+    justifyContent: 'space-between'
+  },
+  infoIcon: {
+    width: '24@s',
+    height: '24@vs',
+    tintColor: 'red'
+  },
+  titleContainer: {
+    marginHorizontal: '20@s',
+    flex: 1
   }
 });
 //# sourceMappingURL=CustomerForm.js.map