From f6b46083ecc582f044fd693c16581d42153de2ac Mon Sep 17 00:00:00 2001 From: rbsPREET Date: Sat, 24 Sep 2022 03:46:00 +0300 Subject: [PATCH 1/2] id field to coordinator --- packages/common/src/LocaleUtils.ts | 3 + packages/common/src/Validation.ts | 23 ++++++ ...BookManualDonationScreen.stories.storyshot | 82 +++++++++++++------ .../BookedAppointmentScreen.stories.storyshot | 69 ++++++++++++++++ .../ReportsScreen.stories.storyshot | 36 ++++---- .../coordinator/src/assets/icons/id-card.svg | 8 ++ .../CoordinatorScreen.module.scss | 2 +- .../BookManualDonationScreen.tsx | 17 +++- .../BookedAppointmentScreen.tsx | 8 ++ .../actions/BookManualDonationAction.ts | 4 +- 10 files changed, 204 insertions(+), 48 deletions(-) create mode 100644 packages/coordinator/src/assets/icons/id-card.svg diff --git a/packages/common/src/LocaleUtils.ts b/packages/common/src/LocaleUtils.ts index 97dce2d5a..04043fd86 100644 --- a/packages/common/src/LocaleUtils.ts +++ b/packages/common/src/LocaleUtils.ts @@ -84,7 +84,10 @@ export const getValidationErrorTranslation = ( return "השם המלא ארוך מ-20 תווים"; case PersonalDetailsValidation.PHONE_INVALID: return "מספר הטלפון אינו תקין"; + case PersonalDetailsValidation.PERSONALID_INVALID: + return "מספר תעודת הזהות אינו תקין"; case PersonalDetailsValidation.PHONE_HAS_NANS: + case PersonalDetailsValidation.PERSONALID_HAS_NANS: return "יש להזין ספרות בלבד"; case PersonalDetailsValidation.REQUIRED_FIELD: return "שדה חובה"; diff --git a/packages/common/src/Validation.ts b/packages/common/src/Validation.ts index 30b7bd84c..dcef2adb2 100644 --- a/packages/common/src/Validation.ts +++ b/packages/common/src/Validation.ts @@ -4,6 +4,8 @@ export enum PersonalDetailsValidation { FULL_NAME_TOO_LONG = "FULL_NAME_TOO_LONG", PHONE_INVALID = "PHONE_INVALID", PHONE_HAS_NANS = "PHONE_HAS_NANS", + PERSONALID_INVALID = "PERSONALID_INVALID", + PERSONALID_HAS_NANS = "PERSONALID_HAS_NANS", REQUIRED_FIELD = "REQUIRED_FIELD", } @@ -25,6 +27,11 @@ export type PhoneValidation = | PersonalDetailsValidation.PHONE_INVALID | PersonalDetailsValidation.PHONE_HAS_NANS; +export type PersonalIdValidation = + | FieldValidation + | PersonalDetailsValidation.PERSONALID_INVALID + | PersonalDetailsValidation.PERSONALID_HAS_NANS; + export const ValidateFirstName = (firstName: string): FirstNameValidation => { if (!firstName) return PersonalDetailsValidation.REQUIRED_FIELD; @@ -59,3 +66,19 @@ export const ValidatePhone = (phone: string): PhoneValidation => { } return PersonalDetailsValidation.VALID_FIELD; }; + +export const ValidatePersonalId = ( + personalId: string +): PersonalIdValidation => { + if (!personalId) return PersonalDetailsValidation.REQUIRED_FIELD; + + const allNumbersValidator = /^[0-9]*$/; + if (!allNumbersValidator.test(personalId)) { + return PersonalDetailsValidation.PERSONALID_HAS_NANS; + } + const formatValidator = /^[0-9]{8,9}$/; + if (personalId.length > 0 && !formatValidator.test(personalId)) { + return PersonalDetailsValidation.PERSONALID_INVALID; + } + return PersonalDetailsValidation.VALID_FIELD; +}; diff --git a/packages/coordinator/src/__test__/src/screens/bookManualDonationScreen/__snapshots__/BookManualDonationScreen.stories.storyshot b/packages/coordinator/src/__test__/src/screens/bookManualDonationScreen/__snapshots__/BookManualDonationScreen.stories.storyshot index 1c163bd41..c9e564420 100644 --- a/packages/coordinator/src/__test__/src/screens/bookManualDonationScreen/__snapshots__/BookManualDonationScreen.stories.storyshot +++ b/packages/coordinator/src/__test__/src/screens/bookManualDonationScreen/__snapshots__/BookManualDonationScreen.stories.storyshot @@ -323,7 +323,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p animation-name: mui-auto-fill; } -.emotion-13 { +.emotion-17 { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -373,23 +373,23 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p box-shadow: none; } -.emotion-13::-moz-focus-inner { +.emotion-17::-moz-focus-inner { border-style: none; } -.emotion-13.Mui-disabled { +.emotion-17.Mui-disabled { pointer-events: none; cursor: default; } @media print { - .emotion-13 { + .emotion-17 { -webkit-print-color-adjust: exact; color-adjust: exact; } } -.emotion-13:hover { +.emotion-17:hover { -webkit-text-decoration: none; text-decoration: none; background-color: rgb(53, 122, 56); @@ -397,42 +397,42 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p } @media (hover: none) { - .emotion-13:hover { + .emotion-17:hover { background-color: #4caf51; } } -.emotion-13:active { +.emotion-17:active { box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12); } -.emotion-13.Mui-focusVisible { +.emotion-17.Mui-focusVisible { box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12); } -.emotion-13.Mui-disabled { +.emotion-17.Mui-disabled { color: #7E7E7E; box-shadow: none; background-color: #dadee0; } -.emotion-13:hover { +.emotion-17:hover { box-shadow: none; } -.emotion-13.Mui-focusVisible { +.emotion-17.Mui-focusVisible { box-shadow: none; } -.emotion-13:active { +.emotion-17:active { box-shadow: none; } -.emotion-13.Mui-disabled { +.emotion-17.Mui-disabled { box-shadow: none; } -.emotion-14 { +.emotion-18 { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -481,23 +481,23 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p box-shadow: none; } -.emotion-14::-moz-focus-inner { +.emotion-18::-moz-focus-inner { border-style: none; } -.emotion-14.Mui-disabled { +.emotion-18.Mui-disabled { pointer-events: none; cursor: default; } @media print { - .emotion-14 { + .emotion-18 { -webkit-print-color-adjust: exact; color-adjust: exact; } } -.emotion-14:hover { +.emotion-18:hover { -webkit-text-decoration: none; text-decoration: none; background-color: rgba(76, 175, 81, 0.04); @@ -505,29 +505,29 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p } @media (hover: none) { - .emotion-14:hover { + .emotion-18:hover { background-color: transparent; } } -.emotion-14.Mui-disabled { +.emotion-18.Mui-disabled { color: #7E7E7E; border: 1px solid #dadee0; } -.emotion-14:hover { +.emotion-18:hover { box-shadow: none; } -.emotion-14.Mui-focusVisible { +.emotion-18.Mui-focusVisible { box-shadow: none; } -.emotion-14:active { +.emotion-18:active { box-shadow: none; } -.emotion-14.Mui-disabled { +.emotion-18.Mui-disabled { box-shadow: none; } @@ -690,6 +690,36 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p /> + +
+ +
+ +
+
+
+
+ + id-card.svg + +
+
+
+ תעודת זהות +
+
+ donorId +
+
+
@@ -464,6 +487,29 @@ exports[`Storyshots Screens/Booked Appointment Cant Remove Donor 1`] = `
+
+
+ + id-card.svg + +
+
+
+ תעודת זהות +
+
+ donorId +
+
+
@@ -727,6 +773,29 @@ exports[`Storyshots Screens/Booked Appointment Default 1`] = `
+
+
+ + id-card.svg + +
+
+
+ תעודת זהות +
+
+ donorId +
+
+
diff --git a/packages/coordinator/src/__test__/src/screens/reports/__snapshots__/ReportsScreen.stories.storyshot b/packages/coordinator/src/__test__/src/screens/reports/__snapshots__/ReportsScreen.stories.storyshot index 8b1a72b83..1cf09dfdf 100644 --- a/packages/coordinator/src/__test__/src/screens/reports/__snapshots__/ReportsScreen.stories.storyshot +++ b/packages/coordinator/src/__test__/src/screens/reports/__snapshots__/ReportsScreen.stories.storyshot @@ -958,8 +958,8 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- @@ -973,7 +973,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- aria-readonly={true} autoFocus={false} className="MuiInput-input MuiInputBase-input emotion-11" - id="mui-59" + id="mui-60" onAnimationStart={[Function]} onBlur={[Function]} onChange={[Function]} @@ -993,8 +993,8 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- @@ -1008,7 +1008,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- aria-readonly={true} autoFocus={false} className="MuiInput-input MuiInputBase-input emotion-11" - id="mui-61" + id="mui-62" onAnimationStart={[Function]} onBlur={[Function]} onChange={[Function]} @@ -2267,8 +2267,8 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- @@ -2282,7 +2282,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- aria-readonly={true} autoFocus={false} className="MuiInput-input MuiInputBase-input emotion-11" - id="mui-63" + id="mui-64" onAnimationStart={[Function]} onBlur={[Function]} onChange={[Function]} @@ -2302,8 +2302,8 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- @@ -2317,7 +2317,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- aria-readonly={true} autoFocus={false} className="MuiInput-input MuiInputBase-input emotion-11" - id="mui-65" + id="mui-66" onAnimationStart={[Function]} onBlur={[Function]} onChange={[Function]} @@ -3458,8 +3458,8 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- @@ -3473,7 +3473,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- aria-readonly={true} autoFocus={false} className="MuiInput-input MuiInputBase-input emotion-11" - id="mui-67" + id="mui-68" onAnimationStart={[Function]} onBlur={[Function]} onChange={[Function]} @@ -3493,8 +3493,8 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- @@ -3508,7 +3508,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- aria-readonly={true} autoFocus={false} className="MuiInput-input MuiInputBase-input emotion-11" - id="mui-69" + id="mui-70" onAnimationStart={[Function]} onBlur={[Function]} onChange={[Function]} diff --git a/packages/coordinator/src/assets/icons/id-card.svg b/packages/coordinator/src/assets/icons/id-card.svg new file mode 100644 index 000000000..669933ea5 --- /dev/null +++ b/packages/coordinator/src/assets/icons/id-card.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/packages/coordinator/src/components/CoordinatorScreen/CoordinatorScreen.module.scss b/packages/coordinator/src/components/CoordinatorScreen/CoordinatorScreen.module.scss index 643b85c06..e1f064719 100644 --- a/packages/coordinator/src/components/CoordinatorScreen/CoordinatorScreen.module.scss +++ b/packages/coordinator/src/components/CoordinatorScreen/CoordinatorScreen.module.scss @@ -1,5 +1,5 @@ .coordinatorScreen { - height: 100%; + min-height: 100%; width: 100vw; display: flex; flex-direction: column; diff --git a/packages/coordinator/src/screens/bookManualDonationScreen/BookManualDonationScreen.tsx b/packages/coordinator/src/screens/bookManualDonationScreen/BookManualDonationScreen.tsx index 95c41ad0c..640375701 100644 --- a/packages/coordinator/src/screens/bookManualDonationScreen/BookManualDonationScreen.tsx +++ b/packages/coordinator/src/screens/bookManualDonationScreen/BookManualDonationScreen.tsx @@ -42,6 +42,11 @@ export default function BookManualDonationScreen( const [phoneError, setPhoneError] = useState( Validation.PersonalDetailsValidation.VALID_FIELD ); + const [personalId, setPersonalId] = useState(""); + const [personalIdError, setPersonalIdError] = + useState( + Validation.PersonalDetailsValidation.VALID_FIELD + ); const [bloodType, setBloodType] = useState(BloodType.NOT_SURE); const [loading, setLoading] = useState(false); @@ -128,7 +133,17 @@ export default function BookManualDonationScreen( }} errorMessage={LocaleUtils.getValidationErrorTranslation(phoneError)} /> - + { + setPersonalId(nextPersonalId); + setPersonalIdError(Validation.ValidatePersonalId(nextPersonalId)); + }} + errorMessage={LocaleUtils.getValidationErrorTranslation( + personalIdError + )} + /> + }> + {/* TODO: ID is set as "manual" string in the Database, need to change that? */} + {donorId} + }> {LocaleUtils.getBloodTypeTranslation(props.appointment.bloodType)} diff --git a/packages/coordinator/src/store/appointments/actions/BookManualDonationAction.ts b/packages/coordinator/src/store/appointments/actions/BookManualDonationAction.ts index c91cb5d42..5d89c78b3 100644 --- a/packages/coordinator/src/store/appointments/actions/BookManualDonationAction.ts +++ b/packages/coordinator/src/store/appointments/actions/BookManualDonationAction.ts @@ -3,8 +3,8 @@ import * as CoordinatorFunctions from "../../../firebase/CoordinatorFunctions"; import { insertAppointmentsToState } from "./InsertAppointmentsActions"; import { getAppointmentById } from "../selectors/GetAppointmentByIdSelector"; import { - MANUAL_DONOR_ID, MinimalDonorDetailsForAppointment, + MANUAL_DONOR_ID, } from "@zm-blood-components/common"; export const bookManualDonation = @@ -20,7 +20,7 @@ export const bookManualDonation = } const bookedAppointment = await CoordinatorFunctions.bookManualDonation({ - donorId: MANUAL_DONOR_ID, + donorId: MANUAL_DONOR_ID, // TODO: Change firestore to accept donorDetails.appointment.donorId instead of "manual" appointmentIds: [appointmentId], donorDetails: donorDetails, }); From a17570e37bce60eb4f2960b59c5f98645960a2e0 Mon Sep 17 00:00:00 2001 From: rbsPREET Date: Fri, 7 Oct 2022 14:42:12 +0300 Subject: [PATCH 2/2] style change --- .../components/CoordinatorScreen/CoordinatorScreen.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/coordinator/src/components/CoordinatorScreen/CoordinatorScreen.module.scss b/packages/coordinator/src/components/CoordinatorScreen/CoordinatorScreen.module.scss index e1f064719..643b85c06 100644 --- a/packages/coordinator/src/components/CoordinatorScreen/CoordinatorScreen.module.scss +++ b/packages/coordinator/src/components/CoordinatorScreen/CoordinatorScreen.module.scss @@ -1,5 +1,5 @@ .coordinatorScreen { - min-height: 100%; + height: 100%; width: 100vw; display: flex; flex-direction: column;