From 0e06f99ca15dceb8eb0eecba4a839a9ae878a5f3 Mon Sep 17 00:00:00 2001 From: Pedro Martin Date: Fri, 17 Jan 2025 18:35:58 +0000 Subject: [PATCH] feat: add rich text rendering to register patient page --- .../register-a-patient/page-body.module.scss | 3 + .../[lang]/register-a-patient/page-body.tsx | 164 ++++++++++-------- website/src/models/paragraphs/index.ts | 4 +- 3 files changed, 98 insertions(+), 73 deletions(-) diff --git a/website/src/app/[lang]/register-a-patient/page-body.module.scss b/website/src/app/[lang]/register-a-patient/page-body.module.scss index f5f85b3..0da1c5c 100644 --- a/website/src/app/[lang]/register-a-patient/page-body.module.scss +++ b/website/src/app/[lang]/register-a-patient/page-body.module.scss @@ -71,6 +71,9 @@ } li:not(:last-of-type) { + & p { + margin: 0; + } margin-block-end: var(--spacing-2); } diff --git a/website/src/app/[lang]/register-a-patient/page-body.tsx b/website/src/app/[lang]/register-a-patient/page-body.tsx index c174a9c..7adf1a7 100644 --- a/website/src/app/[lang]/register-a-patient/page-body.tsx +++ b/website/src/app/[lang]/register-a-patient/page-body.tsx @@ -3,15 +3,17 @@ import styles from './page-body.module.scss'; import PageContents from '@components/page-contents'; import PageLatestNews from '@components/page-latest-news'; import SignupForm from '@components/signup-form'; +import { documentToReactComponents } from '@contentful/rich-text-react-renderer'; import { getClient } from '@graphql/client'; import { GetRegisterPatientPageDocument, type GetRegisterPatientPageQuery, } from '@graphql/queries/register-patient-page/index.generated'; -import type { AvailableLocale } from '@i18n/locales'; +import type { AvailableLocale, LocalisedString } from '@i18n/locales'; import { matrixLanguagesAccordionId, otherThanFillSurveysAccordionId, + whoCanTakePartAccordionId, whoContactAccordionId, whoWillHaveAccessAccordionId, } from '@models/accordions'; @@ -39,8 +41,34 @@ interface RegisterPageBodyProps { const { query } = getClient(); +const alreadyRegister: LocalisedString = { + en: 'Already registered?', + es: '¿Ya estás registrado?', + fr: 'Déjà enregistré?', + de: 'Bereits registriert?', +}; + const RegisterPageBody: React.FC = async ({ lang }) => { - const { data, error } = await query({ + const { + data: { + intro, + registerWithUsHeading, + registerPatientRegistryHeading, + registerClinicalIdHeading, + registerPatientRegistryLoginLink, + registerWithUsContent, + registerPatientRegistryContent, + registerPatientRegistrySignUpLink, + whoCanTakePartAccordion, + whoWillHaveAccessAccordion, + otherThanFillSurveysAccordion, + matrixLanguagesAccordion, + whoContactAccordion, + registerClinicalIdContent, + registerContentIdLink, + }, + error, + } = await query({ query: GetRegisterPatientPageDocument, variables: { locale: lang, @@ -52,16 +80,19 @@ const RegisterPageBody: React.FC = async ({ lang }) => { registerWithUsContentId, registerPatientRegistryContentId, registerPatientRegistrySignUpLinkId, - whoContactAccordionId, + whoCanTakePartAccordionId, whoWillHaveAccessAccordionId, otherThanFillSurveysAccordionId, matrixLanguagesAccordionId, + whoContactAccordionId, registerClinicalIdContentId, registerContentIdLinkId, }, }); - console.log({ data }); + if (error) { + return null; + } return (
@@ -70,83 +101,77 @@ const RegisterPageBody: React.FC = async ({ lang }) => {
-

- We believe there is power in numbers. This is why every new - diagnosis is important to us. By registering BBSOAS patients, our - community decides what's important to study and learn about BBSOAS.{' '} -

-

There are three actions for newly diagnosed patients:

- - +
-

Register with us

-

- We want to keep track of the number of diagnosed cases around the - world, so that we can share this with you and our community of - scientists and researchers. If you are a newly diagnosed family, - please also share your location. By registering with us, you will - also receive communications from the NR2F1 Foundation. -

+

+ 1. {registerWithUsHeading?.content} +

+ + {documentToReactComponents(registerWithUsContent?.content?.json)} +
-

- Register with the NR2F1 Patient Registry +

+ 2. {registerPatientRegistryHeading?.content}

-

- The Patient Registry collects information through surveys on how a - disease affects a person over a lifetime to better understand - diseases, especially rare ones. The data collected from the - surveys will help researchers and families learn more about - BBSOAS. -

-

- The Patient Registry will show how the disease progresses over - time. This is why it’s extremely important to complete all the - surveys listed in your account. Every year in June, we ask - families to go back into the Patient Registry to complete annual - surveys. -

-

- Having our BBSOAS population registered in Patient Registry also - means as an organization we are ‘research ready’ for clinical - trials or pharmaceutical development. -

-

Get started in 4 simple steps:

-
    -
  1. Create a Patient Registry account in Matrix
    2. -
  2. Upload the genetic report to confirm diagnosis
    3. -
  3. Fill out all the surveys listed in your account
    4. -
  4. Turn on survey notifications
    5. -
+ + {documentToReactComponents( + registerPatientRegistryContent?.content?.json, + )} + - Register now + {registerPatientRegistrySignUpLink?.content} -

Already registered?

+

{alreadyRegister[lang]}

- Login + {registerPatientRegistryLoginLink?.content}
Who can take part? @@ -227,25 +252,22 @@ const RegisterPageBody: React.FC = async ({ lang }) => {
-

- Register for a Clinical Research ID +

+ 3. {registerClinicalIdHeading?.content}

-

- The Clinical Research ID (CRID) is a free patient-generated - service specifically for use in clinical research. The parent or - carer of the patient or the patient themselves decides who to - share it with. With a CRID, you can gain visibility into the - research studies you’re enrolled in. -

-

Anyone around the world can register for a CRID.

+ + {documentToReactComponents( + registerClinicalIdContent?.content?.json, + )} + - Register now + {registerContentIdLink?.content}
diff --git a/website/src/models/paragraphs/index.ts b/website/src/models/paragraphs/index.ts index ce3adac..de7e189 100644 --- a/website/src/models/paragraphs/index.ts +++ b/website/src/models/paragraphs/index.ts @@ -11,7 +11,7 @@ export const empowerFamiliesParagraphId = '3U0YGSxfl4ZU5t07VYkKnc'; export const educatePeopleParagraphId = '1ZCUxvuFRUu61orqlSoHw5'; export const ourVisionParagraphId = '4zrbZeSU8XCsk5T1ZVywo3'; // Register patient page -export const introId = '2fefGxsEkuAkLi3VF3nhi'; -export const registerWithUsContentId = '2anfbBGcBGJxFYWo6i22H'; +export const introId = '2fefGxsEkuAkLai3VF3nhi'; +export const registerWithUsContentId = '2anfbBGc6BGJxFYWo6i22H'; export const registerPatientRegistryContentId = '2u126GIcOaJIqQjgbg169l'; export const registerClinicalIdContentId = '5Y7VVQ0o5PIs1LUk7Sylxm';