@jobber/components-native 0.33.1 → 0.35.0

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

@@ -26,6 +26,10 @@ export interface AtlantisContextProps {
      * Grabs the decimal separator and group separator based on locale
      */
     readonly floatSeparators: Record<"decimal" | "group", string>;
+    /**
+     * The currency symbol Atlantis components will use
+     */
+    readonly currencySymbol: string;
 }
 export declare const defaultValues: AtlantisContextProps;
 export declare const AtlantisContext: import("react").Context<AtlantisContextProps>;

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

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import { FormatNumberOptions } from "react-intl";
+import { ControllerRenderProps, FieldValues } from "react-hook-form";
+import { InputTextProps } from "../InputText";
+export interface InputCurrencyProps extends Omit<InputTextProps, "keyboard" | "onChangeText" | "value" | "defaultValue"> {
+    /**
+     * Whether to display the user's currency symbol or not
+     * Default value is true
+     */
+    readonly showCurrencySymbol?: boolean;
+    /**
+     * The minimum decimal places for the currency number
+     * Default value is 2
+     */
+    readonly decimalPlaces?: number;
+    /**
+     * The maximum decimal places for the currency number
+     * Default value is 5
+     */
+    readonly maxDecimalPlaces?: number;
+    /**
+     * The maximum length of the input
+     * Default value is 10
+     */
+    readonly maxLength?: number;
+    onChange?(newValue?: number | string | undefined): void;
+    value?: number;
+    defaultValue?: number;
+    keyboard?: "decimal-pad" | "numbers-and-punctuation";
+}
+export declare const getInternalValue: (props: InputCurrencyProps, field: ControllerRenderProps<FieldValues, string>, formatNumber: (value: number | bigint, opts?: FormatNumberOptions | undefined) => string) => string;
+export declare function InputCurrency(props: InputCurrencyProps): JSX.Element;

package/dist/types/src/InputCurrency/constants.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_CURRENCY_SYMBOL = "$";

package/dist/types/src/InputCurrency/index.d.ts

@@ -0,0 +1,3 @@
+export { InputCurrency } from "./InputCurrency";
+export * from "./utils";
+export * from "./constants";

package/dist/types/src/InputCurrency/messages.d.ts

