src/components/profile: add a toggle setting in ProfileDetails compon…

…ent (#571) * profile details contact participation toggle * update variable names * update selecto name --------- Co-authored-by: Šimon Macek <[email protected]>
auto-mat · Sep 19, 2024 · 46cb483 · 46cb483
1 parent 940e9cd
commit 46cb483
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 1 deletion.
diff --git a/src/components/__tests__/ProfileDetails.cy.js b/src/components/__tests__/ProfileDetails.cy.js
@@ -31,6 +31,7 @@ const selectorProfileCoordinatorContact = 'profile-coordinator-contact';
 const selectorSize = 'profile-details-size';
 const selectorState = 'profile-details-state';
 const selectorTeam = 'profile-details-team';
+const selectorAllowContactPhone = 'profile-allow-contact-phone';
 const selectorTrackingNumber = 'profile-details-tracking-number';
 const selectorTitleChallengeDetails = 'profile-title-challenge-details';
 const selectorTitlePersonalDetails = 'profile-title-personal-details';
@@ -62,6 +63,8 @@ describe('<ProfileDetails>', () => {
         'buttonDownloadInvoice',
         'descriptionNickname',
         'labelAddressDivision',
+        'labelAllowContactPhone',
+        'labelDeliveryAddress',
         'labelEmail',
         'labelEmailEmpty',
         'labelGender',
@@ -74,6 +77,7 @@ describe('<ProfileDetails>', () => {
         'labelOrganization',
         'labelOrganizationType',
         'labelPackage',
+        'labelPaymentState',
         'labelPaymentStateNotPaid',
         'labelPaymentStatePaid',
         'labelPaymentStatePaidByCompany',
@@ -239,6 +243,10 @@ function coreTests() {
       cy.dataCy(selectorPhone)
         .find(dataSelectorValue)
         .should('contain', formPersonalDetails.phone);
+      // contact participation
+      cy.dataCy(selectorAllowContactPhone)
+        .should('be.visible')
+        .and('contain', i18n.global.t('profile.labelAllowContactPhone'));
       // coordinator contact
       cy.dataCy(selectorProfileCoordinatorContact).should('be.visible');
     });

diff --git a/src/components/profile/ProfileDetails.vue b/src/components/profile/ProfileDetails.vue
@@ -21,7 +21,7 @@
  */
 
 // libraries
-import { computed, defineComponent, reactive } from 'vue';
+import { computed, defineComponent, reactive, ref } from 'vue';
 
 // components
 import AddressDisplay from '../global/AddressDisplay.vue';
@@ -60,6 +60,8 @@ export default defineComponent({
 
     const profile: Profile = reactive(formPersonalDetails as Profile);
 
+    const allowContactPhone = ref(false);
+
     const labelPaymentState = computed(() => {
       switch (profile.paymentState) {
         case PaymentState.paidByOrganization:
@@ -92,6 +94,7 @@ export default defineComponent({
     };
 
     return {
+      allowContactPhone,
       iconPaymentColor,
       iconPaymentState,
       iconSize,
@@ -356,6 +359,15 @@ export default defineComponent({
       </div>
     </div>
 
+    <!-- Contact participation -->
+    <div class="q-mt-xl">
+      <q-toggle
+        :label="$t('profile.labelAllowContactPhone')"
+        v-model="allowContactPhone"
+        data-cy="profile-allow-contact-phone"
+      />
+    </div>
+
     <!-- Coordinator contact -->
     <profile-coordinator-contact
       class="q-mt-xl"

diff --git a/src/i18n/cs.toml b/src/i18n/cs.toml
@@ -458,6 +458,7 @@ titleStep2 = "Přizvěte své blízké do výzvy"
 buttonDownloadInvoice = "Stáhnout potvrzení o platbě"
 descriptionNickname = "Zobrazí se ve veřejných výsledcích místo vašeho jména"
 labelAddressDivision = "Adresa / pobočka:"
+labelAllowContactPhone = "Chci vědět více o udržitelné mobilitě a souhlasím, že se mi můžete ozvat telefonicky ohledně podpory aktivní dopravy a veřejného prostoru."
 labelDeliveryAddress = "Doručovací adresa:"
 labelEmail = "E-mail:"
 labelEmailEmpty = "Bez emailu"

diff --git a/src/i18n/en.toml b/src/i18n/en.toml
@@ -455,6 +455,7 @@ titleStep2 = "Invite your loved ones to the challenge"
 buttonDownloadInvoice = "Download payment confirmation"
 descriptionNickname = "Appears in public results instead of your name"
 labelAddressDivision = "Address / Division:"
+labelAllowContactPhone = "I want to know more about sustainable mobility and agree to be contacted by phone about promoting active transport and public space."
 labelDeliveryAddress = "Delivery address:"
 labelEmail = "Email:"
 labelEmailEmpty = "No email"

diff --git a/src/i18n/sk.toml b/src/i18n/sk.toml
@@ -455,6 +455,7 @@ titleStep2 = "Pozvite na výzvu svojich blízkych"
 buttonDownloadInvoice = "Stiahnutie potvrzenia o platbe"
 descriptionNickname = "Zobrazuje sa vo verejných výsledkoch namiesto vášho mena"
 labelAddressDivision = "Adresa / pobočka:"
+labelAllowContactPhone = "Chcem sa dozvedieť viac o udržateľnej mobilite a súhlasím s telefonickým kontaktovaním v súvislosti s podporou aktívnej dopravy a verejného priestoru."
 labelDeliveryAddress = "Dodacia adresa:"
 labelEmail = "E-mail:"
 labelEmailEmpty = "Žiadny e-mail"