@7shifts/sous-chef 3.51.1 → 3.52.0-beta.1

package/dist/i18n/locales/locales/es.json

@@ -0,0 +1,47 @@
+{
+    "PaginationControls": {
+        "previousButton": "Anterior",
+        "nextButton": "Siguiente"
+    },
+    "AsyncSelectField": {
+        "moreOptionsPlaceholder": "Empieza a escribir para ver más opciones"
+    },
+    "SelectField": {
+        "createOption": "Crear opción",
+        "createButton": "Crear"
+    },
+    "HintModal": {
+        "dontShowAgainLabel": "No mostrar esto otra vez"
+    },
+    "Calendar": {
+        "sunday": "Domingo",
+        "monday": "Lunes",
+        "tuesday": "Martes",
+        "wednesday": "Miércoles",
+        "thursday": "Jueves",
+        "friday": "Viernes",
+        "saturday": "Sábado",
+        "january": "Enero",
+        "february": "Febrero",
+        "march": "Marzo",
+        "april": "Abril",
+        "may": "Mayo",
+        "june": "Junio",
+        "july": "Julio",
+        "august": "Agosto",
+        "september": "Septiembre",
+        "october": "Octubre",
+        "november": "Noviembre",
+        "december": "Diciembre"
+    },
+    "Card": {
+        "dismiss": "Descartar"
+    },
+    "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/locales/fr.json

@@ -0,0 +1,47 @@
+{
+    "PaginationControls": {
+        "previousButton": "Précédent",
+        "nextButton": "Suivant"
+    },
+    "AsyncSelectField": {
+        "moreOptionsPlaceholder": "Commencez à taper pour voir plus d’options"
+    },
+    "SelectField": {
+        "createOption": "Créer une option",
+        "createButton": "Créer"
+    },
+    "HintModal": {
+        "dontShowAgainLabel": "Ne plus afficher ce message"
+    },
+    "Calendar": {
+        "sunday": "Dimanche",
+        "monday": "Lundi",
+        "tuesday": "Mardi",
+        "wednesday": "Mercredi",
+        "thursday": "Jeudi",
+        "friday": "Vendredi",
+        "saturday": "Samedi",
+        "january": "Janvier",
+        "february": "Février",
+        "march": "Mars",
+        "april": "Avril",
+        "may": "Mai",
+        "june": "Juin",
+        "july": "Juillet",
+        "august": "Août",
+        "september": "Septembre",
+        "october": "Octobre",
+        "november": "Novembre",
+        "december": "Décembre"
+    },
+    "Card": {
+        "dismiss": "Rejeter"
+    },
+    "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.css

@@ -3138,7 +3138,7 @@ input:checked ~ ._3mCob {
 }
 ._3mCob {
   border: 1px solid var(--color-grey-200);
-  border-radius: var(--border-radius-600);
+  border-radius: 4px;
   padding: 16px;
   display: block;
   cursor: pointer;

package/dist/index.js

@@ -5725,6 +5725,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,
@@ -5732,7 +5735,8 @@ var en = {
 	HintModal: HintModal,
 	Calendar: Calendar,
 	Card: Card,
-	DataTable: DataTable
+	DataTable: DataTable,
+	PhoneField: PhoneField
 };
 
 var initialValue = {
@@ -5902,15 +5906,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"};
@@ -6119,12 +6141,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) {
@@ -12105,16 +12127,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) {
@@ -12133,10 +12196,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) {
@@ -12158,11 +12220,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,
@@ -12176,14 +12241,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 = {
@@ -12202,7 +12269,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,
@@ -12214,7 +12281,9 @@ var usePhoneField = function usePhoneField(_ref) {
   return {
     inputProps: inputProps,
     fieldProps: fieldProps,
-    fieldValue: controllers.value
+    fieldValue: controllers.value,
+    metaData: controllers.metaData,
+    changeMeta: controllers.changeMeta
   };
 };
 
@@ -12999,7 +13068,7 @@ var CountrySelector = function CountrySelector(_ref) {
 };
 
 var _excluded$2M = ["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,
@@ -13010,14 +13079,15 @@ var PhoneField = function PhoneField(_ref) {
     })),
     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();
     }
@@ -13025,11 +13095,22 @@ var PhoneField = function PhoneField(_ref) {
   var handlePhoneChange = function handlePhoneChange(e) {
     var formatedPhone = new libphonenumberJs.AsYouType(selectedCountry).input(e.target.value);
     e.target.value = formatedPhone;
-    inputProps.onChange({
+    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 = '';
@@ -13039,31 +13120,9 @@ var PhoneField = function PhoneField(_ref) {
     } catch (error) {
       console.warn("PhoneField: " + error);
     }
-    var value = {
-      country: selectedCountry,
-      phone: e.target.value,
-      internationalPhone: internationalPhone
-    };
-    inputProps.onChange(value);
-    inputProps.onBlur(value);
+    inputProps.onChange(internationalPhone);
+    inputProps.onBlur(internationalPhone);
   };
-  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);
-    }
-  }, [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, {
@@ -13618,7 +13677,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;