@widergy/utilitygo-smart-bill-mobile 1.1.12 → 2.0.0

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+# [2.0.0](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/compare/v1.1.12...v2.0.0) (2023-11-16)
+
+
+### Bug Fixes
+
+* mayor release ([#27](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/issues/27)) ([558cb86](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/commit/558cb86e2d19f1997a527685e92673811bffbff8))
+* package ([#28](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/issues/28)) ([9fca7c8](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/commit/9fca7c80d92fb6b31eb7de741b7d80b3a59cefa7))
+* version bump ([#26](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/issues/26)) ([b7ed4ce](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/commit/b7ed4ce2f85056827b9ca73bde4d558ee5108da3))
+
+
+### BREAKING CHANGES
+
+* new dependencies finally
+* new dependencies finally
+* dependencies update
+* dependencies update
+
 ## [1.1.12](https://github.com/widergy/UtilityGO-Smart-Bill-Mobile/compare/v1.1.11...v1.1.12) (2023-11-15)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/utilitygo-smart-bill-mobile",
-  "version": "1.1.12",
+  "version": "2.0.0",
   "description": "UtilityGO SmartBill Mobile",
   "license": "MIT",
   "main": "src/lib/index.js",
@@ -12,34 +12,41 @@
     "react-native": "*"
   },
   "devDependencies": {
-    "@babel/cli": "^7.4.4",
-    "@babel/core": "^7.12.9",
-    "@babel/runtime": "^7.12.5",
-    "@commitlint/cli": "^8.2.0",
-    "@commitlint/config-conventional": "^8.2.0",
-    "@react-native-community/eslint-config": "^2.0.0",
+    "@babel/cli": "^7.22.10",
+    "@babel/core": "^7.22.10",
+    "@babel/runtime": "^7.22.10",
+    "@babel/eslint-parser": "^7.22.10",
+    "@babel/preset-env": "^7.22.10",
+    "@babel/preset-react": "^7.22.5",
+    "@commitlint/cli": "^17.7.1",
+    "@commitlint/config-conventional": "^17.7.0",
     "@widergy/semantic-release-package-config": "^1.0.0",
-    "babel-eslint": "^10.0.1",
-    "babel-jest": "^26.6.3",
-    "babel-plugin-module-resolver": "^4.0.0",
-    "eslint": "7.14.0",
-    "eslint-config-airbnb": "^17.1.0",
-    "eslint-config-prettier": "^3.3.0",
+    "babel-jest": "^29.6.2",
+    "babel-plugin-module-resolver": "^5.0.0",
+    "@react-native/metro-config": "^0.72.11",
+    "@tsconfig/react-native": "^3.0.0",
+    "@types/react": "^18.0.24",
+    "@types/react-test-renderer": "^18.0.0",
+    "@react-native/eslint-config": "^0.72.2",
+    "eslint": "^8.47.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^9.0.0",
     "eslint-import-resolver-babel-module": "^5.1.2",
-    "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jsx-a11y": "^6.1.2",
-    "eslint-plugin-prettier": "^3.0.0",
-    "eslint-plugin-react": "^7.11.1",
-    "husky": "^4.3.6",
-    "jest": "^26.6.3",
-    "lint-staged": "^10.5.3",
-    "metro-react-native-babel-preset": "^0.66.0",
-    "prettier": "^1.15.2",
-    "prettier-eslint": "^8.8.2",
-    "react": "17.0.2",
-    "react-native": "0.65.0",
-    "react-native-codegen": "^0.0.7",
-    "react-test-renderer": "17.0.1",
+    "eslint-plugin-import": "^2.28.0",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-react": "^7.33.1",
+    "husky": "^8.0.0",
+    "jest": "^29.6.2",
+    "lint-staged": "^15.0.2",
+    "metro-react-native-babel-preset": "^0.77.0",
+    "prettier": "^3.0.1",
+    "prettier-eslint": "^15.0.1",
+    "prop-types": "^15.8.1",
+    "react": "18.2.0",
+    "react-native": "0.72.6",
+    "react-test-renderer": "18.2.0",
+    "typescript": "4.8.4",
     "semantic-release": "^15.13.31"
   },
   "scripts": {
@@ -50,38 +57,29 @@
     "ios": "react-native run-ios",
     "start": "react-native start",
     "test": "jest",
-    "build": "babel src/lib --out-dir dist"
+    "build": "babel src/lib --out-dir dist",
+    "prepare": "husky install"
   },
   "dependencies": {
     "@react-native-community/art": "^1.2.0",
-    "@react-native-community/viewpager": "^4.1.7",
-    "@widergy/mobile-ui": "<1.0.0",
-    "d3": "^6.2.0",
-    "moment": "^2.29.1",
+    "react-native-pager-view": "^6.2.1",
+    "@widergy/mobile-ui": "^1.0.0",
+    "@widergy/web-utils": "^2.0.0",
+    "core-js": "3",
+    "d3": "^7.8.5",
+    "lodash": "^4.17.21",
+    "moment": "^2.29.4",
     "numeral": "^2.0.6",
-    "react-native-collapsible": "^1.5.3",
-    "react-native-document-picker": "^4.0.0",
-    "react-native-image-picker": "^4.0.6",
-    "react-native-image-resizer": "^1.3.0",
-    "react-native-svg": "^12.1.0",
-    "react-native-svg-transformer": "^0.14.3",
-    "react-native-vector-icons": "^7.1.0"
-  },
-  "jest": {
-    "preset": "react-native"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "yarn lint-diff && node branch-name-hook",
-      "commit-msg": "commitlint -E  HUSKY_GIT_PARAMS"
-    }
+    "react-native-collapsible": "^1.6.1",
+    "react-native-document-picker": "^9.0.1",
+    "react-native-image-picker": "^5.0.0",
+    "@bam.tech/react-native-image-resizer": "^3.0.7",
+    "react-native-svg": "^13.0.0",
+    "react-native-vector-icons": "^10.0.0",
+    "react-native-svg-transformer": "^1.1.0",
+    "seamless-immutable": "^7.1.4"
   },
   "release": {
     "extends": "@widergy/semantic-release-package-config"
-  },
-  "commitlint": {
-    "extends": [
-      "@commitlint/config-conventional"
-    ]
   }
 }

package/src/lib/components/Advice/index.js

@@ -29,7 +29,7 @@ const Advice = ({ title, contentText }) => {
 
 Advice.propTypes = {
   title: string,
-  contentText: string,
+  contentText: string
 };
 
 export default Advice;

package/src/lib/components/Advice/styles.js

@@ -7,24 +7,24 @@ export default (theme, Colors) =>
       backgroundColor: Colors.lighterPrimary,
       borderRadius: 5,
       paddingHorizontal: 10,
-      paddingVertical: 16,
+      paddingVertical: 16
     },
     header: {
       alignItems: 'center',
       flexDirection: 'row',
       justifyContent: 'center',
-      marginBottom: 10,
+      marginBottom: 10
     },
     icon: {
-      marginRight: scaleUtils.horizontalScale(10),
+      marginRight: scaleUtils.horizontalScale(10)
     },
     adviceText: {
       marginTop: 15,
       marginBottom: 20,
-      color: theme.ConsumptionAdvice.textColor,
+      color: theme.ConsumptionAdvice.textColor
     },
     titleLabel: {
       flex: 1,
-      color: theme.ConsumptionAdvice.titleColor,
-    },
+      color: theme.ConsumptionAdvice.titleColor
+    }
   });

