@awell-health/ui-library 0.1.66 → 0.1.70

package/dist/index.js

@@ -37264,6 +37264,11 @@ Check the top-level render call using <` + t + ">.");
     };
     PhoneInputField.displayName = 'PhoneInputField';
 
+    var isValidEmail = function (email) {
+      var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+      return emailRegex.test(email);
+    };
+
     var handleUSException = function (number, originalValidation) {
       var _a;
       var areaCodes = (_a = originalValidation.country) === null || _a === void 0 ? void 0 : _a.areaCodes;
@@ -37415,6 +37420,23 @@ Check the top-level render call using <` + t + ">.");
         return {
           isValid: true };
 
+      };
+      var validateEmailResponse = function (questionConfig, value) {
+        var inputRequired = questionConfig === null || questionConfig === void 0 ? void 0 : questionConfig.mandatory;
+        if (inputRequired === false && lodash.exports.isEmpty(value)) {
+          return {
+            isValid: true };
+
+        }
+        if (!isValidEmail(value)) {
+          return {
+            isValid: false,
+            errorType: 'INVALID_FORMAT' };
+
+        }
+        return {
+          isValid: true };
+
       };
       return {
         isValidE164Number: isValidE164Number,
@@ -37422,7 +37444,8 @@ Check the top-level render call using <` + t + ">.");
         validatePhoneNumber: validatePhoneNumber,
         numberMatchesAvailableCountries: numberMatchesAvailableCountries,
         validateDateResponse: validateDateResponse,
-        validateNumberResponse: validateNumberResponse };
+        validateNumberResponse: validateNumberResponse,
+        validateEmailResponse: validateEmailResponse };
 
     };
 
@@ -37472,11 +37495,6 @@ Check the top-level render call using <` + t + ">.");
       return undefined;
     };
 
-    var isValidEmail = function (email) {
-      var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-      return emailRegex.test(email);
-    };
-
     var AUTO_PROGRESS_DELAY = 850;
     var QuestionData = function (_a) {
       var _b, _c, _d, _e, _f;
@@ -37624,7 +37642,7 @@ Check the top-level render call using <` + t + ">.");
               return jsxRuntime.exports.jsx(InputField, { autoFocus: inputAutoFocus, type: "email", onChange: function (e) {
                   onChange(e.target.value);
                   onAnswerChange();
-                }, label: question.title, id: question.id, value: value, mandatory: config === null || config === void 0 ? void 0 : config.mandatory });
+                }, label: question.title, id: question.id, value: value, mandatory: config === null || config === void 0 ? void 0 : config.mandatory, placeholder: "name@example.com" });
             } });
         case exports.UserQuestionType.Date:
           return jsxRuntime.exports.jsx(Controller, { name: question.id, control: control, rules: {
@@ -37851,7 +37869,7 @@ Check the top-level render call using <` + t + ">.");
       }
       return Math.round((currentQuestionIndex + 1) / allQuestions.length * 100);
     };