@@ -0,0 +1,7 @@
+export declare const messages: {
+    notANumberError: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

package/dist/types/src/InputCurrency/utils.d.ts

@@ -0,0 +1,9 @@
+export declare function countDecimal(value: number): number;
+export declare function limitInputWholeDigits(value: number, maxInputLength: number): number;
+export declare function configureDecimal(decimalCount: number, maxDecimalPlaces: number, transformedValue: string, decimalPlaces: number): number;
+export declare function convertToNumber(value: string): string | number;
+export declare const checkLastChar: (stringValue: string) => boolean;
+export declare const isValidNumber: (numberedValue: string | number | undefined) => boolean;
+export declare const getDecimalNumbers: (value: string, decimalSeparator: string) => string;
+export declare const parseGivenInput: (value: string | undefined, decimalSeparator: string) => [number, string | undefined, string];
+export declare const NUMBER_VALIDATION_REGEX: RegExp;

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

@@ -0,0 +1,61 @@
+/// <reference types="react" />
+import { UseControllerProps } from "react-hook-form";
+import { XOR } from "ts-xor";
+import { Clearable, InputFieldWrapperProps } from "../InputFieldWrapper";
+interface InputTimeBaseProps extends Pick<InputFieldWrapperProps, "invalid" | "disabled" | "placeholder"> {
+    /**
+     * Defaulted to "always" so user can clear the time whenever there's a value.
+     */
+    readonly clearable?: Extract<Clearable, "always" | "never">;
+    /**
+     * Add a custom value to display when no time is selected
+     * @default undefined
+     */
+    readonly emptyValueLabel?: string;
+    /**
+     * Adjusts the UX of the time picker based on where you'd use it.
+     *
+     * - `"granular"` - allows the user to pick a very specific time
+     * - `"scheduling"` - only allows user to select between 5 minutes interval.
+     *    If your design is catered towards "scheduling", you should use this type.
+     *
+     * @default scheduling
+     */
+    readonly type?: "granular" | "scheduling";
+    /**
+     * Hide or show the timer icon.
+     */
+    readonly showIcon?: boolean;
+}
+export interface InputTimeFormControlled extends InputTimeBaseProps {
+    /**
+     * Adding a `name` would make this component "Form controlled" and must be
+     * nested within a `<Form />` component.
+     *
+     * Cannot be declared if `value` prop is used.
+     */
+    readonly name: string;
+    /**
+     * Shows an error message below the field and highlights it red when the
+     * value is invalid. Only applies when nested within a `<Form />` component.
+     */
+    readonly validations?: UseControllerProps["rules"];
+    /**
+     * The callback that fires whenever a time gets selected.
+     */
+    readonly onChange?: (value?: Date | null) => void;
+}
+interface InputTimeDevControlled extends InputTimeBaseProps {
+    /**
+     * The value shown on the field. This gets automatically formatted to the
+     * account's time format.
+     */
+    readonly value: Date | string | undefined;
+    /**
+     * The callback that fires whenever a time gets selected.
+     */
+    readonly onChange: (value?: Date) => void;
+}
+export type InputTimeProps = XOR<InputTimeFormControlled, InputTimeDevControlled>;
+export declare function InputTime(props: InputTimeProps): JSX.Element;
+export {};

package/dist/types/src/InputTime/InputTime.style.d.ts

@@ -0,0 +1,6 @@
+export declare const styles: {
+    container: {
+        width: string;
+        justifyContent: "center";
+    };
+};

package/dist/types/src/InputTime/index.d.ts

@@ -0,0 +1,2 @@
+export { InputTime } from "./InputTime";
+export { roundUpToNearestMinutes } from "./utils";

package/dist/types/src/InputTime/messages.d.ts

@@ -0,0 +1,7 @@
+export declare const messages: {
+    time: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

package/dist/types/src/InputTime/utils/index.d.ts

@@ -0,0 +1,11 @@
+export type MinutesIncrement = 15 | 30 | 60;
+/**
+ * Rounds up the time by increment.
+ * - 15 mins - rounds to the next quarter time of `00:15`, `00:30`, `00:45`,
+ *   and `01:00`
+ * - 30 mins - rounds to the next half hour be it `00:30` or `01:00`
+ * - 60 mins - rounds to the next hour. I.e., `02:01` gets rounded up
+ *   to `03:00`.
+ */
+export declare function roundUpToNearestMinutes(date: Date, minutes: MinutesIncrement): Date;
+export declare function getTimeZoneOffsetInMinutes(timeZone: string, date?: Date): number;

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

@@ -18,10 +18,12 @@ export * from "./Heading";
 export * from "./Icon";
 export * from "./IconButton";
 export * from "./InputFieldWrapper";
+export * from "./InputCurrency";
 export * from "./InputNumber";
 export * from "./InputPassword";
 export * from "./InputPressable";
 export * from "./InputSearch";
+export * from "./InputTime";
 export * from "./InputText";
 export * from "./TextList";
 export * from "./ProgressBar";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.33.1",
+  "version": "0.35.0",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -67,8 +67,12 @@
   },
   "peerDependencies": {
     "@babel/core": "^7.4.5",
+    "@react-native-community/datetimepicker": ">=6.7.0",
+    "date-fns": "^2.0.0",
+    "date-fns-tz": "*",
     "react": "^18",
-    "react-native": ">=0.69.2"
+    "react-native": ">=0.69.2",
+    "react-native-modal-datetime-picker": " >=13.0.0"
   },
-  "gitHead": "c2fde72a97bf0054a5d4d8fe37563b60573b5766"
+  "gitHead": "5028c2bd4c97479b567b031432a331e3884afcaa"
 }

package/src/AtlantisContext/AtlantisContext.test.tsx

@@ -19,6 +19,7 @@ const providerValues: AtlantisContextProps = {
     return;
   },
   floatSeparators: { decimal: ".", group: "," },
