@jobber/components-native 0.85.1-JOB-124062-569fcb4.27 → 0.85.1-JOB-136074-0fe613a.28

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

@@ -1,9 +1,9 @@
-import type { DeepPartial, FieldValues } from "react-hook-form";
+import type { FieldValues } from "react-hook-form";
 interface FormCacheProps<T extends FieldValues> {
     readonly localCacheId?: string | string[];
     readonly localCacheKey?: string;
     readonly localCacheExclude?: string[];
-    readonly setLocalCache: (data: DeepPartial<T>) => void;
+    readonly setLocalCache: (data: 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 { DeepPartial, FieldValues, UseFormReturn } from "react-hook-form";
+import type { 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: DeepPartial<TData>) => void;
+        setLocalCache: (data: TData) => void;
         removeLocalCache: () => void;
     };
 }

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

@@ -1,4 +1,4 @@
-import type { DeepPartial, FieldValues, UseFormHandleSubmit, UseFormReturn } from "react-hook-form";
+import type { 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: DeepPartial<T>) => void;
+    readonly setLocalCache: (data: 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, DefaultValues, FieldPath, FieldValues, Mode, UseFormReturn } from "react-hook-form";
+import type { ControllerProps, DeepPartial, 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> = T;
+export type FormValues<T> = UnpackNestedValue<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?: DefaultValues<T>;
+    initialValues?: FormValues<DeepPartial<T>>;
     /**
      * When the validation should happen.
      * Possible values are "onBlur", "onChange", "onSubmit", "onTouched", and "all".

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.85.1-JOB-124062-569fcb4.27+569fcb4b6",
+  "version": "0.85.1-JOB-136074-0fe613a.28+0fe613a84",
   "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.52.0",
+    "react-hook-form": "^7.30.0",
     "react-intl": "^6.4.2",
     "react-native-keyboard-aware-scroll-view": "^0.9.5",
     "react-native-modalize": "^2.0.13",
@@ -86,6 +86,7 @@
     "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",
@@ -95,5 +96,10 @@
     "react-native-safe-area-context": "^5.4.0",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "569fcb4b6d2ef0068470ad901519b1a01de00ba5"
+  "peerDependenciesMeta": {
+    "react-native-build-config": {
+      "optional": true
+    }
+  },
+  "gitHead": "0fe613a84c9d804a249c128d7cd35ea5a6cbda38"
 }

package/src/Form/Form.tsx

@@ -26,6 +26,7 @@ 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";
@@ -134,6 +135,9 @@ 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}>
       <>
@@ -161,6 +165,7 @@ function InternalForm<T extends FieldValues, S>({
           <KeyboardAwareScrollView
             enableResetScrollToCoords={false}
             enableAutomaticScroll={true}
+            enableOnAndroid={edgeToEdgeEnabled}
             keyboardOpeningTime={
               Platform.OS === "ios" ? tokens["timing-slowest"] : 0
             }
@@ -168,6 +173,7 @@ 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 { DeepPartial, FieldValues } from "react-hook-form";
+import type { 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: DeepPartial<T>) => void;
+  readonly setLocalCache: (data: 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({ control });
+  const formData = useWatch<T>({ control });
   const shouldExclude = useMemo(() => {
     return Array.isArray(localCacheExclude) && localCacheExclude.length > 0;
   }, [localCacheExclude]);
@@ -46,6 +46,5 @@ 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 { DeepPartial, FieldValues, UseFormReturn } from "react-hook-form";
+import type { FieldValues, UseFormReturn } from "react-hook-form";
 
 export interface UseConfirmBeforeBackProps {
   alwaysPreventBack: boolean;
@@ -27,7 +27,7 @@ export interface AtlantisFormContextProps {
     cacheKey?: string,
     options?: LocalCacheOptions,
   ) => {
-    setLocalCache: (data: DeepPartial<TData>) => void;
+    setLocalCache: (data: TData) => void;
     removeLocalCache: () => void;
   };
 }

package/src/Form/hooks/useInternalForm.ts

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

package/src/Form/types.ts

@@ -1,16 +1,17 @@
 import type { MutableRefObject, RefObject } from "react";
 import type {
   ControllerProps,
-  DefaultValues,
+  DeepPartial,
   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> = T;
+export type FormValues<T> = UnpackNestedValue<T>;
 export type FormErrors = FormNetworkErrors | FormUserErrors;
 export type FormBannerMessage = FormWarningMessage | FormNoticeMessage;
 
@@ -108,7 +109,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?: DefaultValues<T>;
+  initialValues?: FormValues<DeepPartial<T>>;
 
   /**
    * When the validation should happen.

package/src/InputCurrency/InputCurrency.tsx

@@ -80,56 +80,6 @@ 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,
@@ -149,6 +99,54 @@ 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,
@@ -160,37 +158,19 @@ export function InputCurrency(props: InputCurrencyProps): JSX.Element {
       : wholeIntegerValue;
 
     if (isValidNumber(numberedValue) && typeof numberedValue === "number") {
-      const result = computeDisplayFromNumericInput(
+      checkDecimalAndI18nOfDisplayValue(
         numberedValue,
         decimalNumbers,
         decimalCount,
-        maxLength,
-        maxDecimalPlaces,
-        decimalPlaces,
-        intl.formatNumber,
       );
-      const { onChangeValue, displayValue: valueToDisplay } = result;
-      props.onChange?.(onChangeValue);
-      setDisplayValue(valueToDisplay);
     } else {
       const value = numberedValue?.toString() + decimalNumbers;
-      props.onChange?.(value);
-      setDisplayValue(value);
+      setOnChangeAndDisplayValues(value, 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}
@@ -207,7 +187,13 @@ export function InputCurrency(props: InputCurrencyProps): JSX.Element {
             .replace(floatSeparators.decimal, ".");
         },
       }}
-      validations={mergedValidations}
+      validations={{
+        pattern: {
+          value: NUMBER_VALIDATION_REGEX,
+          message: t("errors.notANumber"),
+        },
+        ...props.validations,
+      }}
       onBlur={() => {
         props.onBlur?.();
 

package/src/InputEmail/InputEmail.tsx

@@ -7,17 +7,6 @@ export const InputEmail = forwardRef(InputEmailInternal);
 type InputEmailProps = Omit<InputTextProps, "keyboard">;
 
 function InputEmailInternal(props: InputEmailProps, ref: Ref<InputTextRef>) {
-  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: "Enter a valid email address (email@example.com)",
-    },
-  } as const;
-  const mergedValidations = props.validations
-    ? Object.assign({}, defaultValidations, props.validations)
-    : defaultValidations;
-
   return (
     <InputText
       {...props}
@@ -25,7 +14,14 @@ function InputEmailInternal(props: InputEmailProps, ref: Ref<InputTextRef>) {
       autoCapitalize="none"
       autoCorrect={false}
       keyboard={"email-address"}
-      validations={mergedValidations}
+      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,
+      }}
     />
   );
 }

package/src/InputNumber/InputNumber.tsx

@@ -46,16 +46,6 @@ 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}
@@ -68,7 +58,13 @@ function InputNumberInternal(props: InputNumberProps, ref: Ref<InputTextRef>) {
       value={props.value?.toString()}
       defaultValue={props.defaultValue?.toString()}
       onChangeText={handleChange}
-      validations={mergedValidations}
+      validations={{
+        pattern: {
+          value: NUMBER_VALIDATION_REGEX,
+          message: t("errors.notANumber"),
+        },
+        ...props.validations,
+      }}
     />
   );
 }

package/src/hooks/useFormController.ts

@@ -4,7 +4,7 @@ import type {
   RegisterOptions,
   UseControllerReturn,
 } from "react-hook-form";
-import { get, useController, useForm, useFormContext } from "react-hook-form";
+import { useController, useForm, useFormContext } from "react-hook-form";
 import { useState } from "react";
 
 interface UseFormControllerProps<T> {
@@ -44,11 +44,18 @@ export function useFormController<T>({
   });
 
   // The naming convention established by react-hook-form for arrays of fields is, for example, "emails.0.description".
-  // 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];
+  // 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];
+  }
 
   return { error, field };
 }

package/src/types/buildConfig.d.ts

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,21 @@
+import { Platform } from "react-native";
+
+type BuildCfg = { IS_EDGE_TO_EDGE_ENABLED?: boolean } | undefined | null;
+
+function loadBuildConfig(): BuildCfg {
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    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;
+}