From ec66a9be2f15cb72651dac2b0c98e4c733145aee Mon Sep 17 00:00:00 2001 From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com> Date: Wed, 25 Sep 2024 18:37:42 -0400 Subject: [PATCH 01/28] feat(AddEmailForm): Introduce new component. --- lib/components/user/common/add-email-form.tsx | 96 +++++++++++++++++++ 1 file changed, 96 insertions(+) create mode 100644 lib/components/user/common/add-email-form.tsx diff --git a/lib/components/user/common/add-email-form.tsx b/lib/components/user/common/add-email-form.tsx new file mode 100644 index 000000000..27026f705 --- /dev/null +++ b/lib/components/user/common/add-email-form.tsx @@ -0,0 +1,96 @@ +import * as yup from 'yup' +import { + Button, + ControlLabel, + FormControl, + FormGroup, + HelpBlock +} from 'react-bootstrap' +import { Field, Form, Formik } from 'formik' +import { FormattedMessage } from 'react-intl' +import React from 'react' +import styled from 'styled-components' + +import { ControlStrip, phoneFieldStyle } from '../styled' +import { InlineLoading } from '../../narrative/loading' +import InvisibleA11yLabel from '../../util/invisible-a11y-label' + +interface Props { + id: string + label: ReactNode + onSubmit: any + placeholder?: string + submitText: ReactNode +} + +// Styles +const InlineInput = styled(FormControl)` + ${phoneFieldStyle} + width: 20em; +` + +// The validation schema for email addresses +const emailValidationSchema = yup.object({ + newEmail: yup.string().email().required() +}) + +/** + * Just a form to add an email. + */ +const AddEmailForm = ({ + id, + label, + onSubmit, + placeholder, + submitText +}: Props): JSX.Element => { + return ( + + {({ errors, isSubmitting, touched }) => { + const showError = errors.newEmail && touched.newEmail + return ( + + {label} + + {/* TODO: Make ControlStrip a flex element, add v-gap when multi-line. */} +
+ + + {/* TODO: Refactor submit button. */} + + + {showError && 'Invalid email'} + + ) + }} + + ) +} + +export default AddEmailForm From 1fc76aa5e98465d799e1e9025089bcdc828e1afc Mon Sep 17 00:00:00 2001 From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com> Date: Thu, 26 Sep 2024 11:06:54 -0400 Subject: [PATCH 02/28] feat(CompanionsPane): Add basic companions pane --- .../user/mobility-profile/companions-pane.tsx | 70 +++++++++++++++++++ .../user/mobility-profile/mobility-wizard.tsx | 2 +- lib/components/user/standard-panes.tsx | 6 ++ 3 files changed, 77 insertions(+), 1 deletion(-) create mode 100644 lib/components/user/mobility-profile/companions-pane.tsx diff --git a/lib/components/user/mobility-profile/companions-pane.tsx b/lib/components/user/mobility-profile/companions-pane.tsx new file mode 100644 index 000000000..033a5b699 --- /dev/null +++ b/lib/components/user/mobility-profile/companions-pane.tsx @@ -0,0 +1,70 @@ +import { Button, ControlLabel, FormControl, FormGroup } from 'react-bootstrap' +import { FormikProps } from 'formik' +import React, { useCallback } from 'react' + +import { User } from '../types' +import AddEmailForm from '../common/add-email-form' + +/** + * Companions pane, part of mobility profile. + */ +const CompanionsPane = ({ + handleChange, + setFieldValue, + values: userData +}: FormikProps): JSX.Element => { + const { guardians: companions = [] } = userData + const formId = 'add-companion-form' + + const handleAddNewEmail = useCallback( + async (args) => { + setFieldValue('guardians', [ + ...companions, + { + email: args.newEmail, + status: 'PENDING', + userId: '' + } + ]) + + await handleChange({ + target: document.getElementById(formId) + }) + }, + [companions, handleChange, setFieldValue] + ) + + return ( +
+

+ Invite an exiting GMAP user to be a travel companion by entering their + email. When they accept, their status will change to "Verified", and you + can share your trip status and plan trips based on one another's + mobility profile. +

+ + Current travel companions +
    + {companions.length === 0 ? ( +
  • No companions
    • + ) : ( + companions.map((comp) => ( +
  • + {comp.email} - {comp.status} - [delete] +
    • + )) + )} +
+ + +
+ ) +} + +export default CompanionsPane diff --git a/lib/components/user/mobility-profile/mobility-wizard.tsx b/lib/components/user/mobility-profile/mobility-wizard.tsx index ad8b87705..f83728e73 100644 --- a/lib/components/user/mobility-profile/mobility-wizard.tsx +++ b/lib/components/user/mobility-profile/mobility-wizard.tsx @@ -16,7 +16,7 @@ const MobilityWizard = ({ formikProps }: WizardProps): JSX.Element => { return ( diff --git a/lib/components/user/standard-panes.tsx b/lib/components/user/standard-panes.tsx index 79e5fcb55..e317f5ba2 100644 --- a/lib/components/user/standard-panes.tsx +++ b/lib/components/user/standard-panes.tsx @@ -4,6 +4,7 @@ import React, { ReactNode } from 'react' import { EditedUser } from './types' import AccountSetupFinishPane from './account-setup-finish-pane' import AssistiveDevicesPane from './mobility-profile/assistive-devices-pane' +import CompanionsPane from './mobility-profile/companions-pane' import DeleteUser from './delete-user' import FavoritePlaceList from './places/favorite-place-list' import LimitationsPane from './mobility-profile/limitations-pane' @@ -20,6 +21,11 @@ export interface PaneProps { } const standardPanes: Record = { + companions: { + id: 'companions', + pane: CompanionsPane, + title: 'Travel Companions' // TODO i18n + }, finish: { id: 'finish', pane: AccountSetupFinishPane, From 122428b2fbae34186bf7a2cdc4f7d57baaa91dc7 Mon Sep 17 00:00:00 2001 From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com> Date: Thu, 26 Sep 2024 13:19:37 -0400 Subject: [PATCH 03/28] improvement(CompanionsPane): Add delete companion, improve adding one. --- .../user/mobility-profile/companions-pane.tsx | 113 +++++++++++++++--- 1 file changed, 97 insertions(+), 16 deletions(-) diff --git a/lib/components/user/mobility-profile/companions-pane.tsx b/lib/components/user/mobility-profile/companions-pane.tsx index 033a5b699..be36e73a9 100644 --- a/lib/components/user/mobility-profile/companions-pane.tsx +++ b/lib/components/user/mobility-profile/companions-pane.tsx @@ -1,9 +1,67 @@ -import { Button, ControlLabel, FormControl, FormGroup } from 'react-bootstrap' +import { Label as BsLabel, ControlLabel, FormGroup } from 'react-bootstrap' +import { FormattedMessage } from 'react-intl' import { FormikProps } from 'formik' -import React, { useCallback } from 'react' +import { Trash } from '@styled-icons/fa-solid/Trash' +import React, { useCallback, useState } from 'react' +import { StyledIconWrapper } from '../../util/styledIcon' +import { UnstyledButton } from '../../util/unstyled-button' import { User } from '../types' import AddEmailForm from '../common/add-email-form' +import InvisibleA11yLabel from '../../util/invisible-a11y-label' + +interface CompanionInfo { + email: string + status?: string +} + +interface CompanionRowProps { + companionInfo: CompanionInfo + onDelete: (email: string) => void +} + +const CompanionRow = ({ + companionInfo, + onDelete +}: CompanionRowProps): JSX.Element => { + const { email, status } = companionInfo + const [disabled, setDisabled] = useState(false) + + const handleDelete = useCallback(async () => { + if (window.confirm(`Do you want to delete companion ${email}?`)) { + setDisabled(true) + await onDelete(email) + setDisabled(false) + } + }, [email, onDelete]) + + return ( +
  • + {email}{' '} + {status === 'PENDING' ? ( + + + + ) : status === 'VERIFIED' ? ( + + + + ) : ( + Invalid + )}{' '} + + + + + Delete {email} + +
    • + ) +} /** * Companions pane, part of mobility profile. @@ -16,22 +74,43 @@ const CompanionsPane = ({ const { guardians: companions = [] } = userData const formId = 'add-companion-form' - const handleAddNewEmail = useCallback( - async (args) => { - setFieldValue('guardians', [ - ...companions, - { - email: args.newEmail, - status: 'PENDING', - userId: '' - } - ]) + const updateCompanions = useCallback( + async (newCompanions) => { + setFieldValue('guardians', newCompanions) + // Register the change (can include a submission). await handleChange({ target: document.getElementById(formId) }) }, - [companions, handleChange, setFieldValue] + [handleChange, setFieldValue] + ) + + const handleAddNewEmail = useCallback( + async ({ newEmail }, { resetForm }) => { + // Submit the new email if it is not already listed + if (!companions.find((comp) => comp.email === newEmail)) { + await updateCompanions([ + ...companions, + { + email: newEmail, + status: 'PENDING', + userId: '' + } + ]) + resetForm() + } else { + alert(`You already have a companion with email ${newEmail}.`) + } + }, + [companions, updateCompanions] + ) + + const handleDeleteEmail = useCallback( + async (email: string) => { + await updateCompanions(companions.filter((comp) => comp.email !== email)) + }, + [companions, updateCompanions] ) return ( @@ -49,9 +128,11 @@ const CompanionsPane = ({
  • No companions
    • ) : ( companions.map((comp) => ( -
  • - {comp.email} - {comp.status} - [delete] -
    • + )) )} From c8ee71ac157b8186e656868ddc4df04fe34b09f4 Mon Sep 17 00:00:00 2001 From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com> Date: Thu, 26 Sep 2024 13:20:43 -0400 Subject: [PATCH 04/28] improvement(AddEmailForm): Tweak email validation --- lib/components/user/common/add-email-form.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/lib/components/user/common/add-email-form.tsx b/lib/components/user/common/add-email-form.tsx index 27026f705..219017dcb 100644 --- a/lib/components/user/common/add-email-form.tsx +++ b/lib/components/user/common/add-email-form.tsx @@ -52,8 +52,9 @@ const AddEmailForm = ({ validateOnChange={false} validationSchema={emailValidationSchema} > - {({ errors, isSubmitting, touched }) => { - const showError = errors.newEmail && touched.newEmail + {({ errors, isSubmitting, touched, values }) => { + const showError = + errors.newEmail && touched.newEmail && values.newEmail?.length > 0 return ( {label} From f41b91af3a2afb19891dc191d3e663103005a097 Mon Sep 17 00:00:00 2001 From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com> Date: Thu, 26 Sep 2024 18:32:32 -0400 Subject: [PATCH 05/28] refactor(SubmitButton): Extract submit button --- lib/components/user/common/add-email-form.tsx | 20 ++--------- .../user/mobility-profile/companions-pane.tsx | 6 ++-- lib/components/util/submit-button.tsx | 36 +++++++++++++++++++ 3 files changed, 42 insertions(+), 20 deletions(-) create mode 100644 lib/components/util/submit-button.tsx diff --git a/lib/components/user/common/add-email-form.tsx b/lib/components/user/common/add-email-form.tsx index 219017dcb..252985cf1 100644 --- a/lib/components/user/common/add-email-form.tsx +++ b/lib/components/user/common/add-email-form.tsx @@ -1,19 +1,16 @@ import * as yup from 'yup' import { - Button, ControlLabel, FormControl, FormGroup, HelpBlock } from 'react-bootstrap' import { Field, Form, Formik } from 'formik' -import { FormattedMessage } from 'react-intl' import React from 'react' import styled from 'styled-components' import { ControlStrip, phoneFieldStyle } from '../styled' -import { InlineLoading } from '../../narrative/loading' -import InvisibleA11yLabel from '../../util/invisible-a11y-label' +import SubmitButton from '../../util/submit-button' interface Props { id: string @@ -71,20 +68,7 @@ const AddEmailForm = ({ type="email" /> - {/* TODO: Refactor submit button. */} - + {submitText} {showError && 'Invalid email'} diff --git a/lib/components/user/mobility-profile/companions-pane.tsx b/lib/components/user/mobility-profile/companions-pane.tsx index be36e73a9..ed35ed83d 100644 --- a/lib/components/user/mobility-profile/companions-pane.tsx +++ b/lib/components/user/mobility-profile/companions-pane.tsx @@ -9,6 +9,7 @@ import { UnstyledButton } from '../../util/unstyled-button' import { User } from '../types' import AddEmailForm from '../common/add-email-form' import InvisibleA11yLabel from '../../util/invisible-a11y-label' +import SubmitButton from '../../util/submit-button' interface CompanionInfo { email: string @@ -49,7 +50,8 @@ const CompanionRow = ({ ) : ( Invalid )}{' '} - Delete {email} - + ) } diff --git a/lib/components/util/submit-button.tsx b/lib/components/util/submit-button.tsx new file mode 100644 index 000000000..e11330c68 --- /dev/null +++ b/lib/components/util/submit-button.tsx @@ -0,0 +1,36 @@ +import { Button } from 'react-bootstrap' +import { FormattedMessage } from 'react-intl' +import React, { HTMLAttributes } from 'react' + +import { InlineLoading } from '../narrative/loading' + +import InvisibleA11yLabel from './invisible-a11y-label' + +interface Props extends HTMLAttributes { + as?: string | ComponentType + isSubmitting?: boolean +} + +/** + * Submit button with 'submitting' state and relevant a11y. + */ +const SubmitButton = ({ + as: Component = Button, + children, + isSubmitting, + ...buttonProps +}: Props): JSX.Element => ( + + {isSubmitting ? : children} + + {isSubmitting && } + + +) + +export default SubmitButton From 2f9b2993702a7058291a7a3f7df39d42f53548ac Mon Sep 17 00:00:00 2001 From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com> Date: Fri, 27 Sep 2024 16:48:48 -0400 Subject: [PATCH 06/28] refactor(StatusBadge): Extract status badge component. --- i18n/en-US.yml | 6 ++- i18n/es.yml | 6 ++- i18n/fr.yml | 6 ++- i18n/ko.yml | 6 ++- i18n/ru.yml | 6 ++- i18n/tl.yml | 6 ++- i18n/vi.yml | 6 ++- i18n/zh_Hans.yml | 6 ++- i18n/zh_Hant.yml | 6 ++- .../user/mobility-profile/companions-pane.tsx | 17 ++----- lib/components/user/phone-number-editor.tsx | 19 +++----- lib/components/util/status-badge.tsx | 48 +++++++++++++++++++ 12 files changed, 94 insertions(+), 44 deletions(-) create mode 100644 lib/components/util/status-badge.tsx diff --git a/i18n/en-US.yml b/i18n/en-US.yml index f03fa5bce..cdb774e6f 100644 --- a/i18n/en-US.yml +++ b/i18n/en-US.yml @@ -417,7 +417,6 @@ components: changeNumber: Change number invalidCode: Please enter 6 digits for the validation code. invalidPhone: Please enter a valid phone number. - pending: Pending phoneNumberSubmitted: Phone number {phoneNumber} was successfully submitted. phoneNumberVerified: Phone number {phoneNumber} was successfully verified. placeholder: Enter your phone number @@ -433,7 +432,6 @@ components: Please check the SMS messaging app on your mobile phone for a text message with a verification code, and enter the code below (code expires after 10 minutes). - verified: Verified verify: Verify verifySms: >- Please complete the verification process in order to set up SMS @@ -543,6 +541,10 @@ components: usingRealtimeInfo: This trip uses real-time traffic and delay information StackedPaneDisplay: savePreferences: Save preferences + StatusBadge: + invalid: Invalid + pending: Pending + verified: Verified StopScheduleTable: block: Block departure: Departure diff --git a/i18n/es.yml b/i18n/es.yml index 2a25daa1a..a68f7a03c 100644 --- a/i18n/es.yml +++ b/i18n/es.yml @@ -429,7 +429,6 @@ components: changeNumber: Cambiar número de teléfono invalidCode: Introduzca 6 dígitos para el código de validación. invalidPhone: Por favor, introduzca un número de teléfono válido. - pending: Pendiente phoneNumberSubmitted: El número de teléfono {phoneNumber} se ha enviado correctamente. phoneNumberVerified: El número de teléfono {phoneNumber} se ha verificado correctamente. placeholder: Introduzca su número de teléfono @@ -448,7 +447,6 @@ components: teléfono móvil si hay un mensaje de texto con un código de verificación, e introduzca el código que aparece a continuación. El código caduca a los 10 minutos. - verified: Verificado verify: Verificar verifySms: >- Por favor, complete el proceso de verificación para configurar las @@ -561,6 +559,10 @@ components: usingRealtimeInfo: Este viaje utiliza información de tráfico y retrasos en tiempo real StackedPaneDisplay: savePreferences: Guardar preferencias + StatusBadge: + invalid: Inválido + pending: Pendiente + verified: Verificado StopScheduleTable: block: Bloquear departure: Salida diff --git a/i18n/fr.yml b/i18n/fr.yml index 082b0e96a..7cb0daaab 100644 --- a/i18n/fr.yml +++ b/i18n/fr.yml @@ -440,7 +440,6 @@ components: changeNumber: Changer de numéro invalidCode: Le code de vérification doit comporter 6 chiffres. invalidPhone: Veuillez entrer un numéro de téléphone valable. - pending: Non vérifié phoneNumberSubmitted: Le numéro {phoneNumber} a bien été envoyé. phoneNumberVerified: Le numéro {phoneNumber} a bien été vérifié. placeholder: Entrez votre numéro @@ -455,7 +454,6 @@ components: verificationInstructions: > Un SMS vous a été envoyé avec un code de vérification. Veuillez taper ce code ci-dessous (le code expire après 10 minutes). - verified: Vérifié verify: Vérifier verifySms: >- Veuillez effectuer la vérification de votre numéro de téléphone afin de @@ -573,6 +571,10 @@ components: retards StackedPaneDisplay: savePreferences: Enregistrer mes préférences + StatusBadge: + invalid: Non valable + pending: Non vérifié + verified: Vérifié StopScheduleTable: block: Bloc departure: Départ diff --git a/i18n/ko.yml b/i18n/ko.yml index e333e7e62..bc5bbb9d9 100644 --- a/i18n/ko.yml +++ b/i18n/ko.yml @@ -354,7 +354,6 @@ components: changeNumber: 번호 변경 invalidCode: 확인 코드 6 자리를 입력하세요. invalidPhone: 유효한 전화번호를 입력하세요. - pending: 보류 중 phoneNumberSubmitted: 전화번호 {phoneNumber} 이/가 성공적으로 제출되었습니다. phoneNumberVerified: 전화번호 {phoneNumber}가 성공적으로 확인되었습니다. placeholder: 전화번호를 입력하십시오 @@ -367,7 +366,6 @@ components: verificationCode: "확인 코드:" verificationInstructions: | 휴대폰의 SMS 메시지 앱에서 인증 코드를 확인하고 아래에 코드를 입력하세요(코드는 10분 후에 만료됩니다). - verified: 확인됨 verify: 확인 Place: deleteThisPlace: 이 장소 삭제 @@ -465,6 +463,10 @@ components: usingRealtimeInfo: 이 트립은 실시간 교통 및 지체 정보를 사용합니다 StackedPaneDisplay: savePreferences: 환경설정 저장 + StatusBadge: + invalid: Invalid + pending: 보류 중 + verified: 확인됨 StopScheduleTable: block: 블록 departure: 출발 diff --git a/i18n/ru.yml b/i18n/ru.yml index b7a2eedd4..0e1a1768b 100644 --- a/i18n/ru.yml +++ b/i18n/ru.yml @@ -390,7 +390,6 @@ components: changeNumber: Изменить номер invalidCode: "Введите проверочный код из 6\_цифр." invalidPhone: Введите действительный номер телефона. - pending: Ожидание phoneNumberSubmitted: Номер телефона{phoneNumber} был успешно отправлен. phoneNumberVerified: Номер телефона{phoneNumber} был успешно проверен. placeholder: Введите свой номер телефона @@ -403,7 +402,6 @@ components: могут взиматься дополнительные пени. verificationCode: "Код подтверждения:" verificationInstructions: "Откройте приложение для обмена SMS на телефоне и найдите текстовое сообщение с кодом подтверждения. Затем введите код ниже (срок действия кода: 10\_минут).\n" - verified: Подтверждено verify: Подтвердить Place: deleteThisPlace: Удалить это место @@ -514,6 +512,10 @@ components: режиме реального времени. StackedPaneDisplay: savePreferences: Сохранить параметры + StatusBadge: + invalid: Invalid + pending: Ожидание + verified: Подтверждено StopScheduleTable: block: Заблокировать departure: Отправление diff --git a/i18n/tl.yml b/i18n/tl.yml index d1e65084a..4d48060ef 100644 --- a/i18n/tl.yml +++ b/i18n/tl.yml @@ -395,7 +395,6 @@ components: changeNumber: Baguhin ang numero invalidCode: Maglagay ng 6 na digit para sa code sa pag-validate. invalidPhone: Maglagay ng valid na numero ng telepono. - pending: Nakabinbin phoneNumberSubmitted: Matagumpay na naisumite ang numero ng teleponong {phoneNumber}. phoneNumberVerified: Matagumpay na na-verify ang numero ng teleponong {phoneNumber} . placeholder: Ilagay ang numero ng iyong telepono @@ -412,7 +411,6 @@ components: Tingnan ang app sa SMS messaging sa iyong mobile phone para sa isang text message na may code sa pag-verify, at ilagay ang code sa ibaba (mag-e-expire ang code pagkalipas ng 10 minuto). - verified: Na-verify verify: I-verify Place: deleteThisPlace: I-delete ang lugar na ito @@ -523,6 +521,10 @@ components: pagkaantala StackedPaneDisplay: savePreferences: I-save ang mga kagustuhan + StatusBadge: + invalid: Invalid + pending: Nakabinbin + verified: Na-verify StopScheduleTable: block: I-block departure: Pag-alis diff --git a/i18n/vi.yml b/i18n/vi.yml index 719ee0898..316b37876 100644 --- a/i18n/vi.yml +++ b/i18n/vi.yml @@ -391,7 +391,6 @@ components: changeNumber: Thay đổi số điện thoại invalidCode: Vui lòng nhập 6 chữ số cho mã xác thực. invalidPhone: Xin vui lòng nhập một số điện thoại hợp lệ. - pending: Chưa xác minh phoneNumberSubmitted: Gửi thành công số điện thoại {phoneNumber}. phoneNumberVerified: Số điện thoại {phoneNumber} đã được xác minh thành công. placeholder: Nhập số điện thoại của bạn @@ -407,7 +406,6 @@ components: Vui lòng kiểm tra ứng dụng nhắn tin SMS trên điện thoại di động của bạn để thấy tin nhắn với mã xác minh và nhập mã bên dưới (mã hết hạn sau 10 phút). - verified: Đã xác minh verify: Kiểm chứng Place: deleteThisPlace: Xóa nơi này @@ -517,6 +515,10 @@ components: thực StackedPaneDisplay: savePreferences: Lưu lại những ưu tiên + StatusBadge: + invalid: Invalid + pending: Chưa xác minh + verified: Đã xác minh StopScheduleTable: block: Dãy nhà departure: Khởi hành diff --git a/i18n/zh_Hans.yml b/i18n/zh_Hans.yml index 47464fc2c..5d4b6a419 100644 --- a/i18n/zh_Hans.yml +++ b/i18n/zh_Hans.yml @@ -356,7 +356,6 @@ components: changeNumber: 更改电话号码 invalidCode: 请输入6位数的验证码. invalidPhone: 请输入一个有效的电话号码. - pending: 待定 phoneNumberSubmitted: 电话号码{phoneNumber}已成功提交。 phoneNumberVerified: 电话号码 {phoneNumber} 已成功验证。 placeholder: 输入你的电话号码 @@ -367,7 +366,6 @@ components: verificationCode: "验证码:" verificationInstructions: | 请检查您手机上的短信应用查看是否有验证码的短信并输入以下代码 (代码在10分钟后失效). - verified: 已验证 verify: 核实 Place: deleteThisPlace: 删除这个地点 @@ -464,6 +462,10 @@ components: usingRealtimeInfo: 这个行程使用实时交通和延迟信息 StackedPaneDisplay: savePreferences: 保存偏好 + StatusBadge: + invalid: Invalid + pending: 待定 + verified: 已验证 StopScheduleTable: block: 堵塞 departure: 出发 diff --git a/i18n/zh_Hant.yml b/i18n/zh_Hant.yml index e625d04c7..4fbc7d8fd 100644 --- a/i18n/zh_Hant.yml +++ b/i18n/zh_Hant.yml @@ -344,7 +344,6 @@ components: changeNumber: 變更號碼 invalidCode: 請輸入6位數的驗證碼。 invalidPhone: 請輸入有效的電話號碼。 - pending: 待處理 phoneNumberSubmitted: 已順利提交電話號碼 {phoneNumber}。 phoneNumberVerified: 已順利驗證電話號碼 {phoneNumber} 。 placeholder: 輸入您的電話號碼 @@ -356,7 +355,6 @@ components: verificationCode: 驗證碼： verificationInstructions: | 請查看您手機的簡訊應用程式是否收到含有驗證碼的簡訊，並在下方輸入該驗證碼 (驗證碼將在10分鐘後失效)。 - verified: 已驗證 verify: 驗證 Place: deleteThisPlace: 刪除此地點 @@ -453,6 +451,10 @@ components: usingRealtimeInfo: 此行程使用即時交通和延誤資訊。 StackedPaneDisplay: savePreferences: 儲存偏好 + StatusBadge: + invalid: Invalid + pending: 待處理 + verified: 已驗證 StopScheduleTable: block: 封鎖 departure: 出發 diff --git a/lib/components/user/mobility-profile/companions-pane.tsx b/lib/components/user/mobility-profile/companions-pane.tsx index ed35ed83d..c312a4f00 100644 --- a/lib/components/user/mobility-profile/companions-pane.tsx +++ b/lib/components/user/mobility-profile/companions-pane.tsx @@ -1,5 +1,4 @@ -import { Label as BsLabel, ControlLabel, FormGroup } from 'react-bootstrap' -import { FormattedMessage } from 'react-intl' +import { ControlLabel, FormGroup } from 'react-bootstrap' import { FormikProps } from 'formik' import { Trash } from '@styled-icons/fa-solid/Trash' import React, { useCallback, useState } from 'react' @@ -9,6 +8,7 @@ import { UnstyledButton } from '../../util/unstyled-button' import { User } from '../types' import AddEmailForm from '../common/add-email-form' import InvisibleA11yLabel from '../../util/invisible-a11y-label' +import StatusBadge from '../../util/status-badge' import SubmitButton from '../../util/submit-button' interface CompanionInfo { @@ -38,18 +38,7 @@ const CompanionRow = ({ return (
  • - {email}{' '} - {status === 'PENDING' ? ( - - - - ) : status === 'VERIFIED' ? ( - - - - ) : ( - Invalid - )}{' '} + {email} { {/* Invisible parentheses for no-CSS and screen readers */} ( - {isPending ? ( - - - - ) : ( - phoneNumberVerified && ( - - - - ) - )} + )