package/src/lib/components/Banner/index.js

@@ -19,7 +19,7 @@ const Banner = ({ image, url, style }) => (
 Banner.propTypes = {
   url: string,
   // eslint-disable-next-line react/forbid-prop-types
-  image: any,
+  image: any
 };
 
 export default Banner;

package/src/lib/components/Banner/styles.js

@@ -7,12 +7,12 @@ export default StyleSheet.create({
   image: {
     resizeMode: 'contain',
     flex: 1,
-    aspectRatio: 1.728,
+    aspectRatio: 1.728
   },
   touchable: {
     borderRadius: 4,
     flex: 1,
     width: '100%',
-    flexDirection: 'row',
-  },
+    flexDirection: 'row'
+  }
 });

package/src/lib/components/BillCalculation/components/ConceptCard/index.js

@@ -14,7 +14,7 @@ const ConceptCard = ({ context, concept }) => {
     Touchable,
     Label,
     assets: { ArrowDown, ArrowUp },
-    config: { showZeroConcepts },
+    config: { showZeroConcepts }
   } = context;
   const linesToRender = showZeroConcepts ? concept?.lines : concept?.lines?.filter(line => line.amount);
   const [collapsed, toggleCollapsed] = useTogglableState(true);
@@ -91,10 +91,10 @@ ConceptCard.propTypes = {
       shape({
         title: string,
         description: string,
-        amount: number,
-      }),
-    ),
-  }),
+        amount: number
+      })
+    )
+  })
 };
 
 export default withContext()(ConceptCard);

