Merge branch 'main' into release/1.4.4

Toxiapo · web-flow · commit 1a5b5553875a · 2026-06-15T10:30:13.000-04:00
diff --git a/pages/404.tsx b/pages/404.tsx
@@ -0,0 +1,26 @@
+import { GetStaticProps } from "next";
+import { Text } from "@nypl/design-system-react-components";
+import {
+  BackToHomeLink,
+  ContactUsLink,
+  ErrorComponent,
+} from "../src/components/Error";
+
+export default function NotFoundPage() {
+  return (
+    <ErrorComponent
+      heading="We couldn't find that page"
+      description={
+        <Text maxWidth="730px" margin="auto">
+          The page you were looking for doesn't exist or may have moved
+          elsewhere. Try starting a <BackToHomeLink /> or <ContactUsLink /> if
+          the error persists.
+        </Text>
+      }
+    />
+  );
+}
+
+export const getStaticProps: GetStaticProps = async () => {
+  return { props: {} };
+};
diff --git a/pages/500.tsx b/pages/500.tsx
@@ -0,0 +1,21 @@
+import { Text } from "@nypl/design-system-react-components";
+import {
+  BackToHomeLink,
+  ContactUsLink,
+  ErrorComponent,
+} from "../src/components/Error";
+
+export default function ServerErrorPage() {
+  return (
+    <ErrorComponent
+      heading="Something went wrong on our end"
+      description={
+        <Text maxWidth="700px" margin="auto">
+          We are working to resolve a server issue. Your application progress
+          may not have been saved. Try starting a <BackToHomeLink /> in a few
+          minutes or <ContactUsLink /> if the error persists.
+        </Text>
+      }
+    />
+  );
+}
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -61,6 +61,7 @@ function MyApp({ Component, pageProps }: MyAppProps) {
   };
   const initState = { ...formInitialStateCopy };
   const pageTitles = getPageTitles();