-    var getErrorsForQuestion = function (currentQuestion, formMethods, errorLabels, isValidE164Number, validateDateResponse, validateNumberResponse) {
+    var getErrorsForQuestion = function (currentQuestion, formMethods, errorLabels, isValidE164Number, validateDateResponse, validateNumberResponse, validateEmailResponse) {
       var _a;
       if ((currentQuestion === null || currentQuestion === void 0 ? void 0 : currentQuestion.userQuestionType) === exports.UserQuestionType.Description) {
         return [];
@@ -37925,6 +37943,21 @@ Check the top-level render call using <` + t + ">.");
 
 
 
+        }
+      }
+      if ((currentQuestion === null || currentQuestion === void 0 ? void 0 : currentQuestion.userQuestionType) === exports.UserQuestionType.Email) {
+        var error = validateEmailResponse(currentQuestion === null || currentQuestion === void 0 ? void 0 : currentQuestion.questionConfig, valueOfCurrentQuestion);
+        if (error.isValid === false) {
+          switch (error.errorType) {
+            case 'INVALID_FORMAT':
+              return [
+              {
+                id: currentQuestion.id,
+                error: errorLabels.emailInvalidFormat ||
+                'Value must be a valid email address' }];}
+
+
+
         }
       }
       return [];
@@ -37964,7 +37997,7 @@ Check the top-level render call using <` + t + ">.");
       var _d = React.useState([]),errors = _d[0],setErrors = _d[1];
       var _e = React.useState(false),formHasErrors = _e[0],setFormHasErrors = _e[1];
       var _f = React.useState(false),isSubmittingForm = _f[0],setIsSubmittingForm = _f[1];
-      var _g = useValidate(),isValidE164Number = _g.isValidE164Number,validateDateResponse = _g.validateDateResponse,validateNumberResponse = _g.validateNumberResponse;
+      var _g = useValidate(),isValidE164Number = _g.isValidE164Number,validateDateResponse = _g.validateDateResponse,validateNumberResponse = _g.validateNumberResponse,validateEmailResponse = _g.validateEmailResponse;
       var updateQuestionVisibility = React.useCallback(function () {return __awaiter(void 0, void 0, void 0, function () {
           var formValuesInput, evaluationResults, updatedQuestions;
           return __generator(this, function (_a) {
@@ -38033,7 +38066,7 @@ Check the top-level render call using <` + t + ">.");
               case 1:
                 _a.sent();
                 formErrors = visibleQuestions.flatMap(function (vq) {
-                  return getErrorsForQuestion(vq, formMethods, errorLabels, isValidE164Number, validateDateResponse, validateNumberResponse);
+                  return getErrorsForQuestion(vq, formMethods, errorLabels, isValidE164Number, validateDateResponse, validateNumberResponse, validateEmailResponse);
                 });
                 setErrors(formErrors);
                 if (formErrors.length === 0) {
@@ -38061,7 +38094,7 @@ Check the top-level render call using <` + t + ">.");
     var useConversationalForm = function (_a) {
       var questions = _a.questions,evaluateDisplayConditions = _a.evaluateDisplayConditions,onSubmit = _a.onSubmit,errorLabels = _a.errorLabels,storedAnswers = _a.storedAnswers,_b = _a.autosaveAnswers,autosaveAnswers = _b === void 0 ? true : _b,onAnswersChange = _a.onAnswersChange;
       var initialValues = convertToFormFormat(storedAnswers, questions);
-      var _c = useValidate(),isValidE164Number = _c.isValidE164Number,validateDateResponse = _c.validateDateResponse,validateNumberResponse = _c.validateNumberResponse;
+      var _c = useValidate(),isValidE164Number = _c.isValidE164Number,validateDateResponse = _c.validateDateResponse,validateNumberResponse = _c.validateNumberResponse,validateEmailResponse = _c.validateEmailResponse;
       var formMethods = useForm({
         defaultValues: getInitialValues(questions),
         shouldUnregister: false,
@@ -38130,7 +38163,7 @@ Check the top-level render call using <` + t + ">.");
       }, []);
       var handleCheckForErrors = function (currentQuestion) {
         var errorsWithoutCurrent = errors.filter(function (err) {return err.id !== (currentQuestion === null || currentQuestion === void 0 ? void 0 : currentQuestion.id);});
-        var existingErrors = getErrorsForQuestion(currentQuestion, formMethods, errorLabels, isValidE164Number, validateDateResponse, validateNumberResponse);
+        var existingErrors = getErrorsForQuestion(currentQuestion, formMethods, errorLabels, isValidE164Number, validateDateResponse, validateNumberResponse, validateEmailResponse);
         setErrors(__spreadArray(__spreadArray([], errorsWithoutCurrent, true), existingErrors, true));
         return existingErrors.length > 0;
       };
@@ -38314,7 +38347,7 @@ Check the top-level render call using <` + t + ">.");
     };
 
     var TraditionalForm = function (_a) {
-      var form = _a.form,onSubmit = _a.onSubmit,buttonLabels = _a.buttonLabels,evaluateDisplayConditions = _a.evaluateDisplayConditions,errorLabels = _a.errorLabels,storedAnswers = _a.storedAnswers,onAnswersChange = _a.onAnswersChange,_b = _a.autosaveAnswers,autosaveAnswers = _b === void 0 ? true : _b;
+      var form = _a.form,onSubmit = _a.onSubmit,buttonLabels = _a.buttonLabels,evaluateDisplayConditions = _a.evaluateDisplayConditions,errorLabels = _a.errorLabels,storedAnswers = _a.storedAnswers,onAnswersChange = _a.onAnswersChange,_b = _a.autosaveAnswers,autosaveAnswers = _b === void 0 ? true : _b,questionLabels = _a.questionLabels;
       var _c = useTheme(),updateLayoutMode = _c.updateLayoutMode,resetLayoutMode = _c.resetLayoutMode;
       var _d = useTraditionalForm({
         questions: form.questions,
@@ -38333,7 +38366,7 @@ Check the top-level render call using <` + t + ">.");
       }, []);
       return jsxRuntime.exports.jsxs(jsxRuntime.exports.Fragment, { children: [jsxRuntime.exports.jsx("main", __assign({ id: "ahp_main_content_with_scroll_hint", className: "".concat(layoutClasses.main_content, " ").concat(classes$4.traditional_form) }, { children: jsxRuntime.exports.jsxs("div", __assign({ className: "".concat(classes$4.container, " ").concat(classes$4.traditional_container) }, { children: [!questionWithVisiblity ? jsxRuntime.exports.jsx("div", __assign({ className: classes$4.loadingContainer }, { children: jsxRuntime.exports.jsx(LoadActivityPlaceholder, {}) })) : jsxRuntime.exports.jsx("div", { children: jsxRuntime.exports.jsx("div", { children: questionWithVisiblity.
                 filter(function (vb) {return vb.visible;}).
-                map(function (visibleQuestion) {return jsxRuntime.exports.jsx("div", __assign({ className: classes$4.traditional_form_question }, { children: jsxRuntime.exports.jsx(Question, { question: visibleQuestion, control: control, getValues: getValues, errors: errors, inputAutoFocus: false, onAnswerChange: updateQuestionVisibility }, visibleQuestion.id) }), visibleQuestion.id);}) }) }), (form === null || form === void 0 ? void 0 : form.trademark) && jsxRuntime.exports.jsx("div", __assign({ className: "".concat(classes$4.trademark, " ").concat(classes$4.conversational) }, { children: form.trademark }))] })) })), jsxRuntime.exports.jsx(HostedPageFooter, __assign({ showScrollHint: false }, { children: jsxRuntime.exports.jsxs("div", __assign({ className: "".concat(classes$4.traditional_button_wrapper) }, { children: [formHasErrors && jsxRuntime.exports.jsx("div", { children: jsxRuntime.exports.jsx(Text, __assign({ variant: "textSmall", color: "var(--awell-signalError100)" }, { children: errorLabels.formHasErrors })) }), jsxRuntime.exports.jsx("div", {}), jsxRuntime.exports.jsx(Button, __assign({ onClick: submitForm, type: "submit", "data-cy": "submitFormButton", disabled: isSubmittingForm }, { children: buttonLabels.submit }))] })) }))] });
+                map(function (visibleQuestion) {return jsxRuntime.exports.jsx("div", __assign({ className: classes$4.traditional_form_question }, { children: jsxRuntime.exports.jsx(Question, { question: visibleQuestion, control: control, getValues: getValues, errors: errors, inputAutoFocus: false, onAnswerChange: updateQuestionVisibility, labels: questionLabels }, visibleQuestion.id) }), visibleQuestion.id);}) }) }), (form === null || form === void 0 ? void 0 : form.trademark) && jsxRuntime.exports.jsx("div", __assign({ className: "".concat(classes$4.trademark, " ").concat(classes$4.conversational) }, { children: form.trademark }))] })) })), jsxRuntime.exports.jsx(HostedPageFooter, __assign({ showScrollHint: false }, { children: jsxRuntime.exports.jsxs("div", __assign({ className: "".concat(classes$4.traditional_button_wrapper) }, { children: [formHasErrors && jsxRuntime.exports.jsx("div", { children: jsxRuntime.exports.jsx(Text, __assign({ variant: "textSmall", color: "var(--awell-signalError100)" }, { children: errorLabels.formHasErrors })) }), jsxRuntime.exports.jsx("div", {}), jsxRuntime.exports.jsx(Button, __assign({ onClick: submitForm, type: "submit", "data-cy": "submitFormButton", disabled: isSubmittingForm }, { children: buttonLabels.submit }))] })) }))] });
     };
 
     var WizardForm = ConversationalForm;

package/dist/types/hooks/useForm/helpers.d.ts

@@ -3,7 +3,7 @@ import { Question, QuestionWithVisibility, FormError } from '../../types';
 import { AnswerValue, ErrorLabels, QuestionRuleResult } from './types';
 import { CountryIso2 } from 'react-international-phone';
 import { Maybe, QuestionConfig } from '../../types/generated/types-orchestration';
-import { DateValidationErrorType, NumberValidationErrorType } from '../useValidate/useValidate';
+import { DateValidationErrorType, EmailValidationErrorType, NumberValidationErrorType } from '../useValidate/useValidate';
 export declare const getDefaultValue: (question: Question) => AnswerValue;
 export declare const getInitialValues: (questions: Array<Question>) => Record<string, AnswerValue>;
 export declare const convertToAwellInput: (formResponse: any) => {
@@ -24,6 +24,9 @@ export declare const getErrorsForQuestion: (currentQuestion: QuestionWithVisibil
 }, validateNumberResponse: (questionConfig: Maybe<QuestionConfig> | undefined, value: string) => {
     isValid: boolean;
     errorType?: NumberValidationErrorType;
+}, validateEmailResponse: (questionConfig: Maybe<QuestionConfig> | undefined, value: string) => {
+    isValid: boolean;
+    errorType?: EmailValidationErrorType;
 }) => Array<FormError>;
 export declare const getDirtyFieldValues: (formMethods: UseFormReturn) => Record<string, AnswerValue>;
 export declare const markInitialValuesAsDirty: ({ formMethods, defaultValues, initialValues, }: {

package/dist/types/hooks/useForm/types.d.ts

@@ -25,6 +25,7 @@ export declare type ErrorLabels = {
     dateCannotBeToday?: string;
     notANumber?: string;
     numberOutOfRange?: string;
+    emailInvalidFormat?: string;
 };
 export declare type AnswerValue = string | number | number[] | undefined;
 export interface FormSettingsContextProps {

package/dist/types/hooks/useValidate/useValidate.d.ts

@@ -2,6 +2,7 @@ import { ValidatePhoneReturn, CountryIso2 } from './types';
 import { Maybe, QuestionConfig } from '../../types/generated/types-orchestration';
 export declare type DateValidationErrorType = 'DATE_CANNOT_BE_IN_THE_FUTURE' | 'DATE_CANNOT_BE_IN_THE_PAST' | 'DATE_CANNOT_BE_TODAY';
 export declare type NumberValidationErrorType = 'NOT_A_NUMBER' | 'OUT_OF_RANGE';
+export declare type EmailValidationErrorType = 'INVALID_FORMAT';
 export interface UseValidateHook {
     validatePhoneNumber: (number: string, availableCountries?: Array<CountryIso2>) => ValidatePhoneReturn;
     isValidE164Number: (number: string, availableCountries?: Array<CountryIso2>) => boolean;
@@ -15,6 +16,10 @@ export interface UseValidateHook {
         isValid: boolean;
         errorType?: NumberValidationErrorType;
     };
+    validateEmailResponse: (questionConfig: Maybe<QuestionConfig> | undefined, value: string) => {
+        isValid: boolean;
+        errorType?: EmailValidationErrorType;
+    };
 }
 export declare const handleUSException: (number: string, originalValidation: ValidatePhoneReturn) => ValidatePhoneReturn;
 export declare const useValidate: () => UseValidateHook;

package/dist/types/hostedPages/activities/form/TraditionalForm.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { FormProps } from '../../../types/form';
-export declare const TraditionalForm: ({ form, onSubmit, buttonLabels, evaluateDisplayConditions, errorLabels, storedAnswers, onAnswersChange, autosaveAnswers, }: FormProps) => JSX.Element;
+export declare const TraditionalForm: ({ form, onSubmit, buttonLabels, evaluateDisplayConditions, errorLabels, storedAnswers, onAnswersChange, autosaveAnswers, questionLabels, }: FormProps) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@awell-health/ui-library",
-  "version": "0.1.66",
+  "version": "0.1.70",
   "description": "UI components to integrate with Awell Health",
   "repository": {
     "type": "git",