package/src/lib/components/BillCalculation/components/ConceptCard/styles.js

@@ -9,31 +9,31 @@ export default StyleSheet.create({
     padding: verticalScale(10),
     flexDirection: 'row',
     justifyContent: 'space-between',
-    alignItems: 'center',
+    alignItems: 'center'
   },
   container: {
     paddingVertical: 16,
-    paddingHorizontal: 10,
+    paddingHorizontal: 10
   },
   icon: {
-    top: 1,
+    top: 1
   },
   conceptContainer: {
     alignItems: 'center',
     flexDirection: 'row',
-    justifyContent: 'space-between',
+    justifyContent: 'space-between'
   },
   totalContainer: {
     alignItems: 'center',
     flexDirection: 'row',
     flex: 1,
-    justifyContent: 'flex-end',
+    justifyContent: 'flex-end'
   },
   collapsable: {
-    paddingRight: ICON_SIZE + ICON_MARGIN,
+    paddingRight: ICON_SIZE + ICON_MARGIN
   },
   decimal: {
-    marginTop: 0,
+    marginTop: 0
   },
   linesContainer: {
     flexDirection: 'row',
@@ -41,17 +41,17 @@ export default StyleSheet.create({
     justifyContent: 'space-between',
     paddingTop: 24,
     marginLeft: 5,
-    paddingRight: 17,
+    paddingRight: 17
   },
   conceptTitleLabel: {
     flex: 1,
-    textAlign: 'left',
+    textAlign: 'left'
   },
   iconContainer: {
-    marginLeft: 5,
+    marginLeft: 5
   },
   linesConcept: {
-    flex: 1,
+    flex: 1
   },
-  lineTitle: { flex: 1 },
+  lineTitle: { flex: 1 }
 });

package/src/lib/components/BillCalculation/components/DetailModalContent/index.js

@@ -13,9 +13,9 @@ const DetailModalContent = ({ onCloseModal, concepts, context }) => {
     config: {
       texts: {
         mainBillData: { conceptsDetailsModalHeader },
-        commons: { close },
-      },
-    },
+        commons: { close }
+      }
+    }
   } = context;
   const [openedItem, setOpenedItem] = useState();
 
@@ -74,12 +74,12 @@ DetailModalContent.propTypes = {
         shape({
           title: string,
           description: string,
-          amount: number,
-        }),
-      ),
-    }),
+          amount: number
+        })
+      )
+    })
   ),
-  onCloseModal: func,
+  onCloseModal: func
 };
 
 export default DetailModalContent;

package/src/lib/components/BillCalculation/components/DetailModalContent/styles.js

@@ -6,13 +6,13 @@ export default theme =>
   StyleSheet.create({
     upperContainer: {},
     icon: {
-      top: 1,
+      top: 1
     },
     header: {
       paddingHorizontal: 20,
       paddingVertical: 16,
       backgroundColor: theme.BillCalculation?.detailModal?.header,
-      width: '100%',
+      width: '100%'
     },
     conceptContainer: {
       alignItems: 'center',
@@ -22,35 +22,35 @@ export default theme =>
       borderBottomColor: theme.BillCalculation?.detailModal?.border,
       borderBottomWidth: 1,
       paddingHorizontal: 18,
-      paddingVertical: 18,
+      paddingVertical: 18
     },
     totalContainer: {
       alignItems: 'center',
       flexDirection: 'row',
       flex: 1,
-      justifyContent: 'flex-end',
+      justifyContent: 'flex-end'
     },
     collapsable: {
-      paddingRight: ICON_SIZE + ICON_MARGIN,
+      paddingRight: ICON_SIZE + ICON_MARGIN
     },
     decimal: {
-      marginTop: 0,
+      marginTop: 0
     },
     linesContainer: {
       flexDirection: 'row',
       flex: 1,
       justifyContent: 'space-between',
-      paddingHorizontal: 15,
+      paddingHorizontal: 15
     },
     conceptTitleLabel: {
       width: '90%',
-      textAlign: 'left',
+      textAlign: 'left'
     },
     iconContainer: {
-      marginLeft: 5,
+      marginLeft: 5
     },
     linesConcept: {
-      flex: 1,
+      flex: 1
     },
     lineTitle: { flex: 1 },
     closeButton: {
@@ -59,6 +59,6 @@ export default theme =>
       backgroundColor: theme.BillCalculation?.detailModal?.closeButton,
       borderRadius: 4,
       marginTop: 20,
-      alignSelf: 'center',
-    },
+      alignSelf: 'center'
+    }
   });

