@jobber/components-native 0.86.1-JOB-136074-a7a2b82.0 → 0.86.1

package/dist/types/src/Form/components/FormCache/FormCache.d.ts

@@ -1,9 +1,9 @@
-import type { FieldValues } from "react-hook-form";
+import type { DeepPartial, FieldValues } from "react-hook-form";
 interface FormCacheProps<T extends FieldValues> {
     readonly localCacheId?: string | string[];
     readonly localCacheKey?: string;
     readonly localCacheExclude?: string[];
-    readonly setLocalCache: (data: T) => void;
+    readonly setLocalCache: (data: DeepPartial<T>) => void;
 }
 export declare function FormCache<T extends FieldValues>({ localCacheExclude, localCacheKey, setLocalCache, }: FormCacheProps<T>): JSX.Element;
 export {};

package/dist/types/src/Form/context/types.d.ts

@@ -1,5 +1,5 @@
 import type { MutableRefObject } from "react";
-import type { FieldValues, UseFormReturn } from "react-hook-form";
+import type { DeepPartial, FieldValues, UseFormReturn } from "react-hook-form";
 export interface UseConfirmBeforeBackProps {
     alwaysPreventBack: boolean;
     onAcceptEvent?: () => void;
@@ -18,7 +18,7 @@ interface LocalCacheOptions {
 export interface AtlantisFormContextProps {
     useConfirmBeforeBack: (props: UseConfirmBeforeBackProps) => MutableRefObject<() => void>;
     useInternalFormLocalCache: <TData extends FieldValues>(formMethods: UseFormReturn<TData>, cacheKey?: string, options?: LocalCacheOptions) => {
-        setLocalCache: (data: TData) => void;
+        setLocalCache: (data: DeepPartial<TData>) => void;
         removeLocalCache: () => void;
     };
 }

package/dist/types/src/Form/hooks/useInternalForm.d.ts

@@ -1,4 +1,4 @@
-import type { FieldValues, UseFormHandleSubmit, UseFormReturn } from "react-hook-form";
+import type { DeepPartial, FieldValues, UseFormHandleSubmit, UseFormReturn } from "react-hook-form";
 import type { MutableRefObject, RefObject } from "react";
 import type { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import type { InternalFormProps } from "../types";
@@ -13,7 +13,7 @@ interface UseInternalForm<T extends FieldValues> {
     readonly isSubmitting: boolean;
     readonly isDirty: boolean;
     readonly removeListenerRef: MutableRefObject<() => void>;
-    readonly setLocalCache: (data: T) => void;
+    readonly setLocalCache: (data: DeepPartial<T>) => void;
 }
 export declare function useInternalForm<T extends FieldValues, SubmitResponseType>({ mode, reValidateMode, initialValues, formRef, localCacheKey, localCacheId, scrollViewRef, saveButtonHeight, messageBannerHeight, }: UseInternalFormProps<T, SubmitResponseType>): UseInternalForm<T>;
 export {};

package/dist/types/src/Form/types.d.ts

@@ -1,8 +1,8 @@
 import type { MutableRefObject, RefObject } from "react";
-import type { ControllerProps, DeepPartial, FieldPath, FieldValues, Mode, UnpackNestedValue, UseFormReturn } from "react-hook-form";
+import type { ControllerProps, DefaultValues, FieldPath, FieldValues, Mode, UseFormReturn } from "react-hook-form";
 import type { IconNames } from "@jobber/design";
 import type { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
-export type FormValues<T> = UnpackNestedValue<T>;
+export type FormValues<T> = T;
 export type FormErrors = FormNetworkErrors | FormUserErrors;
 export type FormBannerMessage = FormWarningMessage | FormNoticeMessage;
 export declare enum FormSubmitErrorType {
@@ -81,7 +81,7 @@ export interface FormProps<T extends FieldValues, SubmitResponseType> {
      * The initial values of the form inputs
      * This should be available as soon as initialLoading is set to false
      */
-    initialValues?: FormValues<DeepPartial<T>>;
+    initialValues?: DefaultValues<T>;
     /**
      * When the validation should happen.
      * Possible values are "onBlur", "onChange", "onSubmit", "onTouched", and "all".

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.86.1-JOB-136074-a7a2b82.0+a7a2b8288",
+  "version": "0.86.1",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -43,7 +43,7 @@
     "autolinker": "^4.0.0",
     "deepmerge": "^4.2.2",
     "lodash": "^4.17.21",
-    "react-hook-form": "^7.30.0",
+    "react-hook-form": "^7.52.0",
     "react-intl": "^6.4.2",
     "react-native-keyboard-aware-scroll-view": "^0.9.5",
     "react-native-modalize": "^2.0.13",
@@ -86,7 +86,6 @@
     "react": "^18.2.0",
     "react-intl": "^6.4.2",
     "react-native": ">=0.76.0",
-    "react-native-build-config": "^0.3.2",
     "react-native-gesture-handler": ">=2.10.0",
     "react-native-keyboard-aware-scroll-view": "^0.9.5",
     "react-native-modal-datetime-picker": " >=13.0.0",
@@ -96,10 +95,5 @@
     "react-native-safe-area-context": "^5.4.0",
     "react-native-svg": ">=12.0.0"
   },
-  "peerDependenciesMeta": {
-    "react-native-build-config": {
-      "optional": true
-    }
-  },
-  "gitHead": "a7a2b828816e7a2eae21ead0e0eba40d494e284a"
+  "gitHead": "ca472a375fdf3c6b8e8596c3c26a3958893093ec"
 }

package/src/Form/Form.tsx

@@ -26,7 +26,6 @@ import { useScrollToError } from "./hooks/useScrollToError";
 import { FormSaveButton } from "./components/FormSaveButton";
 import { useSaveButtonPosition } from "./hooks/useSaveButtonPosition";
 import { FormCache } from "./components/FormCache/FormCache";
-import { isEdgeToEdgeEnabled } from "../utils/buildConfig/isEdgeToEdgeEnabled";
 import { InputAccessoriesProvider } from "../InputText";
 import { tokens } from "../utils/design";
 import { ErrorMessageProvider } from "../ErrorMessageWrapper";
@@ -135,9 +134,6 @@ function InternalForm<T extends FieldValues, S>({
 
   const styles = useStyles();
 
-  // Check if edge-to-edge is enabled using utility function
-  const edgeToEdgeEnabled = isEdgeToEdgeEnabled();
-
   return (
     <FormProvider {...formMethods}>
       <>
@@ -165,7 +161,6 @@ function InternalForm<T extends FieldValues, S>({
           <KeyboardAwareScrollView
             enableResetScrollToCoords={false}
             enableAutomaticScroll={true}
-            enableOnAndroid={edgeToEdgeEnabled}
             keyboardOpeningTime={
               Platform.OS === "ios" ? tokens["timing-slowest"] : 0
             }
@@ -173,7 +168,6 @@ function InternalForm<T extends FieldValues, S>({
             ref={scrollViewRef}
             {...keyboardProps}
             extraHeight={headerHeight}
-            extraScrollHeight={edgeToEdgeEnabled ? 20 : 0}
             contentContainerStyle={
               !keyboardHeight && styles.scrollContentContainer
             }

package/src/Form/components/FormCache/FormCache.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo } from "react";
-import type { FieldValues } from "react-hook-form";
+import type { DeepPartial, FieldValues } from "react-hook-form";
 import { useFormContext, useWatch } from "react-hook-form";
 import omit from "lodash/omit";
 
@@ -7,7 +7,7 @@ interface FormCacheProps<T extends FieldValues> {
   readonly localCacheId?: string | string[];
   readonly localCacheKey?: string;
   readonly localCacheExclude?: string[];
-  readonly setLocalCache: (data: T) => void;
+  readonly setLocalCache: (data: DeepPartial<T>) => void;
 }
 
 export function FormCache<T extends FieldValues>({
@@ -18,7 +18,7 @@ export function FormCache<T extends FieldValues>({
   const { control, formState } = useFormContext<T>();
   const { isDirty } = formState;
 
-  const formData = useWatch<T>({ control });
+  const formData = useWatch({ control });
   const shouldExclude = useMemo(() => {
     return Array.isArray(localCacheExclude) && localCacheExclude.length > 0;
   }, [localCacheExclude]);
@@ -46,5 +46,6 @@ export function FormCache<T extends FieldValues>({
     }
   }, [formData, isDirty, localCacheExclude, setLocalCache, shouldExclude]);
 
+  // eslint-disable-next-line react/jsx-no-useless-fragment
   return <></>;
 }

package/src/Form/context/types.ts

@@ -1,5 +1,5 @@
 import type { MutableRefObject } from "react";
-import type { FieldValues, UseFormReturn } from "react-hook-form";
+import type { DeepPartial, FieldValues, UseFormReturn } from "react-hook-form";
 
 export interface UseConfirmBeforeBackProps {
   alwaysPreventBack: boolean;
@@ -27,7 +27,7 @@ export interface AtlantisFormContextProps {
     cacheKey?: string,
     options?: LocalCacheOptions,
   ) => {
-    setLocalCache: (data: TData) => void;
+    setLocalCache: (data: DeepPartial<TData>) => void;
     removeLocalCache: () => void;
   };
 }

package/src/Form/hooks/useInternalForm.ts

@@ -1,4 +1,5 @@
 import type {
+  DeepPartial,
   FieldValues,
   UseFormHandleSubmit,
   UseFormReturn,
@@ -31,7 +32,7 @@ interface UseInternalForm<T extends FieldValues> {
   readonly isSubmitting: boolean;
   readonly isDirty: boolean;
   readonly removeListenerRef: MutableRefObject<() => void>;
-  readonly setLocalCache: (data: T) => void;
+  readonly setLocalCache: (data: DeepPartial<T>) => void;
 }
 
 export function useInternalForm<T extends FieldValues, SubmitResponseType>({

package/src/Form/types.ts

@@ -1,17 +1,16 @@
 import type { MutableRefObject, RefObject } from "react";
 import type {
   ControllerProps,
-  DeepPartial,
+  DefaultValues,
   FieldPath,
   FieldValues,
   Mode,
-  UnpackNestedValue,
   UseFormReturn,
 } from "react-hook-form";
 import type { IconNames } from "@jobber/design";
 import type { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 
-export type FormValues<T> = UnpackNestedValue<T>;
+export type FormValues<T> = T;
 export type FormErrors = FormNetworkErrors | FormUserErrors;
 export type FormBannerMessage = FormWarningMessage | FormNoticeMessage;
 
@@ -109,7 +108,7 @@ export interface FormProps<T extends FieldValues, SubmitResponseType> {
    * The initial values of the form inputs
    * This should be available as soon as initialLoading is set to false
    */
-  initialValues?: FormValues<DeepPartial<T>>;
+  initialValues?: DefaultValues<T>;
 
   /**
    * When the validation should happen.

package/src/InputCurrency/InputCurrency.tsx

@@ -80,6 +80,56 @@ const getKeyboard = (props: InputCurrencyProps) => {
   }
 };
 
+const computeDisplayFromNumericInput = (
+  numberedValue: number,
+  decimalNumbers: string,
+  decimalCount: number,
+  maxLength: number,
+  maxDecimalPlaces: number,
+  decimalPlaces: number,
+  formatNumber: (
+    value: number,
+    opts?: FormatNumberOptions | undefined,
+  ) => string,
+): {
+  onChangeValue: number | string;
+  displayValue: string;
+} => {
+  const transformedValue = limitInputWholeDigits(numberedValue, maxLength);
+  const stringValue =
+    decimalNumbers !== ""
+      ? transformedValue.toString() + "." + decimalNumbers.slice(1)
+      : transformedValue.toString();
+
+  if (checkLastChar(stringValue)) {
+    const roundedDecimal = configureDecimal(
+      decimalCount,
+      maxDecimalPlaces,
+      stringValue,
+      decimalPlaces,
+    );
+    const internationalizedValueToDisplay = formatNumber(roundedDecimal, {
+      maximumFractionDigits: maxDecimalPlaces,
+    });
+
+    return {
+      onChangeValue: roundedDecimal,
+      displayValue: internationalizedValueToDisplay,
+    };
+  } else {
+    const internationalizedValueToDisplay =
+      formatNumber(transformedValue, {
+        maximumFractionDigits: maxDecimalPlaces,
+      }) + decimalNumbers;
+
+    return {
+      onChangeValue:
+        transformedValue.toString() + "." + decimalNumbers.slice(1),
+      displayValue: internationalizedValueToDisplay,
+    };
+  }
+};
+
 export function InputCurrency(props: InputCurrencyProps): JSX.Element {
   const {
     showCurrencySymbol = true,
@@ -99,54 +149,6 @@ export function InputCurrency(props: InputCurrencyProps): JSX.Element {
     internalValue,
   );
 
-  const setOnChangeAndDisplayValues = (
-    onChangeValue: number | string | undefined,
-    valueToDisplay: string | undefined,
-  ) => {
-    props.onChange?.(onChangeValue);
-    setDisplayValue(valueToDisplay);
-  };
-
-  const checkDecimalAndI18nOfDisplayValue = (
-    numberedValue: number,
-    decimalNumbers: string,
-    decimalCount: number,
-  ) => {
-    const transformedValue = limitInputWholeDigits(numberedValue, maxLength);
-    const stringValue =
-      decimalNumbers !== ""
-        ? transformedValue.toString() + "." + decimalNumbers.slice(1)
-        : transformedValue.toString();
-
-    if (checkLastChar(stringValue)) {
-      const roundedDecimal = configureDecimal(
-        decimalCount,
-        maxDecimalPlaces,
-        stringValue,
-        decimalPlaces,
-      );
-      const internationalizedValueToDisplay = intl.formatNumber(
-        roundedDecimal,
-        {
-          maximumFractionDigits: maxDecimalPlaces,
-        },
-      );
-      setOnChangeAndDisplayValues(
-        roundedDecimal,
-        internationalizedValueToDisplay,
-      );
-    } else {
-      const internationalizedValueToDisplay =
-        intl.formatNumber(transformedValue, {
-          maximumFractionDigits: maxDecimalPlaces,
-        }) + decimalNumbers;
-      setOnChangeAndDisplayValues(
-        transformedValue.toString() + "." + decimalNumbers.slice(1),
-        internationalizedValueToDisplay,
-      );
-    }
-  };
-
   const handleChange = (newValue: string | undefined) => {
     const [decimalCount, wholeIntegerValue, decimalNumbers] = parseGivenInput(
       newValue,
@@ -158,19 +160,37 @@ export function InputCurrency(props: InputCurrencyProps): JSX.Element {
       : wholeIntegerValue;
 
     if (isValidNumber(numberedValue) && typeof numberedValue === "number") {
-      checkDecimalAndI18nOfDisplayValue(
+      const result = computeDisplayFromNumericInput(
         numberedValue,
         decimalNumbers,
         decimalCount,
+        maxLength,
+        maxDecimalPlaces,
+        decimalPlaces,
+        intl.formatNumber,
       );
+      const { onChangeValue, displayValue: valueToDisplay } = result;
+      props.onChange?.(onChangeValue);
+      setDisplayValue(valueToDisplay);
     } else {
       const value = numberedValue?.toString() + decimalNumbers;
-      setOnChangeAndDisplayValues(value, value);
+      props.onChange?.(value);
+      setDisplayValue(value);
     }
   };
 
   const { t } = useAtlantisI18n();
 
+  const defaultValidations = {
+    pattern: {
+      value: NUMBER_VALIDATION_REGEX,
+      message: t("errors.notANumber"),
+    },
+  } as const;
+  const mergedValidations = props.validations
+    ? Object.assign({}, defaultValidations, props.validations)
+    : defaultValidations;
+
   return (
     <InputText
       {...props}
@@ -187,13 +207,7 @@ export function InputCurrency(props: InputCurrencyProps): JSX.Element {
             .replace(floatSeparators.decimal, ".");
         },
       }}
-      validations={{
-        pattern: {
-          value: NUMBER_VALIDATION_REGEX,
-          message: t("errors.notANumber"),
-        },
-        ...props.validations,
-      }}
+      validations={mergedValidations}
       onBlur={() => {
         props.onBlur?.();
 

package/src/InputEmail/InputEmail.tsx

@@ -2,11 +2,25 @@ import type { Ref } from "react";
 import React, { forwardRef } from "react";
 import type { InputTextProps, InputTextRef } from "../InputText";
 import { InputText } from "../InputText";
+import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
 
 export const InputEmail = forwardRef(InputEmailInternal);
 type InputEmailProps = Omit<InputTextProps, "keyboard">;
 
 function InputEmailInternal(props: InputEmailProps, ref: Ref<InputTextRef>) {
+  const { t } = useAtlantisI18n();
+
+  const defaultValidations = {
+    pattern: {
+      value:
+        /[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?/,
+      message: t("InputEmail.enterEmail"),
+    },
+  } as const;
+  const mergedValidations = props.validations
+    ? Object.assign({}, defaultValidations, props.validations)
+    : defaultValidations;
+
   return (
     <InputText
       {...props}
@@ -14,14 +28,7 @@ function InputEmailInternal(props: InputEmailProps, ref: Ref<InputTextRef>) {
       autoCapitalize="none"
       autoCorrect={false}
       keyboard={"email-address"}
-      validations={{
-        pattern: {
-          value:
-            /[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?/,
-          message: "Enter a valid email address (email@example.com)",
-        },
-        ...props.validations,
-      }}
+      validations={mergedValidations}
     />
   );
 }

package/src/InputNumber/InputNumber.tsx

@@ -46,6 +46,16 @@ function InputNumberInternal(props: InputNumberProps, ref: Ref<InputTextRef>) {
   const { inputTransform: convertToString, outputTransform: convertToNumber } =
     useNumberTransform(props.value);
 
+  const defaultValidations = {
+    pattern: {
+      value: NUMBER_VALIDATION_REGEX,
+      message: t("errors.notANumber"),
+    },
+  } as const;
+  const mergedValidations = props.validations
+    ? Object.assign({}, defaultValidations, props.validations)
+    : defaultValidations;
+
   return (
     <InputText
       {...props}
@@ -58,13 +68,7 @@ function InputNumberInternal(props: InputNumberProps, ref: Ref<InputTextRef>) {
       value={props.value?.toString()}
       defaultValue={props.defaultValue?.toString()}
       onChangeText={handleChange}
-      validations={{
-        pattern: {
-          value: NUMBER_VALIDATION_REGEX,
-          message: t("errors.notANumber"),
-        },
-        ...props.validations,
-      }}
+      validations={mergedValidations}
     />
   );
 }

package/src/hooks/useAtlantisI18n/locales/en.json

@@ -18,6 +18,7 @@
   "goBack": "Go back",
   "InputFieldWrapper.clear": "Clear input",
   "InputPassword.enterPassword": "Enter a password",
+  "InputEmail.enterEmail": "Enter a valid email address (email@example.com)",
   "loading": "Loading",
   "menu": "Menu",
   "more": "More",

package/src/hooks/useAtlantisI18n/locales/es.json

@@ -18,6 +18,7 @@
   "goBack": "Volver",
   "InputFieldWrapper.clear": "Borrar",
   "InputPassword.enterPassword": "Escriba una contraseña",
+  "InputEmail.enterEmail": "Introduzca una dirección de correo electrónico válida (email@example.com)",
   "loading": "Cargando",
   "menu": "Menú",
   "more": "Más",

package/src/hooks/useFormController.ts

@@ -4,7 +4,7 @@ import type {
   RegisterOptions,
   UseControllerReturn,
 } from "react-hook-form";
-import { useController, useForm, useFormContext } from "react-hook-form";
+import { get, useController, useForm, useFormContext } from "react-hook-form";
 import { useState } from "react";
 
 interface UseFormControllerProps<T> {
@@ -44,18 +44,11 @@ export function useFormController<T>({
   });
 
   // The naming convention established by react-hook-form for arrays of fields is, for example, "emails.0.description".
-  // This corresponds to the structure of the error object, e.g. { emails: { 0: { description: "foobar" } } }
-  // We assume here that fields will either follow this period-delimited three-part convention, or else that they are simple and indivisible (e.g. "city").
-  // TODO: Add support for two-part identifiers (e.g. "property.province")
-  const fieldIdentifiers = fieldName.split(".");
-  let error: FieldError | undefined;
-
-  if (fieldIdentifiers.length === 3) {
-    const [section, item, identifier] = fieldIdentifiers;
-    error = errors[section]?.[item]?.[identifier];
-  } else {
-    error = errors[fieldName];
-  }
+  // Preserve original behavior: only treat three-part names as nested paths.
+  // For anything else, perform a flat lookup to avoid behavioral changes.
+  const identifiers = fieldName.split(".");
+  const error =
+    identifiers.length === 3 ? get(errors, fieldName) : errors[fieldName];
 
   return { error, field };
 }

package/dist/src/utils/buildConfig/isEdgeToEdgeEnabled.js

@@ -1,17 +0,0 @@
-import { Platform } from "react-native";
-function loadBuildConfig() {
-    var _a;
-    try {
-        const mod = require("react-native-build-config");
-        return ((_a = mod === null || mod === void 0 ? void 0 : mod.default) !== null && _a !== void 0 ? _a : mod);
-    }
-    catch (_b) {
-        return null; // module not installed or not linked
-    }
-}
-export function isEdgeToEdgeEnabled() {
-    if (Platform.OS !== "android")
-        return false;
-    const cfg = loadBuildConfig();
-    return !!(cfg === null || cfg === void 0 ? void 0 : cfg.IS_EDGE_TO_EDGE_ENABLED);
-}

package/dist/types/src/utils/buildConfig/isEdgeToEdgeEnabled.d.ts

@@ -1 +0,0 @@
-export declare function isEdgeToEdgeEnabled(): boolean;

package/src/types/buildConfig.d.ts

@@ -1,7 +0,0 @@
-declare module "react-native-build-config" {
-  const BuildConfig: {
-    IS_EDGE_TO_EDGE_ENABLED?: boolean;
-    [k: string]: unknown;
-  };
-  export = BuildConfig;
-}

package/src/utils/buildConfig/isEdgeToEdgeEnabled.ts

@@ -1,20 +0,0 @@
-import { Platform } from "react-native";
-
-type BuildCfg = { IS_EDGE_TO_EDGE_ENABLED?: boolean } | undefined | null;
-
-function loadBuildConfig(): BuildCfg {
-  try {
-    const mod = require("react-native-build-config");
-
-    return (mod?.default ?? mod) as BuildCfg;
-  } catch {
-    return null; // module not installed or not linked
-  }
-}
-
-export function isEdgeToEdgeEnabled(): boolean {
-  if (Platform.OS !== "android") return false;
-  const cfg = loadBuildConfig();
-
-  return !!cfg?.IS_EDGE_TO_EDGE_ENABLED;
-}