feat(companions-pane): Add new companions pane to saved trip editor and account settings screen

i18n/en-US.yml

@@ -219,6 +219,20 @@ components:
     advancedOptions: Advanced options
     groupSize: "Group size:"
     intermediateDestination: Enter intermediate destination
+  CompanionsPane:
+    addNewCompanion: Add a new travel companion
+    companionAlreadyAdded: You already have a companion with email {email}
+    companionExplanation: >
+      Invite an exiting G-MAP 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.
+    confirmDeleteCompanion: Do you want to delete companion {email}?
+    currentCompanionsLabel: "Current travel companions:"
+    deleteCompanion: Delete {email}
+    noCompanions: You do not have any existing travel companions.
+    submitNewCompanion: Send invitation
+    title: Travel companions
   DateTimeOptions:
     arriveBy: Arrive by
     departAt: Depart at
@@ -421,7 +435,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
@@ -437,7 +450,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
@@ -515,6 +527,7 @@ components:
     deleteSavedTrip: Delete saved trip
     editSavedTrip: Edit saved trip
     saveNewTrip: Save new trip
+    travelCompanions: Travel companions
     tripInformation: Trip information
     tripNotFound: Trip not found
     tripNotFoundDescription: Sorry, the requested trip was not found.
@@ -548,6 +561,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

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

i18n/fr.yml

@@ -232,6 +232,20 @@ components:
     advancedOptions: Options avancées
     groupSize: "Taille du groupe :"
     intermediateDestination: Entrez la destination intermédiaire
+  CompanionsPane:
+    addNewCompanion: Ajouter un accompagnateur
+    companionAlreadyAdded: Vous avez déjà un accompagnateur utilisant {email}.
+    companionExplanation: >
+      Invitez un utilisateur G-MAP existant à être votre accompagnateur en
+      entrant leur adresse email. Leur statut passera à "vérifié" dès leur
+      acceptation, et vous pourrez alors partager vos trajets et planifier des
+      trajets qui conviennent à leur profil de mobilité.
+    confirmDeleteCompanion: Voulez-vous supprimer l'accompagnateur {email} ?
+    currentCompanionsLabel: "Mes accompagnateurs :"
+    deleteCompanion: Supprimer {email}
+    noCompanions: Vous n'avez aucun accompagnateur.
+    submitNewCompanion: Envoyer l'invitation
+    title: Accompagnateurs
   DateTimeOptions:
     arriveBy: Arriver à
     departAt: Partir à
@@ -442,7 +456,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
@@ -457,7 +470,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
@@ -536,6 +548,7 @@ components:
     deleteSavedTrip: Supprimer ce trajet
     editSavedTrip: Modifier un trajet enregistré
     saveNewTrip: Enregistrer un nouveau trajet
+    travelCompanions: Accompagnateurs
     tripInformation: Informations sur le trajet
     tripNotFound: Trajet introuvable
     tripNotFoundDescription: Le trajet recherché est introuvable.
@@ -576,6 +589,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

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: 출발

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: Отправление

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

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

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: 出发

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: 出發

lib/components/user/common/add-email-form.tsx

@@ -0,0 +1,87 @@
+// @ts-expect-error No TypeScript for yup.
+import * as yup from 'yup'
+import {
+  ControlLabel,
+  FormControl,
+  FormGroup,
+  HelpBlock
+} from 'react-bootstrap'
+import { Field, Form, Formik } from 'formik'
+import React, { ReactNode } from 'react'
+import styled from 'styled-components'
+
+import { ControlStrip, phoneFieldStyle } from '../styled'
+import SubmitButton from '../../util/submit-button'
+
+interface Props {
+  id: string
+  label: ReactNode
+  onSubmit: any
+  placeholder?: string
+  submitText: ReactNode
+}
+
+// Styles
+const InlineInput = styled(FormControl)`
+  ${phoneFieldStyle}
+  width: 100%;
+`
+
+const Controls = styled.span`
+  display: flex;
+
+  input {
+    margin-right: 10px;
+  }
+`
+
+// 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 => (
+  <Formik
+    initialValues={{ newEmail: '' }}
+    onSubmit={onSubmit}
+    validateOnBlur
+    validateOnChange={false}
+    validationSchema={emailValidationSchema}
+  >
+    {({ errors, isSubmitting, touched, values }) => {
+      const showError =
+        errors.newEmail && touched.newEmail && values.newEmail?.length > 0
+      return (
+        <FormGroup validationState={showError ? 'error' : null}>
+          <ControlLabel>{label}</ControlLabel>
+          <Controls>
+            <Form id={id} noValidate />
+            <Field
+              aria-invalid={showError}
+              aria-required
+              as={InlineInput}
+              form={id}
+              name="newEmail"
+              placeholder={placeholder}
+              type="email"
+            />
+
+            <SubmitButton form={id}>{submitText}</SubmitButton>
+          </Controls>
+          <HelpBlock role="alert">{showError && 'Invalid email'}</HelpBlock>
+        </FormGroup>
+      )
+    }}
+  </Formik>
+)
+
+export default AddEmailForm