package/src/lib/components/BillCalculation/index.js

@@ -19,18 +19,18 @@ const BillCalculation = ({ bill, context }) => {
   const {
     Label,
     Touchable,
-    config: { texts },
+    config: { texts }
   } = context;
   const {
     texts: {
-      mainBillData: { billedPeriod, conceptsDetailsButton },
+      mainBillData: { billedPeriod, conceptsDetailsButton }
     },
-    validators: { showPeriodWithMonth },
+    validators: { showPeriodWithMonth }
   } = config;
   const styles = useThemedStyle(getStyles);
   const { periodicity, periodNumber, currentSettlement, totalSettlements, periodYear } = titleMapper(
     bill,
-    texts,
+    texts
   );
   const { periods } = bill;
   const currentPeriod = periods.find(period => period.current);
@@ -73,6 +73,7 @@ const BillCalculation = ({ bill, context }) => {
           scrollEnabled={false}
           keyExtractor={item => item.title}
           showsVerticalScrollIndicator={false}
+          // eslint-disable-next-line react/no-unstable-nested-components
           ItemSeparatorComponent={() => <SeparatorBar style={styles.separatorBar} />}
         />
       </View>
@@ -107,6 +108,6 @@ const BillCalculation = ({ bill, context }) => {
   );
 };
 BillCalculation.propTypes = {
-  bill: billDataTypes,
+  bill: billDataTypes
 };
 export default withContext()(BillCalculation);

package/src/lib/components/BillCalculation/styles.js

@@ -3,19 +3,19 @@ import { StyleSheet } from 'react-native';
 export default (theme, colors) =>
   StyleSheet.create({
     container: {
-      width: '100%',
+      width: '100%'
     },
     totalContainer: {
       alignItems: 'center',
       flexDirection: 'row',
-      justifyContent: 'space-between',
+      justifyContent: 'space-between'
     },
     decimal: {
-      marginTop: 0,
+      marginTop: 0
     },
     modal: {
       paddingHorizontal: 0,
-      paddingVertical: 0,
+      paddingVertical: 0
     },
     upperContainer: {
       marginTop: 10,
@@ -23,7 +23,7 @@ export default (theme, colors) =>
       width: '100%',
       borderColor: '#DFDFDF',
       borderTopLeftRadius: 10,
-      borderTopRightRadius: 10,
+      borderTopRightRadius: 10
     },
     header: {
       borderBottomWidth: 1,
@@ -33,7 +33,7 @@ export default (theme, colors) =>
       minWidth: '100%',
       alignItems: 'center',
       paddingHorizontal: 10,
-      paddingVertical: 18,
+      paddingVertical: 18
     },
     totalAmount: {
       flexDirection: 'row',
@@ -47,17 +47,17 @@ export default (theme, colors) =>
       justifyContent: 'space-between',
       backgroundColor: colors.primary,
       borderBottomLeftRadius: 10,
-      borderBottomRightRadius: 10,
+      borderBottomRightRadius: 10
     },
     headerWithDate: {
       flexDirection: 'row',
-      justifyContent: 'space-between',
+      justifyContent: 'space-between'
     },
     stretchItems: {
-      alignItems: 'stretch',
+      alignItems: 'stretch'
     },
     headerTitle: {
-      fontWeight: '600',
+      fontWeight: '600'
     },
     openButton: {
       padding: 12,
@@ -65,6 +65,6 @@ export default (theme, colors) =>
       width: '100%',
       borderRadius: 4,
       marginTop: 20,
-      alignSelf: 'center',
-    },
+      alignSelf: 'center'
+    }
   });

package/src/lib/components/BillSummary/components/BillRate/index.js

@@ -11,11 +11,11 @@ const BillRate = ({ context, bill, theme }) => {
   const { config, Label } = context;
   const {
     texts: {
-      ratesDefinition: { rate, category },
-    },
+      ratesDefinition: { rate, category }
+    }
   } = config;
 