+  const isErrorPage = ["/404", "/500"].includes(router.pathname);
 
   return (
     <>
@@ -138,13 +139,17 @@ function MyApp({ Component, pageProps }: MyAppProps) {
         <FormProvider {...formMethods}>
           <FormDataContextProvider initState={initState}>
             <ErrorBoundary reset={router.asPath}>
-              <ApplicationContainer>
-                <Component
-                  {...pageProps}
-                  pageTitles={pageTitles}
-                  policyType={router.query.policyType}
-                />
-              </ApplicationContainer>
+              {isErrorPage ? (
+                <Component {...pageProps} />
+              ) : (
+                <ApplicationContainer>
+                  <Component
+                    {...pageProps}
+                    pageTitles={pageTitles}
+                    policyType={router.query.policyType}
+                  />
+                </ApplicationContainer>
+              )}
             </ErrorBoundary>
           </FormDataContextProvider>
         </FormProvider>
diff --git a/public/locales/ar/common.json b/public/locales/ar/common.json
@@ -33,7 +33,7 @@
     "ageGate": "Yes, I am over 13 years old.",
     "email": {
       "label": "عنوان البريد الإلكتروني",
-      "instruction": "<span>مطلوب عنوان بريد إلكتروني لاستخدام العديد من مواردنا الرقمية، مثل الكتب الإلكترونية.</span>"
+      "instruction": "مطلوب عنوان بريد إلكتروني لاستخدام العديد من مواردنا الرقمية، مثل الكتب الإلكترونية."
     },
     "eCommunications": {
       "labelText": "نعم، أرغب في تلقي معلومات بشأن برامج مكتبة نيويورك العامة (New York Public Library, NYPL) وخدماتها"
diff --git a/public/locales/bn/common.json b/public/locales/bn/common.json
@@ -33,7 +33,7 @@
     "ageGate": "Yes, I am over 13 years old.",
     "email": {
       "label": "ইমেইল অ্যাড্রেস",
-      "instruction": "<span>আমাদের অনেক ডিজিটাল সম্পদ, যেমন ই-বুক ব্যবহার করার জন্য একটি ইমেইল ঠিকানা প্রয়োজন।</span>"
+      "instruction": "আমাদের অনেক ডিজিটাল সম্পদ, যেমন ই-বুক ব্যবহার করার জন্য একটি ইমেইল ঠিকানা প্রয়োজন।"
     },
     "eCommunications": {
       "labelText": "হ্যাঁ, আমি এনওয়াইপিএল এর প্রোগ্রাম এবংসার্ভিসেস সম্পর্কে তথ্য পেতে চাই"
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -43,7 +43,7 @@
     "ageGate": "Yes, I am over 13 years old.",
     "email": {
       "label": "Email address",
-      "instruction": "<span>An email address is required to use many of our digital resources, such as e-books.</span>"
+      "instruction": "An email address is required to use many of our digital resources, such as e-books."
     },
     "eCommunications": {
       "labelText": "Yes, I would like to receive information about NYPL's programs and services"
diff --git a/public/locales/es/common.json b/public/locales/es/common.json
@@ -36,7 +36,7 @@
     "ageGate": "Yes, I am over 13 years old.",
     "email": {
       "label": "Dirección de correo electrónico",
-      "instruction": "<span>Se requiere una dirección de correo electrónico para utilizar muchos de nuestros recursos digitales, como los libros electrónicos.</span>"
+      "instruction": "Se requiere una dirección de correo electrónico para utilizar muchos de nuestros recursos digitales, como los libros electrónicos."
     },
     "eCommunications": {
       "labelText": "Sí, me gustaría recibir información sobre los programas y servicios que ofrece la NYPL"
diff --git a/public/locales/fr/common.json b/public/locales/fr/common.json
@@ -33,7 +33,7 @@
     "ageGate": "Yes, I am over 13 years old.",
     "email": {
       "label": "Adresse e-mail",
-      "instruction": "<span>Une adresse e-mail vous sera demandée pour l’utilisation de nombreuses ressources numériques comme les livres électroniques.<span>"
+      "instruction": "Une adresse e-mail vous sera demandée pour l’utilisation de nombreuses ressources numériques comme les livres électroniques."
     },
     "eCommunications": {
       "labelText": "Oui, je souhaite recevoir les informations sur les activités et les services de la NYPL."
diff --git a/public/locales/ht/common.json b/public/locales/ht/common.json
@@ -33,7 +33,7 @@
     "ageGate": "Yes, I am over 13 years old.",
     "email": {
       "label": "Imèl",
-      "instruction": "<span>Yon adrès imèl nesesè pou itilize plizyè nan resous nimerik nou yo, tankou liv elektwonik.</span>"
+      "instruction": "Yon adrès imèl nesesè pou itilize plizyè nan resous nimerik nou yo, tankou liv elektwonik."
     },
     "eCommunications": {
       "labelText": "Wi, mwen ta renmen resevwa enfòmasyon sou pwogram ak sèvis Bibliyotèk Piblik New York (NYPL) ofri yo."
diff --git a/public/locales/ko/common.json b/public/locales/ko/common.json
@@ -33,7 +33,7 @@
     "ageGate": "Yes, I am over 13 years old.",
     "email": {
       "label": "이메일 주소",
-      "instruction": "<span>전자책과 같은 많은 디지털 자료를 이용하기 위해서는 이메일 주소가 필요합니다.</span>"
+      "instruction": "전자책과 같은 많은 디지털 자료를 이용하기 위해서는 이메일 주소가 필요합니다."
     },
     "eCommunications": {
       "labelText": "예, NYPL의 프로그램과 서비스에 대한 정보를 받기를 원합니다."
diff --git a/public/locales/pl/common.json b/public/locales/pl/common.json
@@ -33,7 +33,7 @@
     "ageGate": "Yes, I am over 13 years old.",
     "email": {
       "label": "Adres e-mail",
-      "instruction": "<span>Adres e-mail jest niezbędny, aby móc korzystać z wielu naszych zasobów cyfrowych, takich jak e-booki.</span>"
+      "instruction": "Adres e-mail jest niezbędny, aby móc korzystać z wielu naszych zasobów cyfrowych, takich jak e-booki."
     },
     "eCommunications": {
       "labelText": "Tak, chcę otrzymywać informacje o programach i usługach NYPL. "
diff --git a/public/locales/ru/common.json b/public/locales/ru/common.json
@@ -33,7 +33,7 @@
     "ageGate": "Yes, I am over 13 years old.",
     "email": {
       "label": "Адрес электронной почты",
-      "instruction": "<span>Адрес электронной почты необходимо указать для того, чтобы иметь возможность пользоваться большинством наших цифровых ресурсов, например, электронными книгами.</span>"
+      "instruction": "Адрес электронной почты необходимо указать для того, чтобы иметь возможность пользоваться большинством наших цифровых ресурсов, например, электронными книгами."
     },
     "eCommunications": {
       "labelText": " Да, я желаю получать информацию по электронной почте от Нью-Йоркской публичной библиотеки о новых услугах и программах"
diff --git a/public/locales/ur/common.json b/public/locales/ur/common.json
@@ -33,7 +33,7 @@
     "ageGate": "Yes, I am over 13 years old.",
     "email": {
       "label": "ای میل ایڈریس",
-      "instruction": "<span>ہمارے بہت سے ڈیجیٹل وسائل، جیسے ای-بُکس استعمال کرنے کے لیے ایک ای میل ایڈریس درکار ہے۔</span>"
+      "instruction": "ہمارے بہت سے ڈیجیٹل وسائل، جیسے ای-بُکس استعمال کرنے کے لیے ایک ای میل ایڈریس درکار ہے۔"
     },
     "eCommunications": {
       "labelText": "ہاں، میں NYPL (نیویارک پبلک لائبریری) کے پروگراموں اور خدمات کے بارے میں معلومات حاصل کرنا چاہوں گا/گی۔"
diff --git a/public/locales/zhcn/common.json b/public/locales/zhcn/common.json
@@ -33,7 +33,7 @@
     "ageGate": "Yes, I am over 13 years old.",
     "email": {
       "label": "电子邮件地址",
-      "instruction": "<span>使用我们的许多数字资源（例如，电子书）都需要一个电子邮件地址。</span>"
+      "instruction": "使用我们的许多数字资源（例如，电子书）都需要一个电子邮件地址。"
     },
     "eCommunications": {
       "labelText": "是的，我想收到有关NYPL活动和服务的信息"
diff --git a/src/components/Error/index.tsx b/src/components/Error/index.tsx
@@ -0,0 +1,63 @@
+import React from "react";
+import {
+  Box,
+  Heading,
+  Template,
+  TemplateBreakout,
+  TemplateContent,
+  TemplateHeader,
+  TemplateMain,
+  Link as DSLink,
+} from "@nypl/design-system-react-components";
+import Link from "next/link";
+import Breadcrumbs from "../Breadcrumb";
+import { useRouter } from "next/router";
+import { BrokenBook as BrokenBookIcon } from "../Icons/BrokenBook";
+
+export const ContactUsLink = () => {
+  return (
+    <DSLink href="https://www.nypl.org/get-help/contact-us">contact us</DSLink>
+  );
+};
+
+export const BackToHomeLink = ({
+  text = "new application",
+}: {
+  text?: string;
+}) => {
+  const router = useRouter();
+  const lang = router.isReady ? router.query.lang : undefined;
+  const href = lang && lang !== "en" ? `/new?lang=${lang}` : "/new";
+  return <Link href={href}>{text}</Link>;
+};
+
+export const ErrorComponent = ({
+  heading,
+  description,
+}: {
+  heading: string;
+  description: React.ReactNode;
+}) => {
+  return (
+    <Template variant="narrow" gap="0!">
+      <TemplateHeader id="mainHeader" m="0!" dir="ltr">
+        <TemplateBreakout>
+          <Breadcrumbs />
+        </TemplateBreakout>
+      </TemplateHeader>
+      <TemplateMain id="mainContent">
+        <TemplateContent my="xxl" textAlign="center">
+          <Box mb="xl">
+            <BrokenBookIcon />
+          </Box>
+          <Box textAlign="center">
+            <Heading level="h2" size="heading3" mb="m">
+              {heading}
+            </Heading>
+            {description}
+          </Box>
+        </TemplateContent>
+      </TemplateMain>
+    </Template>
+  );
+};
diff --git a/src/components/ErrorBoundary/index.tsx b/src/components/ErrorBoundary/index.tsx
@@ -1,19 +1,7 @@
-import {
-  Heading,
-  Text,
-  Box,
-  Template,
-  TemplateMain,
-  TemplateContent,
-  TemplateHeader,
-  TemplateBreakout,
-  Link as DSLink,
-} from "@nypl/design-system-react-components";
-import Link from "next/link";
+import { Text } from "@nypl/design-system-react-components";
 import React from "react";
-import Breadcrumbs from "../Breadcrumb";
-import { BrokenBook as BrokenBookIcon } from "../Icons/BrokenBook";
 import { NRError } from "../../logger/newrelic";
+import { BackToHomeLink, ContactUsLink, ErrorComponent } from "../Error";
 
 interface ErrorBoundaryProps {
   children: React.ReactNode;
@@ -58,46 +46,21 @@ class ErrorBoundary extends React.Component<
   render() {
     if (this.state.hasError) {
       return (
-        <ErrorComponent>
-          <Box mb="xl">
-            <BrokenBookIcon />
-          </Box>
-          <Box textAlign="center">
-            <Heading level="h2" size="heading3" mb="m">
-              There was an unexpected error
-            </Heading>
+        <ErrorComponent
+          heading="There was an unexpected error"
+          description={
             <Text maxWidth="730px" margin="auto">
               We couldn't process your request at this time. Your application
               progress may not have been saved. Try starting a{" "}
-              <Link href="/new">new application</Link> in a few minutes or{" "}
-              <DSLink href="https://www.nypl.org/get-help/contact-us">
-                contact us
-              </DSLink>{" "}
-              if the error persists.
+              <BackToHomeLink /> in a few minutes or <ContactUsLink /> if the
+              error persists.
             </Text>
-          </Box>
-        </ErrorComponent>
+          }
+        />
       );
     }
     return this.props.children;
   }
 }
 
-export const ErrorComponent = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <Template variant="narrow" gap="0!">
-      <TemplateHeader id="mainHeader" m="0!" dir="ltr">
-        <TemplateBreakout>
-          <Breadcrumbs />
-        </TemplateBreakout>
-      </TemplateHeader>
-      <TemplateMain id="mainContent">
-        <TemplateContent my="xxl" textAlign="center">
-          {children}
-        </TemplateContent>
-      </TemplateMain>
-    </Template>
-  );
-};
-
 export default ErrorBoundary;
diff --git a/src/components/PersonalFormFields/index.tsx b/src/components/PersonalFormFields/index.tsx
@@ -2,7 +2,6 @@ import {
   Checkbox,
   FormField as DSFormField,
   FormRow,
-  Link as DSLink,
   TextInputRefType,
   Text,
 } from "@nypl/design-system-react-components";
@@ -14,7 +13,6 @@ import FormField from "../FormField";
 import AgeFormFields from "../AgeFormFields";
 import useFormDataContext from "../../context/FormDataContext";
 import { useMergedRef } from "../../hooks/useMergedRef";
-import { Trans } from "../Trans";
 
 interface PersonalFormFieldsProps {
   agencyType?: string;
@@ -86,16 +84,14 @@ function PersonalFormFields({
             })}
             errorState={errors}
             isRequired
-            type="email"
+            type="text"
+            inputMode="email"
             defaultValue={formValues.email}
             instructionText={
-              <Trans
-                i18nKey="personal.email.instruction"
-                components={{
-                  a: <DSLink variant="external" />,
-                  span: <Text mt="xs" />,
-                }}
-              />
+              <>
+                <Text>{"email@example.com"}</Text>
+                <Text mt="xs">{t("personal.email.instruction")}</Text>
+              </>
             }
             autoComplete="email"
           />