+  currencySymbol: "€",
 };
 
 describe("AtlantisContext", () => {

package/src/AtlantisContext/AtlantisContext.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { createContext, useContext } from "react";
 import RNLocalize from "react-native-localize";
+import { DEFAULT_CURRENCY_SYMBOL } from "../InputCurrency/constants";
 
 export interface AtlantisContextProps {
   /**
@@ -34,6 +35,11 @@ export interface AtlantisContextProps {
    * Grabs the decimal separator and group separator based on locale
    */
   readonly floatSeparators: Record<"decimal" | "group", string>;
+
+  /**
+   * The currency symbol Atlantis components will use
+   */
+  readonly currencySymbol: string;
 }
 
 export const defaultValues: AtlantisContextProps = {
@@ -45,6 +51,7 @@ export const defaultValues: AtlantisContextProps = {
     return;
   },
   floatSeparators: { group: ",", decimal: "." },
+  currencySymbol: DEFAULT_CURRENCY_SYMBOL,
 };
 
 export const AtlantisContext = createContext(defaultValues);

package/src/InputCurrency/InputCurrency.test.tsx

@@ -0,0 +1,158 @@
+import React from "react";
+import { fireEvent, render, waitFor } from "@testing-library/react-native";
+import RNLocalize from "react-native-localize";
+import { InputCurrency } from "./InputCurrency";
+import { AtlantisContext, AtlantisContextProps } from "../AtlantisContext";
+
+const mockCurrencySymbol = "£";
+const atlantisContext: AtlantisContextProps = {
+  currencySymbol: mockCurrencySymbol,
+  timeFormat: "p",
+  timeZone: RNLocalize.getTimeZone(),
+  isOnline: true,
+  onLogError: err => {
+    return err;
+  },
+  floatSeparators: { group: ",", decimal: "." },
+};
+const placeHolder = "Price";
+describe.each([{ includeATLContext: true }, { includeATLContext: false }])(
+  "Has AtlantisContext: $includeATLContext",
+  ({ includeATLContext }) => {
+    function setup({
+      showCurrencySymbol,
+      name,
+    }: {
+      showCurrencySymbol?: boolean;
+      name: string;
+    }) {
+      if (includeATLContext) {
+        return render(
+          <AtlantisContext.Provider value={atlantisContext}>
+            <InputCurrency
+              placeholder={placeHolder}
+              name={name}
+              showCurrencySymbol={showCurrencySymbol}
+            />
+          </AtlantisContext.Provider>,
+        );
+      } else {
+        return render(
+          <InputCurrency
+            placeholder={placeHolder}
+            name={name}
+            showCurrencySymbol={showCurrencySymbol}
+          />,
+        );
+      }
+    }
+
+    it("renders with currency symbol when the value is input", () => {
+      const { getByText, getByLabelText } = setup({
+        name: "sample",
+      });
+      const value = 123.459119;
+      const expectedCurrencySymbol = includeATLContext
+        ? mockCurrencySymbol
+        : "$";
+      fireEvent.changeText(getByLabelText(placeHolder), `${value}`);
+
+      expect(getByText(expectedCurrencySymbol)).toBeDefined();
+    });
+
+    it("renders without currency symbol", () => {
+      const { queryByText, getByLabelText } = setup({
+        name: "sample",
+        showCurrencySymbol: false,
+      });
+      const value = 123.459119;
+
+      fireEvent.changeText(getByLabelText(placeHolder), `${value}`);
+      expect(queryByText(mockCurrencySymbol)).toBeNull();
+    });
+
+    it("displays a maximum 5 decimal places", async () => {
+      const value = 123.459119;
+      const { getByLabelText, getByDisplayValue } = setup({
+        name: "sample",
+      });
+
+      fireEvent.changeText(getByLabelText(placeHolder), `${value}`);
+      fireEvent(getByLabelText("Price"), "blur");
+      fireEvent(getByLabelText("Price"), "blur");
+
+      await waitFor(() => {
+        expect(getByDisplayValue("123.45912")).toBeDefined();
+      });
+    });
+
+    it("displays a minimum of 2 decimal places", async () => {
+      const value = 123.11;
+      const { getByLabelText, getByDisplayValue } = setup({ name: "sample" });
+
+      fireEvent.changeText(getByLabelText(placeHolder), `${value}`);
+      fireEvent(getByLabelText("Price"), "blur");
+
+      await waitFor(() => {
+        expect(getByDisplayValue("123.11")).toBeDefined();
+      });
+    });
+
+    it("displays a negative value", async () => {
+      const value = -509.543;
+      const { getByLabelText, getByDisplayValue } = setup({ name: "sample" });
+
+      fireEvent.changeText(getByLabelText(placeHolder), `${value}`);
+      fireEvent(getByLabelText("Price"), "blur");
+
+      await waitFor(() => {
+        expect(getByDisplayValue(`${value}`)).toBeDefined();
+      });
+    });
+
+    it("internationalizes the display Value in the input", async () => {
+      const value = 5098.543;
+      const { getByLabelText, getByDisplayValue } = setup({ name: "sample" });
+
+      fireEvent.changeText(getByLabelText(placeHolder), `${value}`);
+      fireEvent(getByLabelText("Price"), "blur");
+
+      await waitFor(() => {
+        expect(getByDisplayValue("5,098.543")).toBeDefined();
+      });
+    });
+
+    it("limits the whole number integer to 10 whole integers by default", async () => {
+      const value = 12345678998;
+      const { getByLabelText, getByDisplayValue } = setup({ name: "sample" });
+
+      fireEvent.changeText(getByLabelText(placeHolder), `${value}`);
+
+      await waitFor(() => {
+        expect(getByDisplayValue("1,234,567,899")).toBeDefined();
+      });
+    });
+
+    it("rounds the decimal point if there are more decimal numbers than the maxDecimalCount", async () => {
+      const value = 123456.789988;
+      const { getByLabelText, getByDisplayValue } = setup({ name: "sample" });
+
+      fireEvent.changeText(getByLabelText(placeHolder), `${value}`);
+      fireEvent(getByLabelText("Price"), "blur");
+
+      await waitFor(() => {
+        expect(getByDisplayValue("123,456.78999")).toBeDefined();
+      });
+    });
+
+    it("displays 0 on blur if there is no inputted value or the field.value is undefined", async () => {
+      const { getByLabelText, getByDisplayValue } = setup({ name: "sample" });
+
+      fireEvent(getByLabelText("Price"), "blur");
+
+      await waitFor(() => {
+        expect(getByDisplayValue("0")).toBeDefined();
+      });
+    });
+  },
+);

package/src/InputCurrency/InputCurrency.tsx

@@ -0,0 +1,206 @@
+import React, { useState } from "react";
+import { FormatNumberOptions, useIntl } from "react-intl";
+import { Platform } from "react-native";
+import { ControllerRenderProps, FieldValues } from "react-hook-form";
+import {
+  NUMBER_VALIDATION_REGEX,
+  checkLastChar,
+  configureDecimal,
+  convertToNumber,
+  isValidNumber,
+  limitInputWholeDigits,
+  parseGivenInput,
+} from "./utils";
+import { messages } from "./messages";
+import { useAtlantisContext } from "../AtlantisContext";
+import { InputText, InputTextProps } from "../InputText";
+import { useFormController } from "../hooks/useFormController";
+
+export interface InputCurrencyProps
+  extends Omit<
+    InputTextProps,
+    "keyboard" | "onChangeText" | "value" | "defaultValue"
+  > {
+  /**
+   * Whether to display the user's currency symbol or not
+   * Default value is true
+   */
+  readonly showCurrencySymbol?: boolean;
+
+  /**
+   * The minimum decimal places for the currency number
+   * Default value is 2
+   */
+  readonly decimalPlaces?: number;
+
+  /**
+   * The maximum decimal places for the currency number
+   * Default value is 5
+   */
+  readonly maxDecimalPlaces?: number;
+
+  /**
+   * The maximum length of the input
+   * Default value is 10
+   */
+  readonly maxLength?: number;
+
+  onChange?(newValue?: number | string | undefined): void;
+  value?: number;
+  defaultValue?: number;
+  keyboard?: "decimal-pad" | "numbers-and-punctuation";
+}
+export const getInternalValue = (
+  props: InputCurrencyProps,
+  field: ControllerRenderProps<FieldValues, string>,
+  formatNumber: (
+    value: number | bigint,
+    opts?: FormatNumberOptions | undefined,
+  ) => string,
+): string => {
+  if (!props.value && !field.value) return "";
+  return (
+    props.value?.toString() ??
+    formatNumber(field.value, {
+      maximumFractionDigits: props.maxDecimalPlaces,
+    })
+  );
+};
+
+const getKeyboard = (props: InputCurrencyProps) => {
+  if (Platform.OS === "ios") {
+    //since we are checking for which keyboard to use here, just implement default keyboard here instead of in params
+    return props.keyboard ?? "numbers-and-punctuation";
+  } else {
+    return "numeric";
+  }
+};
+
+export function InputCurrency(props: InputCurrencyProps): JSX.Element {
+  const {
+    showCurrencySymbol = true,
+    maxDecimalPlaces = 5,
+    decimalPlaces = 2,
+    maxLength = 10,
+  } = props;
+  const intl = useIntl();
+  const { floatSeparators, currencySymbol } = useAtlantisContext();
+
+  const { field } = useFormController({
+    name: props.name,
+    value: props.value,
+  });
+  const internalValue = getInternalValue(props, field, intl.formatNumber);
+  const [displayValue, setDisplayValue] = useState<string | undefined>(
+    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,
+      floatSeparators.decimal,
+    );
+
+    const numberedValue = wholeIntegerValue
+      ? convertToNumber(wholeIntegerValue)
+      : wholeIntegerValue;
+
+    if (isValidNumber(numberedValue) && typeof numberedValue === "number") {
+      checkDecimalAndI18nOfDisplayValue(
+        numberedValue,
+        decimalNumbers,
+        decimalCount,
+      );
+    } else {
+      const value = numberedValue?.toString() + decimalNumbers;
+      setOnChangeAndDisplayValues(value, value);
+    }
+  };
+
+  const { formatMessage } = useIntl();
+
+  return (
+    <>
+      <InputText
+        {...props}
+        prefix={showCurrencySymbol ? { label: currencySymbol } : undefined}
+        keyboard={getKeyboard(props)}
+        value={props.value?.toString() || displayValue}
+        defaultValue={props.defaultValue?.toString()}
+        onChangeText={handleChange}
+        transform={{
+          output: val => {
+            return val
+              ?.split(floatSeparators.group)
+              .join("")
+              .replace(floatSeparators.decimal, ".");
+          },
+        }}
+        validations={{
+          pattern: {
+            value: NUMBER_VALIDATION_REGEX,
+            message: formatMessage(messages.notANumberError),
+          },
+          ...props.validations,
+        }}
+        onBlur={() => {
+          props.onBlur?.();
+          if (
+            field.value === 0 ||
+            field.value === "" ||
+            field.value === undefined
+          ) {
+            setDisplayValue("0");
+          }
+        }}
+      />
+    </>
+  );
+}

package/src/InputCurrency/constants.ts

@@ -0,0 +1 @@
+export const DEFAULT_CURRENCY_SYMBOL = "$";

package/src/InputCurrency/index.ts

@@ -0,0 +1,3 @@
+export { InputCurrency } from "./InputCurrency";
+export * from "./utils";
+export * from "./constants";

package/src/InputCurrency/messages.ts

@@ -0,0 +1,10 @@
+import { defineMessages } from "react-intl";
+
+export const messages = defineMessages({
+  notANumberError: {
+    id: "notANumberError",
+    defaultMessage: "Enter a number",
+    description:
+      "Error message shown when a non-numeric value is typed in number input",
+  },
+});