-  const { rate: billRate } = bill?.client;
+  const { rate: billRate } = bill?.client || {};
 
   return (
     <View style={styles.root}>
@@ -24,11 +24,9 @@ const BillRate = ({ context, bill, theme }) => {
           {rate}
         </Label>
         <View semibold style={[styles.rateBadgeContainer, theme.noPendingDebt]}>
-          <Label
-            bold
-            small
-            style={[styles.rateBadge, theme.noPendingDebtLabel]}>{`${category} ${billRate.category ||
-            '-'}`}</Label>
+          <Label bold small style={[styles.rateBadge, theme.noPendingDebtLabel]}>{`${category} ${
+            billRate.category || '-'
+          }`}</Label>
         </View>
       </View>
       <Label h1 primary>
@@ -40,7 +38,7 @@ const BillRate = ({ context, bill, theme }) => {
 
 BillRate.propTypes = {
   context: contextApiInfoTypes,
-  bill: billDataTypes,
+  bill: billDataTypes
 };
 
 export default withContext(retrieveStyles)(BillRate);

package/src/lib/components/BillSummary/components/BillRate/styles.js

@@ -15,12 +15,12 @@ export default StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'space-between',
     flex: 1,
-    width: '100%',
+    width: '100%'
   },
   content: {
-    paddingHorizontal: 10,
+    paddingHorizontal: 10
   },
   rateBadge: { marginHorizontal: 12, marginVertical: 7 },
   rateBadgeContainer: { borderRadius: 50, marginLeft: 15 },
-  leftContainer: { flexDirection: 'row', alignItems: 'center' },
+  leftContainer: { flexDirection: 'row', alignItems: 'center' }
 });

package/src/lib/components/BillSummary/components/ConceptSummary/components/ConceptBar/index.js

@@ -12,7 +12,7 @@ import styles, { retrieveStyles } from './styles';
 const ConceptBar = ({ context, concept = {}, percentage = 0, primaryConcept, theme, showPercentage }) => {
   const {
     Label,
-    config: { numeral },
+    config: { numeral }
   } = context;
 
   return (
@@ -39,9 +39,9 @@ const ConceptBar = ({ context, concept = {}, percentage = 0, primaryConcept, the
               style={[
                 styles.progressBar,
                 {
-                  width: `${percentage}%`,
+                  width: `${percentage}%`
                 },
-                theme && { backgroundColor: primaryConcept ? theme.primary : theme.gray },
+                theme && { backgroundColor: primaryConcept ? theme.primary : theme.gray }
               ]}
             />
           </View>
@@ -67,7 +67,7 @@ ConceptBar.propTypes = {
   concept: billDataTypes,
   percentage: string,
   primaryConcept: bool,
-  showPercentage: bool,
+  showPercentage: bool
 };
 
 export default withContext(retrieveStyles)(ConceptBar);

package/src/lib/components/BillSummary/components/ConceptSummary/components/ConceptBar/styles.js

@@ -7,27 +7,27 @@ export default StyleSheet.create({
     flex: 1,
     flexDirection: 'row',
     justifyContent: 'space-between',
-    marginTop: 17,
+    marginTop: 17
   },
   progressBarContainer: {
-    width: '60%',
+    width: '60%'
   },
   progressBar: {
     marginTop: 5,
     height: 10,
     backgroundColor: '#387AC9',
-    borderRadius: 2,
+    borderRadius: 2
   },
   decimal: {
-    marginTop: 0,
+    marginTop: 0
   },
   totalContainer: {
-    flexDirection: 'row',
+    flexDirection: 'row'
   },
   percentageContainer: {
-    marginTop: 6,
+    marginTop: 6
   },
   addTopMargin: {
-    marginTop: 2,
-  },
+    marginTop: 2
+  }
 });

package/src/lib/components/BillSummary/components/ConceptSummary/components/ConceptLine/index.js

@@ -11,8 +11,8 @@ const ConceptLine = ({ color, total, percentage, title, context, primaryConcept
   const {
     Label,
     config: {
-      formatters: { percentageFormatter },
-    },
+      formatters: { percentageFormatter }
+    }
   } = context;
   return (
     <View>
@@ -35,8 +35,7 @@ const ConceptLine = ({ color, total, percentage, title, context, primaryConcept
         </View>
       </View>
       <Label primary={primaryConcept} midGray={!primaryConcept} small style={styles.percentage}>
-        {percentageFormatter(percentage)}
-        {'%'}
+        {percentageFormatter(percentage)}%
       </Label>
     </View>
   );
@@ -46,7 +45,7 @@ ConceptLine.propTypes = {
   title: string,
   total: number,
   percentage: number,
-  primaryConcept: bool,
+  primaryConcept: bool
 };
 
 export default withContext()(ConceptLine);