Merge pull request #109 from beabee-communityrm/feat/edit-phone-number

chore: add phone number input
beabee-communityrm · Dec 13, 2024 · 07c8364 · 07c8364
2 parents 8ef4f59 + 9070ad3
commit 07c8364
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 2 deletions.
diff --git a/apps/frontend/locales/de.json b/apps/frontend/locales/de.json
@@ -54,6 +54,8 @@
       "title": "Newsletter",
       "unsubscribe": "Vom Newsletter abmelden"
     },
+    "phoneInfo": "Mit der Angabe Ihrer Telefonnummer erklären Sie sich damit einverstanden, telefonisch kontaktiert zu werden.",
+    "phoneInfoAdmin": "Sie müssen die Zustimmung der Person einholen, bevor Sie ihre Telefonnummer in das System eingeben.",
     "savedPassword": "Das neue Passwort wurde gespeichert.",
     "subTitle": "Alle benötigten Felder sind mit * markiert. Alle Informationen werden vertraulich behandelt.",
     "title": "Account"

diff --git a/apps/frontend/locales/de@informal.json b/apps/frontend/locales/de@informal.json
@@ -54,6 +54,8 @@
       "title": "Newsletter",
       "unsubscribe": "Vom Newsletter abmelden"
     },
+    "phoneInfo": "Mit der Angabe deiner Telefonnummer erklärst du dich damit einverstanden, telefonisch kontaktiert zu werden.",
+    "phoneInfoAdmin": "Du musst die Zustimmung der Person einholen, bevor du ihre Telefonnummer in das System eingibst.",
     "savedPassword": "Das neue Passwort wurde gespeichert. ",
     "subTitle": "Alle benötigten Felder sind mit * markiert. Alle Informationen werden vertraulich behandelt.",
     "title": "Account"

diff --git a/apps/frontend/locales/en.json b/apps/frontend/locales/en.json
@@ -54,6 +54,8 @@
       "title": "Newsletter",
       "unsubscribe": "Unsubscribe them from the newsletter"
     },
+    "phoneInfo": "By providing your phone number you are consenting to being contacted by phone",
+    "phoneInfoAdmin": "You must have the person's consent before adding their phone number to the system",
     "savedPassword": "New password saved",
     "subTitle": "Required fields are marked with an asterisk. All information submitted here is private.",
     "title": "Account"
@@ -676,7 +678,7 @@
       "paymentReference": "Payment reference",
       "paymentSource": "Payment source",
       "period": "Period",
-      "phone": "Phone",
+      "phone": "Phone number",
       "preferredChannel": "Preferred channel",
       "tags": "Tags"
     },

diff --git a/apps/frontend/locales/pt.json b/apps/frontend/locales/pt.json
@@ -54,6 +54,7 @@
       "title": "Newsletter",
       "unsubscribe": "Suspender inscrição na newsletter"
     },
+    "phoneInfo": "Ao fornecer o seu número de telefone, está a consentir ser contactado por telefone.",
     "savedPassword": "Nova palavra-passe gravada",
     "subTitle": "Os campos obrigatórios estão marcados com asteriscos. Toda a informação enviada por aqui é privada.",
     "title": "Conta"
@@ -733,7 +734,7 @@
       },
       "failed": {
         "backToJoin": "Voltar à página de registo",
-        "message": "Houve um problema ao criar a tua conta e a nossa equipa já foi avisada. Entra em contacto connosco se o problema continuar.",
+        "message": "Houve um problema inesperado ao criar a tua conta. Entra em contacto connosco se o problema continuar, e diz-nos com detalhe o que aconteceu.",
         "title": "Houve aqui um problema."
       }
     },

diff --git a/apps/frontend/src/components/contact/ContactUpdateAccount.vue b/apps/frontend/src/components/contact/ContactUpdateAccount.vue
@@ -13,6 +13,16 @@
       :optional-names="isAdmin"
     />
 
+    <div class="mb-3">
+      <AppInput
+        v-model="data.telephone"
+        :label="t('form.phone')"
+        :info-message="
+          isAdmin ? t('accountPage.phoneInfoAdmin') : t('accountPage.phoneInfo')
+        "
+      />
+    </div>
+
     <template v-if="accountContent.showNewsletterOptIn && isAdmin">
       <AppHeading class="mt-6">
         {{ t('accountPage.newsletter.title') }}
@@ -92,6 +102,7 @@ import AppRadioGroup from '../forms/AppRadioGroup.vue';
 import AppForm from '../forms/AppForm.vue';
 import AppNotification from '../AppNotification.vue';
 import AppCheckbox from '../forms/AppCheckbox.vue';
+import AppInput from '@components/forms/AppInput.vue';
 
 const props = defineProps<{
   id: string;
@@ -109,6 +120,7 @@ const data = reactive({
   emailAddress: '',
   firstName: '',
   lastName: '',
+  telephone: '',
   newsletterToggle: false,
   deliveryOptIn: false,
   addressLine1: '',
@@ -125,6 +137,7 @@ watch(
     data.emailAddress = contact.email;
     data.firstName = contact.firstname;
     data.lastName = contact.lastname;
+    data.telephone = contact.profile.telephone;
     data.newsletterToggle = false;
     data.deliveryOptIn = contact.profile.deliveryOptIn;
 
@@ -151,6 +164,7 @@ async function handleSubmit() {
     firstname: data.firstName,
     lastname: data.lastName,
     profile: {
+      telephone: data.telephone,
       // Only update newsletter status if the checkbox was ticked
       ...(newNewsletterStatus && {
         newsletterStatus: newNewsletterStatus,