@7shifts/sous-chef 3.52.0 → 3.53.1

package/dist/core/SousChefProvider/SousChefProvider.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
 import en from '../../i18n/locales/en.json';
+import { CountryCode } from 'libphonenumber-js';
 type Props = {
     i18n?: typeof en;
+    country?: CountryCode;
     children: React.ReactNode;
 };
-declare const SousChefProvider: ({ children, i18n }: Props) => React.JSX.Element;
+declare const SousChefProvider: ({ children, i18n, country }: Props) => React.JSX.Element;
 export default SousChefProvider;

package/dist/core/SousChefProvider/context/ProviderConfigContext.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { CountryCode } from 'libphonenumber-js';
+export type ProviderConfigContextType = {
+    country: CountryCode;
+};
+declare const ProviderConfigContext: import("react").Context<ProviderConfigContextType>;
+export declare const useProviderConfig: () => ProviderConfigContextType;
+export default ProviderConfigContext;

package/dist/forms/PhoneField/PhoneField.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { PhoneFieldValue } from './types';
+import { CountryCode } from 'libphonenumber-js';
 export type Props = {
     autoFocus?: boolean;
     caption?: React.ReactNode;
@@ -10,12 +10,13 @@ export type Props = {
     label?: React.ReactNode;
     maxLength?: number;
     name: string;
-    onBlur?: (value: PhoneFieldValue) => void;
-    onChange?: (value: PhoneFieldValue) => void;
+    onBlur?: (value: string) => void;
+    onChange?: (value: string) => void;
     placeholder?: string;
-    value?: PhoneFieldValue;
+    value?: string;
     testId?: string;
     disabledCountry?: boolean;
+    defaultCountry?: CountryCode;
 };
 declare const PhoneField: ({ disabledCountry, ...props }: Props) => React.JSX.Element;
 export default PhoneField;

package/dist/forms/PhoneField/types.d.ts

@@ -1,7 +1,2 @@
 import { CountryCode } from 'libphonenumber-js';
 export type PhoneFieldCountryCode = CountryCode;
-export type PhoneFieldValue = {
-    country: PhoneFieldCountryCode;
-    phone: string;
-    internationalPhone: string;
-};

package/dist/forms/PhoneField/usePhoneField.d.ts

@@ -4,7 +4,7 @@ import type { Props } from './PhoneField';
 type UseTextFieldProps = Props & {
     ref: RefType<HTMLInputElement>;
 };
-export declare const usePhoneField: ({ autoFocus, disabled, error, id, maxLength, name, caption, label, onBlur, onChange, placeholder, value, ref, testId }: UseTextFieldProps) => {
+export declare const usePhoneField: ({ autoFocus, disabled, error, id, maxLength, name, caption, label, onBlur, onChange, placeholder, value, ref, testId, defaultCountry }: UseTextFieldProps) => {
     inputProps: {
         'aria-describedby': string;
         'aria-invalid': boolean;
@@ -15,13 +15,13 @@ export declare const usePhoneField: ({ autoFocus, disabled, error, id, maxLength
         id: string;
         maxLength: number | undefined;
         name: string;
-        onBlur: (e: import("./types").PhoneFieldValue) => void;
-        onChange: (e: import("./types").PhoneFieldValue) => void;
+        onBlur: (e: string) => void;
+        onChange: (e: string) => void;
         placeholder: string | undefined;
         ref: RefType<HTMLInputElement>;
         size: number;
         type: string;
-        value: string | undefined;
+        value: string;
     };
     fieldProps: {
         caption: import("react").ReactNode;
@@ -30,6 +30,16 @@ export declare const usePhoneField: ({ autoFocus, disabled, error, id, maxLength
         id: string;
         name: string;
     };
-    fieldValue: import("./types").PhoneFieldValue | undefined;
+    fieldValue: string | undefined;
+    metaData: {
+        country: import("libphonenumber-js").CountryCode;
+        phone: string;
+        parsingError?: string | undefined;
+    };
+    changeMeta: (data: {
+        country: import("libphonenumber-js").CountryCode;
+        phone: string;
+        parsingError?: string | undefined;
+    }) => void;
 };
 export {};

package/dist/forms/hooks/usePhoneFieldControllers.d.ts

@@ -1,20 +1,31 @@
 /// <reference types="react" />
-import { PhoneFieldValue } from '../PhoneField/types';
+import { CountryCode } from 'libphonenumber-js';
 type FieldControls = {
     id: string;
     error?: React.ReactNode;
-    value?: PhoneFieldValue;
-    onChange: (e: PhoneFieldValue) => void;
-    onBlur: (e: PhoneFieldValue) => void;
+    value?: string;
+    onChange: (e: string) => void;
+    onBlur: (e: string) => void;
+    metaData: {
+        country: CountryCode;
+        phone: string;
+        parsingError?: string;
+    };
+    changeMeta: (data: {
+        country: CountryCode;
+        phone: string;
+        parsingError?: string;
+    }) => void;
 };
 type Props = {
     name: string;
     id?: string;
-    value?: PhoneFieldValue;
-    onChange?: (e: PhoneFieldValue) => void;
-    onBlur?: (e: PhoneFieldValue) => void;
+    value?: string;
+    onChange?: (e: string) => void;
+    onBlur?: (e: string) => void;
     error?: React.ReactNode;
     onMenuInputFocus?: (isFocused: boolean) => void;
+    defaultCountry?: CountryCode;
 };
-export declare const usePhoneFieldControllers: ({ name, id: inputId, value, onChange, onBlur, error, onMenuInputFocus }: Props) => FieldControls;
+export declare const usePhoneFieldControllers: ({ name, id: inputId, value, onChange, onBlur, error, onMenuInputFocus, defaultCountry }: Props) => FieldControls;
 export {};

package/dist/forms/index.d.ts

@@ -27,4 +27,4 @@ export type { PasswordCriteria } from './PasswordField/types';
 export type { SelectOption, SelectOptions, GroupOption, CustomOptionProps, SelectedOptionPrefixProps } from './SelectField/types';
 export type { AsyncSelectOptions } from './AsyncSelectField/types';
 export type { FormikType } from './Form/types';
-export type { PhoneFieldValue, PhoneFieldCountryCode } from './PhoneField/types';
+export type { PhoneFieldCountryCode } from './PhoneField/types';

package/dist/i18n/locales/en.json

@@ -40,5 +40,8 @@
     "DataTable": {
         "emptyStateTitle": "No results found",
         "emptyStateCaption": "Try adding a new item to the list or adjust your search terms."
+    },
+    "PhoneField": {
+        "malformedPhoneNumber": "Malformed phone number. Please enter a valid phone number."
     }
 }

package/dist/i18n/locales/es.json

@@ -40,5 +40,8 @@
     "DataTable": {
         "emptyStateTitle": "No se encontraron resultados",
         "emptyStateCaption": "Intenta agregar un nuevo elemento a la lista o ajusta tus términos de búsqueda."
+    },
+    "PhoneField": {
+        "malformedPhoneNumber": "Número de teléfono mal formado. Por favor, ingresa un número de teléfono válido."
     }
 }

package/dist/i18n/locales/fr.json

@@ -40,5 +40,8 @@
     "DataTable": {
         "emptyStateTitle": "Aucun résultat trouvé",
         "emptyStateCaption": "Essayez d'ajouter un nouvel élément à la liste ou ajustez vos termes de recherche."
+    },
+    "PhoneField": {
+        "malformedPhoneNumber": "Numéro de téléphone mal formé. Veuillez entrer un numéro de téléphone valide."
     }
 }

package/dist/index.js

@@ -5760,6 +5760,9 @@ var DataTable = {
 	emptyStateTitle: "No results found",
 	emptyStateCaption: "Try adding a new item to the list or adjust your search terms."
 };
+var PhoneField = {
+	malformedPhoneNumber: "Malformed phone number. Please enter a valid phone number."
+};
 var en = {
 	PaginationControls: PaginationControls,
 	AsyncSelectField: AsyncSelectField,
@@ -5767,7 +5770,8 @@ var en = {
 	HintModal: HintModal,
 	Calendar: Calendar,
 	Card: Card,
-	DataTable: DataTable
+	DataTable: DataTable,
+	PhoneField: PhoneField
 };
 
 var initialValue = {
@@ -5937,15 +5941,33 @@ var ToastContainer = function ToastContainer(_ref2) {
   });
 };
 
+var initialValue$1 = {
+  country: 'US'
+};
+var ProviderConfigContext = React.createContext(initialValue$1);
+var useProviderConfig = function useProviderConfig() {
+  var context = React.useContext(ProviderConfigContext);
+  if (!context) {
+    throw Error('The `<SousChefProvider>` is not set. Please wrap your application with `<SousChefProvider>`');
+  }
+  return context;
+};
+
 var SousChefProvider = function SousChefProvider(_ref) {
   var children = _ref.children,
     _ref$i18n = _ref.i18n,
-    i18n = _ref$i18n === void 0 ? en : _ref$i18n;
-  return React__default.createElement(TranslationsContext.Provider, {
+    i18n = _ref$i18n === void 0 ? en : _ref$i18n,
+    _ref$country = _ref.country,
+    country = _ref$country === void 0 ? 'US' : _ref$country;
+  return React__default.createElement(ProviderConfigContext.Provider, {
+    value: {
+      country: country
+    }
+  }, React__default.createElement(TranslationsContext.Provider, {
     value: {
       i18n: i18n
     }
-  }, React__default.createElement(ToastContainer, null), children);
+  }, React__default.createElement(ToastContainer, null), children));
 };
 
 var styles$a = {"data-table-header":"_1vpCK","data-table-header__item":"_dJWps","data-table-header__item--sortable":"_14AEw","data-table-header__itemfocus":"_2JSFR","data-table-header__item--action":"_29TM7","data-table-header__item-content":"_2Zpt5","data-table-header__item-content--right-align":"_3WtwH","data-table-header__sort-icon":"_3codU"};
@@ -6154,12 +6176,12 @@ var DATA_TABLE_SCROLL_STATES = {
 };
 var AMOUNT_OF_SKELETON_ROWS = 10;
 
-var initialValue$1 = {
+var initialValue$2 = {
   columns: [],
   numberOfRows: 0,
   state: DATA_TABLE_STATES.SKELETON_LOADING
 };
-var Context = React.createContext(initialValue$1);
+var Context = React.createContext(initialValue$2);
 var useDataTableContext = function useDataTableContext() {
   var context = React.useContext(Context);
   if (!context) {
@@ -12140,16 +12162,57 @@ var usePhoneFieldControllers = function usePhoneFieldControllers(_ref) {
     _onChange = _ref.onChange,
     _onBlur = _ref.onBlur,
     error = _ref.error,
-    onMenuInputFocus = _ref.onMenuInputFocus;
+    onMenuInputFocus = _ref.onMenuInputFocus,
+    defaultCountry = _ref.defaultCountry;
+  var __ = useTranslation('PhoneField');
+  var errorMessage = __('malformedPhoneNumber');
   var _useFormContext = useFormContext(),
     formik = _useFormContext.formik;
   var id = useFieldId({
     name: name,
     id: inputId
   });
+  var formikState = getFormikState(name, formik);
+  var phoneFieldValue = formik && formikState && !value ? formikState.value : value;
+  var _useProviderConfig = useProviderConfig(),
+    country = _useProviderConfig.country;
+  var parseMeta = function parseMeta(value) {
+    if (value === '') {
+      return {
+        country: defaultCountry || country,
+        phone: ''
+      };
+    }
+    try {
+      var phone = libphonenumberJs.parsePhoneNumber(value);
+      var formatedPhone = new libphonenumberJs.AsYouType(phone.country).input(value.replace('+' + phone.countryCallingCode, ''));
+      if (!phone.country) {
+        return {
+          country: defaultCountry || country,
+          phone: formatedPhone,
+          parsingError: errorMessage
+        };
+      }
+      return {
+        country: phone.country,
+        phone: formatedPhone
+      };
+    } catch (error) {
+      return {
+        country: defaultCountry || country,
+        phone: value,
+        parsingError: errorMessage
+      };
+    }
+  };
+  var _useState = React.useState(function () {
+      return parseMeta(phoneFieldValue || '');
+    }),
+    meta = _useState[0],
+    setMeta = _useState[1];
   var controllers = {
     id: id,
-    error: error,
+    error: error || meta.parsingError,
     value: value,
     onChange: function onChange(option) {
       if (_onChange) {
@@ -12168,10 +12231,9 @@ var usePhoneFieldControllers = function usePhoneFieldControllers(_ref) {
       }
     }
   };
-  var formikState = getFormikState(name, formik);
   if (formik && formikState) {
     controllers = _extends({}, controllers, {
-      error: error ? controllers.error : formikState.error,
+      error: error || meta.parsingError ? controllers.error : formikState.error,
       value: value ? controllers.value : formikState.value,
       onChange: function onChange(option) {
         if (_onChange) {
@@ -12193,11 +12255,14 @@ var usePhoneFieldControllers = function usePhoneFieldControllers(_ref) {
       }
     });
   }
-  return controllers;
+  return _extends({}, controllers, {
+    metaData: meta,
+    changeMeta: setMeta
+  });
 };
 
 var usePhoneField = function usePhoneField(_ref) {
-  var _classnames, _controllers$value;
+  var _classnames;
   var autoFocus = _ref.autoFocus,
     disabled = _ref.disabled,
     error = _ref.error,
@@ -12211,14 +12276,16 @@ var usePhoneField = function usePhoneField(_ref) {
     placeholder = _ref.placeholder,
     value = _ref.value,
     ref = _ref.ref,
-    testId = _ref.testId;
+    testId = _ref.testId,
+    defaultCountry = _ref.defaultCountry;
   var controllers = usePhoneFieldControllers({
     error: error,
     id: id,
     name: name,
     onChange: onChange,
     onBlur: onBlur,
-    value: value
+    value: value,
+    defaultCountry: defaultCountry
   });
   var hasError = !!controllers.error;
   var inputProps = {
@@ -12237,7 +12304,7 @@ var usePhoneField = function usePhoneField(_ref) {
     ref: ref,
     size: 1,
     type: 'text',
-    value: (_controllers$value = controllers.value) === null || _controllers$value === void 0 ? void 0 : _controllers$value.phone
+    value: controllers.metaData.phone
   };
   var fieldProps = {
     caption: caption,
@@ -12249,7 +12316,9 @@ var usePhoneField = function usePhoneField(_ref) {
   return {
     inputProps: inputProps,
     fieldProps: fieldProps,
-    fieldValue: controllers.value
+    fieldValue: controllers.value,
+    metaData: controllers.metaData,
+    changeMeta: controllers.changeMeta
   };
 };
 
@@ -13034,71 +13103,71 @@ var CountrySelector = function CountrySelector(_ref) {
 };
 
 var _excluded$2N = ["disabledCountry"];
-var PhoneField = function PhoneField(_ref) {
+var PhoneField$1 = function PhoneField(_ref) {
   var _classNames;
   var _ref$disabledCountry = _ref.disabledCountry,
     disabledCountry = _ref$disabledCountry === void 0 ? false : _ref$disabledCountry,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$2N);
+  var __ = useTranslation('PhoneField');
   var inputRef = React.useRef(null);
   var _usePhoneField = usePhoneField(_extends({}, props, {
       ref: inputRef
     })),
     inputProps = _usePhoneField.inputProps,
     fieldProps = _usePhoneField.fieldProps,
-    fieldValue = _usePhoneField.fieldValue;
-  var selectedCountry = fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.country;
+    metaData = _usePhoneField.metaData,
+    changeMeta = _usePhoneField.changeMeta;
+  var selectedCountry = metaData.country;
   var handleCountryChange = function handleCountryChange(countryCode) {
-    inputProps.onChange({
+    changeMeta({
       country: countryCode,
-      phone: '',
-      internationalPhone: ''
+      phone: ''
     });
+    inputProps.onChange('');
     if (inputRef.current) {
       inputRef.current.focus();
     }
   };
   var handlePhoneChange = function handlePhoneChange(e) {
-    var formatedPhone = new libphonenumberJs.AsYouType(selectedCountry).input(e.target.value);
-    e.target.value = formatedPhone;
-    inputProps.onChange({
+    var formatedPhone = metaData.phone.length < e.target.value.length ? new libphonenumberJs.AsYouType(selectedCountry).input(e.target.value) : e.target.value;
+    var internationalPhone = '';
+    var parseError = null;
+    try {
+      var phoneNumber = libphonenumberJs.parsePhoneNumber(e.target.value, selectedCountry);
+      internationalPhone = phoneNumber.number;
+    } catch (error) {
+      parseError = error;
+    }
+    if (parseError && parseError.message === 'TOO_LONG') {
+      return;
+    }
+    changeMeta({
       country: selectedCountry,
-      phone: formatedPhone,
-      internationalPhone: ''
+      phone: formatedPhone
     });
+    inputProps.onChange(internationalPhone);
   };
   var handlePhoneBlur = function handlePhoneBlur(e) {
     var internationalPhone = '';
+    var countryParseError = undefined;
     try {
       var phoneNumber = libphonenumberJs.parsePhoneNumber(e.target.value, selectedCountry);
       internationalPhone = phoneNumber.number;
+      var parseFromInternationalNumber = libphonenumberJs.parsePhoneNumber(phoneNumber.number);
+      if (!parseFromInternationalNumber.country) {
+        countryParseError = __('malformedPhoneNumber');
+      }
     } catch (error) {
       console.warn("PhoneField: " + error);
     }
-    var value = {
-      country: selectedCountry,
-      phone: e.target.value,
-      internationalPhone: internationalPhone
-    };
-    inputProps.onChange(value);
-    inputProps.onBlur(value);
-  };
-  React.useEffect(function () {
-    if (Boolean(fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.internationalPhone) && (fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.phone) === '') {
-      var formatedPhone = '';
-      try {
-        var phoneNumber = libphonenumberJs.parsePhoneNumber(fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.internationalPhone);
-        formatedPhone = new libphonenumberJs.AsYouType(selectedCountry).input(phoneNumber.nationalNumber);
-      } catch (error) {
-        console.warn("PhoneField: " + error);
-      }
-      var value = {
-        country: selectedCountry,
-        phone: formatedPhone,
-        internationalPhone: fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.internationalPhone
-      };
-      inputProps.onChange(value);
+    inputProps.onChange(internationalPhone);
+    inputProps.onBlur(internationalPhone);
+    if (countryParseError !== undefined) {
+      changeMeta(_extends({}, metaData, {
+        parsingError: countryParseError
+      }));
     }
-  }, [fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.internationalPhone]);
+  };
   return React__default.createElement(Field, _extends({}, fieldProps), React__default.createElement("div", {
     className: styles$1c['phone-field']
   }, !disabledCountry && React__default.createElement(CountrySelector, {
@@ -13654,7 +13723,7 @@ exports.PasswordField = PasswordField;
 exports.Paywall = Paywall;
 exports.PercentageField = PercentageField;
 exports.PersistentBanner = PersistentBanner;
-exports.PhoneField = PhoneField;
+exports.PhoneField = PhoneField$1;
 exports.Pill = Pill;
 exports.PillSelectField = PillSelectField;
 exports.ProgressBar = ProgressBar;