src/components: add section registration details to ProfileDetails co…

…mponent (#554) * profile details registration section * cleanup * cleanup * refactor using enums and var * refactor using includes --------- Co-authored-by: Šimon Macek <[email protected]>
auto-mat · Sep 9, 2024 · 3ca57e5 · 3ca57e5
1 parent 3f9382f
commit 3ca57e5
Show file tree

Hide file tree

Showing 7 changed files with 187 additions and 4 deletions.
diff --git a/src/components/__tests__/ProfileDetails.cy.js b/src/components/__tests__/ProfileDetails.cy.js
@@ -1,13 +1,17 @@
 import { colors } from 'quasar';
 import ProfileDetails from 'components/profile/ProfileDetails.vue';
 import { i18n } from '../../boot/i18n';
+import { PaymentState } from '../../../src/components/types/Profile';
 
 const { getPaletteColor } = colors;
 const grey10 = getPaletteColor('grey-10');
+const green = getPaletteColor('green');
+const red = getPaletteColor('red');
 
 // selectors
 const selectorAddressDivision = 'profile-details-address-division';
 const selectorDeliveryAddress = 'profile-details-delivery-address';
+const selectorDownloadInvoice = 'profile-details-download-invoice';
 const selectorEmail = 'profile-details-email';
 const selectorFormEmail = 'profile-details-form-email';
 const selectorFormGender = 'profile-details-form-gender';
@@ -20,6 +24,7 @@ const selectorOrganizationType = 'profile-details-organization-type';
 const selectorOrganization = 'profile-details-organization';
 const selectorPackage = 'profile-details-package';
 const selectorPackageLink = 'profile-details-package-link';
+const selectorPaymentState = 'profile-details-payment-state';
 const selectorPersonalDetails = 'profile-details';
 const selectorPhone = 'profile-details-phone';
 const selectorSize = 'profile-details-size';
@@ -28,6 +33,7 @@ const selectorTeam = 'profile-details-team';
 const selectorTrackingNumber = 'profile-details-tracking-number';
 const selectorTitleChallengeDetails = 'profile-title-challenge-details';
 const selectorTitlePersonalDetails = 'profile-title-personal-details';
+const selectorTitleRegistrationDetails = 'profile-title-registration-details';
 const selectorTitleStarterPackage = 'profile-title-starter-package';
 const dataSelectorAddressDisplay = '[data-cy="address-display"]';
 const dataSelectorButtonCancel = '[data-cy="form-button-cancel"]';
@@ -37,6 +43,8 @@ const dataSelectorEmpty = '[data-cy="details-item-empty"]';
 const dataSelectorInput = '[data-cy="form-input"]';
 const dataSelectorInputEmail = '[data-cy="form-email"]';
 const dataSelectorInputPassword = '[data-cy="form-password"]';
+const dataSelectorIconPaymentState =
+  '[data-cy="profile-details-payment-state-icon"]';
 const dataSelectorLabel = '[data-cy="details-item-label"]';
 const dataSelectorValue = '[data-cy="details-item-value"]';
 
@@ -50,6 +58,7 @@ describe('<ProfileDetails>', () => {
   it('has translation for all strings', () => {
     cy.testLanguageStringsInContext(
       [
+        'buttonDownloadInvoice',
         'descriptionNickname',
         'labelAddressDivision',
         'labelEmail',
@@ -64,6 +73,9 @@ describe('<ProfileDetails>', () => {
         'labelOrganization',
         'labelOrganizationType',
         'labelPackage',
+        'labelPaymentStateNotPaid',
+        'labelPaymentStatePaid',
+        'labelPaymentStatePaidByCompany',
         'labelSize',
         'labelState',
         'labelTeam',
@@ -73,6 +85,7 @@ describe('<ProfileDetails>', () => {
         'titleUpdateEmail',
         'titleUpdateGender',
         'titleUpdateNickname',
+        'titleRegistrationDetails',
       ],
       'profile',
       i18n,
@@ -457,4 +470,54 @@ function coreTests() {
       cy.dataCy(selectorFormGender).find(dataSelectorButtonSave).click();
     });
   });
+
+  it('renders registration details section', () => {
+    cy.fixture('formPersonalDetails').then((formPersonalDetails) => {
+      // title
+      cy.dataCy(selectorTitleRegistrationDetails)
+        .should('be.visible')
+        .and('have.css', 'font-size', '20px')
+        .and('have.css', 'font-weight', '500')
+        .and('have.color', grey10)
+        .and('contain', i18n.global.t('profile.titleRegistrationDetails'));
+      // payment state
+      cy.dataCy(selectorPaymentState)
+        .find(dataSelectorLabel)
+        .should('be.visible');
+      if (formPersonalDetails.paymentState === PaymentState.paid) {
+        cy.dataCy(selectorPaymentState)
+          .find(dataSelectorValue)
+          .should('contain', i18n.global.t('profile.labelPaymentStatePaid'));
+        cy.dataCy(selectorPaymentState)
+          .find(dataSelectorIconPaymentState)
+          .should('be.visible')
+          .and('have.color', green);
+      } else if (
+        formPersonalDetails.paymentState === PaymentState.paidByCompany
+      ) {
+        cy.dataCy(selectorPaymentState)
+          .find(dataSelectorValue)
+          .should(
+            'contain',
+            i18n.global.t('profile.labelPaymentStatePaidByCompany'),
+          );
+        cy.dataCy(selectorPaymentState)
+          .find(dataSelectorIconPaymentState)
+          .should('be.visible')
+          .and('have.color', green);
+      } else {
+        cy.dataCy(selectorPaymentState)
+          .find(dataSelectorValue)
+          .should('contain', i18n.global.t('profile.labelPaymentStateNotPaid'));
+        cy.dataCy(selectorPaymentState)
+          .find(dataSelectorIconPaymentState)
+          .should('be.visible')
+          .and('have.color', red);
+      }
+      // download invoice button
+      cy.dataCy(selectorDownloadInvoice)
+        .should('be.visible')
+        .and('contain', i18n.global.t('profile.buttonDownloadInvoice'));
+    });
+  });
 }
diff --git a/src/components/profile/ProfileDetails.vue b/src/components/profile/ProfileDetails.vue
@@ -21,7 +21,7 @@
  */
 
 // libraries
-import { defineComponent, reactive } from 'vue';
+import { computed, defineComponent, reactive } from 'vue';
 
 // components
 import AddressDisplay from '../global/AddressDisplay.vue';
@@ -31,6 +31,12 @@ import FormUpdateGender from '../form/FormUpdateGender.vue';
 import FormUpdateNickname from '../form/FormUpdateNickname.vue';
 import LanguageSwitcher from '../global/LanguageSwitcher.vue';
 
+// composables
+import { i18n } from '../../boot/i18n';
+
+// enums
+import { PaymentState } from '../types/Profile';
+
 // fixtures
 import formPersonalDetails from '../../../test/cypress/fixtures/formPersonalDetails.json';
 
@@ -48,10 +54,48 @@ export default defineComponent({
     LanguageSwitcher,
   },
   setup() {
+    const iconSize = '18px';
+
     const profile: Profile = reactive(formPersonalDetails as Profile);
 
+    const labelPaymentState = computed(() => {
+      switch (profile.paymentState) {
+        case PaymentState.paidByOrganization:
+          return i18n.global.t('profile.labelPaymentStatePaidByCompany');
+        case PaymentState.paid:
+          return i18n.global.t('profile.labelPaymentStatePaid');
+        default:
+          return i18n.global.t('profile.labelPaymentStateNotPaid');
+      }
+    });
+
+    const iconPaymentColor = computed(() => {
+      return [PaymentState.paid, PaymentState.paidByOrganization].includes(
+        profile.paymentState,
+      )
+        ? 'green'
+        : 'red';
+    });
+
+    const iconPaymentState = computed(() => {
+      return [PaymentState.paid, PaymentState.paidByOrganization].includes(
+        profile.paymentState,
+      )
+        ? 'mdi-check-circle-outline'
+        : 'mdi-close-circle-outline';
+    });
+
+    const onDownloadInvoice = () => {
+      // TODO: Implement download invoice
+    };
+
     return {
+      iconPaymentColor,
+      iconPaymentState,
+      iconSize,
+      labelPaymentState,
       profile,
+      onDownloadInvoice,
     };
   },
 });
@@ -155,7 +199,6 @@ export default defineComponent({
     >
       {{ $t('profile.titleChallengeDetails') }}
     </h2>
-
     <!-- Challenge details -->
     <div class="q-mt-lg">
       <div class="row q-col-gutter-lg">
@@ -200,7 +243,6 @@ export default defineComponent({
     >
       {{ $t('profile.titleStarterPackage') }}
     </h2>
-
     <!-- Starter package -->
     <div class="q-mt-lg">
       <div class="row q-col-gutter-lg">
@@ -260,5 +302,56 @@ export default defineComponent({
         />
       </div>
     </div>
+
+    <!-- Title -->
+    <h2
+      class="text-h6 text-grey-10 q-mb-none q-mt-xl"
+      data-cy="profile-title-registration-details"
+    >
+      {{ $t('profile.titleRegistrationDetails') }}
+    </h2>
+    <!-- Registration details -->
+    <div class="q-mt-lg">
+      <div class="row q-col-gutter-lg">
+        <!-- Package -->
+        <details-item
+          :label="$t('profile.labelPaymentState')"
+          :value="profile.package.title"
+          class="col-12 col-md-6 items-center"
+          data-cy="profile-details-payment-state"
+        >
+          <template #value>
+            <div class="row q-col-gutter-md justify-between">
+              <div class="col-12 col-sm-auto flex items-center gap-8">
+                <q-icon
+                  :name="iconPaymentState"
+                  :size="iconSize"
+                  :color="iconPaymentColor"
+                  data-cy="profile-details-payment-state-icon"
+                />
+                <span>{{ labelPaymentState }}</span>
+              </div>
+            </div>
+          </template>
+        </details-item>
+        <div class="col-12 col-md-6">
+          <q-btn
+            unelevated
+            rounded
+            outline
+            color="primary"
+            data-cy="profile-details-download-invoice"
+          >
+            <q-icon
+              name="mdi-download"
+              :size="iconSize"
+              class="q-mr-sm"
+              @click="onDownloadInvoice"
+            />
+            {{ $t('profile.buttonDownloadInvoice') }}
+          </q-btn>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
diff --git a/src/components/types/Profile.ts b/src/components/types/Profile.ts
@@ -10,6 +10,12 @@ export enum Gender {
   female = 'female',
 }
 
+export enum PaymentState {
+  paidByOrganization = 'paidByOrganization',
+  paid = 'paid',
+  notPaid = 'notPaid',
+}
+
 export interface Profile {
   nickname: string;
   firstName: string;
@@ -33,4 +39,5 @@ export interface Profile {
     trackingUrl: string;
   };
   deliveryAddress: FormCompanyAddressFields;
+  paymentState: PaymentState;
 }
diff --git a/src/i18n/cs.toml b/src/i18n/cs.toml
@@ -454,6 +454,7 @@ titleStep1 = "Jsme rádi, že s námi jdete do výzvy!"
 titleStep2 = "Přizvěte své blízké do výzvy"
 
 [profile]
+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:"
 labelDeliveryAddress = "Doručovací adresa:"
@@ -469,6 +470,10 @@ labelNoValue = "Nevyplněno"
 labelOrganization = "Organizace:"
 labelOrganizationType = "Typ organizace:"
 labelPackage = "Vybraný balíček:"
+labelPaymentState = "Stav platby:"
+labelPaymentStateNotPaid = "Nezaplaceno"
+labelPaymentStatePaid = "Zaplaceno vámi"
+labelPaymentStatePaidByCompany = "Zaplaceno vaší organizací"
 labelPhone = "Telefonní číslo:"
 labelSize = "Velikost:"
 labelState = "Stav startovního balíčku:"
@@ -481,11 +486,13 @@ tabNotifications = "Historie notifikací"
 textPasswordConfirm = "Změnu e-mailu je potřeba potvrdit heslem do Do práce na kole:"
 titleChallengeDetails = "Soutěžní údaje"
 titlePersonalDetails = "Osobní údaje"
+titleRegistrationDetails = "Registrace"
 titleStarterPackage = "Soutěžní balíček"
 titleUpdateEmail = "Upravit e-mail"
 titleUpdateGender = "Upravit výkonnostní kategorii"
 titleUpdateNickname = "Upravit přezdívku"
 
+
 [register.form]
 titleRegister = "Registrace"
 labelEmail = "E-mail"

diff --git a/src/i18n/en.toml b/src/i18n/en.toml
@@ -451,6 +451,7 @@ titleStep1 = "We're glad you're taking the challenge with us!"
 titleStep2 = "Invite your loved ones to the challenge"
 
 [profile]
+buttonDownloadInvoice = "Download payment confirmation"
 descriptionNickname = "Appears in public results instead of your name"
 labelAddressDivision = "Address / Division:"
 labelDeliveryAddress = "Delivery address:"
@@ -466,6 +467,10 @@ labelNoValue = "N/A"
 labelOrganization = "Organization:"
 labelOrganizationType = "Organization type:"
 labelPackage = "Selected package:"
+labelPaymentState = "Payment state:"
+labelPaymentStateNotPaid = "Not paid"
+labelPaymentStatePaid = "Paid by you"
+labelPaymentStatePaidByCompany = "Paid by your organization"
 labelPhone = "Phone number:"
 labelSize = "Size:"
 labelState = "Package state:"
@@ -478,6 +483,7 @@ tabNotifications = "Notification history"
 textPasswordConfirm = "You need to confirm the email change with the password to Ride to Work by Bike:"
 titleChallengeDetails = "Competition Details"
 titlePersonalDetails = "Personal Details"
+titleRegistrationDetails = "Registration"
 titleStarterPackage = "Starter Package"
 titleUpdateEmail = "Edit e-mail"
 titleUpdateGender = "Edit performance category"

diff --git a/src/i18n/sk.toml b/src/i18n/sk.toml
@@ -451,6 +451,7 @@ titleStep1 = "Sme radi, že ste prijali túto výzvu spolu s nami!"
 titleStep2 = "Pozvite na výzvu svojich blízkych"
 
 [profile]
+buttonDownloadInvoice = "Stiahnutie potvrzenia o platbe"
 descriptionNickname = "Zobrazuje sa vo verejných výsledkoch namiesto vášho mena"
 labelAddressDivision = "Adresa / pobočka:"
 labelDeliveryAddress = "Dodacia adresa:"
@@ -466,6 +467,10 @@ labelNoValue = "Nevyplnené"
 labelOrganization = "Organizácia:"
 labelOrganizationType = "Typ organizácie:"
 labelPackage = "Vybraný balíček:"
+labelPaymentState = "Stav platby:"
+labelPaymentStateNotPaid = "Nezaplatené"
+labelPaymentStatePaid = "Zaplatené vámi"
+labelPaymentStatePaidByCompany = "Zaplatené vašou organizáciou"
 labelPhone = "Telefónne číslo:"
 labelSize = "Veľkosť:"
 labelState = "Stav štartovacieho balíka:"
@@ -478,6 +483,7 @@ tabNotifications = "História oznámení"
 textPasswordConfirm = "Musíte potvrdiť zmenu e-mailu s heslom do aplikácie Do práce na bicykli:"
 titleChallengeDetails = "Súťažné údaje"
 titlePersonalDetails = "Osobné údaje"
+titleRegistrationDetails = "Registrácia"
 titleStarterPackage = "Súťažný balíček"
 titleUpdateEmail = "Upraviť e-mail"
 titleUpdateGender = "Upraviť kategóriu výkonu"

diff --git a/test/cypress/fixtures/formPersonalDetails.json b/test/cypress/fixtures/formPersonalDetails.json
@@ -34,5 +34,6 @@
     "zip": "164 00",
     "cityChallenge": "Praha",
     "department": "Testovací firma"
-  }
+  },
+  "paymentState": "paid"
 }