src/components: add specific coordinator label for form field company (…

…#781) * update labels for company selection in payment * add tests for form field company * use label prop for passing overriding value to FormFieldCompany * rc/components/register: fix const name * src/components/__tests__: fix FormRegisterCoordinator component tests comments text --------- Co-authored-by: Šimon Macek <simon.macek@proficio.cz> Co-authored-by: Tomas Zigo <tomas.zigo@slovanet.sk>
auto-mat · Dec 15, 2024 · a76dc2c · a76dc2c
1 parent c6f8e13
commit a76dc2c
Show file tree

Hide file tree

Showing 8 changed files with 147 additions and 32 deletions.
diff --git a/src/components/__tests__/FormFieldCompany.cy.js b/src/components/__tests__/FormFieldCompany.cy.js
@@ -219,30 +219,30 @@ describe('<FormFieldCompany>', () => {
       );
     });
   });
-});
 
-context('mobile', () => {
-  beforeEach(() => {
-    interceptOrganizationsApi(
-      rideToWorkByBikeConfig,
-      i18n,
-      OrganizationType.company,
-    );
-    // reset model value
-    model.value = '';
-    // mount component
-    cy.mount(FormFieldCompany, {
-      props: {
-        ...vModelAdapter(model),
-        organizationType: OrganizationType.company,
-      },
+  context('mobile', () => {
+    beforeEach(() => {
+      interceptOrganizationsApi(
+        rideToWorkByBikeConfig,
+        i18n,
+        OrganizationType.company,
+      );
+      // reset model value
+      model.value = '';
+      // mount component
+      cy.mount(FormFieldCompany, {
+        props: {
+          ...vModelAdapter(model),
+          organizationType: OrganizationType.company,
+        },
+      });
+      cy.viewport('iphone-6');
     });
-    cy.viewport('iphone-6');
-  });
 
-  it('renders input and button in a stacked layout', () => {
-    cy.testElementPercentageWidth(cy.dataCy('col-input'), 100);
-    cy.testElementPercentageWidth(cy.dataCy('col-button'), 100);
+    it('renders input and button in a stacked layout', () => {
+      cy.testElementPercentageWidth(cy.dataCy('col-input'), 100);
+      cy.testElementPercentageWidth(cy.dataCy('col-button'), 100);
+    });
   });
 
   context('organization type - company', () => {
@@ -385,4 +385,52 @@ context('mobile', () => {
       ).should('be.visible');
     });
   });
+
+  context('custom label', () => {
+    beforeEach(() => {
+      interceptOrganizationsApi(rideToWorkByBikeConfig, i18n);
+      // reset model value
+      model.value = '';
+      // mount component
+      cy.mount(FormFieldCompany, {
+        props: {
+          ...vModelAdapter(model),
+          organizationType: OrganizationType.company,
+          label: i18n.global.t('form.labelCompanyForCoordinator'),
+        },
+      });
+      cy.viewport('macbook-16');
+    });
+
+    it('renders correct labels', () => {
+      // input label
+      cy.dataCy('form-field-company-label')
+        .should('be.visible')
+        .and('contain', i18n.global.t('form.labelCompanyForCoordinator'));
+      // dialog title
+      cy.dataCy('button-add-company').click();
+      cy.dataCy('dialog-add-company')
+        .find('h3')
+        .should('be.visible')
+        .and('contain', i18n.global.t('form.company.titleAddCompany'));
+      // dialog button
+      cy.dataCy('dialog-button-submit')
+        .should('be.visible')
+        .and('have.text', i18n.global.t('form.company.buttonAddCompany'));
+      cy.dataCy('dialog-button-cancel').should('be.visible').click();
+      // empty state message
+      cy.dataCy('form-company-input').closest('input').type(noResultsQuery);
+      // empty state message
+      cy.contains(i18n.global.t('form.messageNoCompany')).should('be.visible');
+      // simulate escape key
+      cy.dataCy('form-company-input').closest('input').type('{esc}');
+      cy.focused().blur();
+      // validation message
+      cy.contains(
+        i18n.global.t('form.messageFieldRequired', {
+          fieldName: i18n.global.t('form.labelCompanyShort'),
+        }),
+      ).should('be.visible');
+    });
+  });
 });
diff --git a/src/components/__tests__/FormRegisterCoordinator.cy.js b/src/components/__tests__/FormRegisterCoordinator.cy.js
@@ -125,13 +125,47 @@ describe('<FormRegisterCoordinator>', () => {
     it('renders company field', () => {
       // input label
       cy.dataCy('form-register-coordinator-company').should('be.visible');
+      cy.dataCy('form-register-coordinator-company').should(
+        'contain',
+        i18n.global.t('form.labelCompanyForCoordinator'),
+      );
     });
 
     it('renders job title field', () => {
       // input label
       cy.dataCy('form-register-coordinator-job-title').should('be.visible');
     });
 
+    it('renders correct company field label based on organization type', () => {
+      // select organization type
+      cy.dataCy('form-organization-type').within(() => {
+        cy.contains(i18n.global.t('form.labelCompanyShort')).click();
+      });
+      // organization field label
+      cy.dataCy('form-register-coordinator-company').should(
+        'contain',
+        i18n.global.t('form.labelCompanyForCoordinator'),
+      );
+      // select school organization type
+      cy.dataCy('form-organization-type').within(() => {
+        cy.contains(i18n.global.t('form.labelSchoolShort')).click();
+      });
+      // organization field label
+      cy.dataCy('form-register-coordinator-company').should(
+        'contain',
+        i18n.global.t('form.labelSchoolForCoordinator'),
+      );
+      // select family organization type
+      cy.dataCy('form-organization-type').within(() => {
+        cy.contains(i18n.global.t('form.labelFamilyShort')).click();
+      });
+      // organization field label
+      cy.dataCy('form-register-coordinator-company').should(
+        'contain',
+        i18n.global.t('form.labelFamilyForCoordinator'),
+      );
+    });
+
     it('renders phone field', () => {
       // input label
       cy.dataCy('form-register-coordinator-phone')

diff --git a/src/components/__tests__/RegisterChallengePayment.cy.js b/src/components/__tests__/RegisterChallengePayment.cy.js
@@ -367,7 +367,7 @@ function coreTests() {
       .click();
     // amount options are hidden
     cy.dataCy(selectorPaymentAmount).should('not.exist');
-    // company select is shown
+    // organization select is shown
     cy.dataCy(selectorCompany).should('be.visible');
     cy.dataCy(selectorCompanyLabel)
       .should('be.visible')
@@ -448,8 +448,15 @@ function coreTests() {
       .click();
     // amount options are hidden
     cy.dataCy(selectorPaymentAmount).should('not.exist');
-    // company select is shown
+    // organization select is shown
     cy.dataCy(selectorCompany).should('be.visible');
+    // label school
+    cy.dataCy(selectorCompanyLabel)
+      .should('be.visible')
+      .and('have.css', 'font-size', '12px')
+      .and('have.css', 'font-weight', '700')
+      .and('have.color', grey10)
+      .and('contain', i18n.global.t('form.labelSchool'));
 
     // user still has option to add donation
     testDonation();

diff --git a/src/components/register/FormRegisterCoordinator.vue b/src/components/register/FormRegisterCoordinator.vue
@@ -33,6 +33,7 @@ import FormFieldNewsletter from '../form/FormFieldNewsletter.vue';
 
 // composables
 import { i18n } from '../../boot/i18n';
+import { useOrganizations } from 'src/composables/useOrganizations';
 
 // enums
 import { OrganizationType } from '../types/Organization';
@@ -88,6 +89,14 @@ export default defineComponent({
       ];
     });
 
+    const { getOrganizationLabels } = useOrganizations();
+    const organizationType = computed<OrganizationType>(
+      () => formRegisterCoordinator.organizationType,
+    );
+    const fieldOrganizationLabel = computed<string>(
+      () => getOrganizationLabels(organizationType.value).labelForCoordinator,
+    );
+
     const onSubmit = async (): Promise<void> => {
       // build payload
       const payload: RegisterCoordinatorRequest = {
@@ -113,6 +122,7 @@ export default defineComponent({
     };
 
     return {
+      fieldOrganizationLabel,
       formRegisterCoordinator,
       optionsOrganizationType,
       onReset,
@@ -176,12 +186,14 @@ export default defineComponent({
               :options="optionsOrganizationType"
               color="primary"
               class="q-mt-sm q-gutter-x-lg"
+              data-cy="form-organization-type"
             />
           </div>
           <!-- Input: organization ID -->
           <form-field-company
             v-model="formRegisterCoordinator.organizationId"
             :organization-type="formRegisterCoordinator.organizationType"
+            :label="fieldOrganizationLabel"
             class="col-12"
             data-cy="form-register-coordinator-company"
           />

diff --git a/src/composables/useOrganizations.ts b/src/composables/useOrganizations.ts
@@ -8,6 +8,7 @@ import { OrganizationType } from '../components/types/Organization';
 export type OrganizationLabels = {
   titleDialog: string;
   label: string;
+  labelForCoordinator: string;
   labelName: string;
   labelShort: string;
   messageNoResult: string;
@@ -23,6 +24,7 @@ export const useOrganizations = () => {
         return {
           titleDialog: i18n.global.t('form.company.titleAddCompany'),
           label: i18n.global.t('form.labelCompany'), // used in register coordinator form
+          labelForCoordinator: i18n.global.t('form.labelCompanyForCoordinator'),
           labelName: i18n.global.t('form.company.labelCompany'), // used in SelectTable
           labelShort: i18n.global.t('form.labelCompanyShort'), // used in "add new" dialog
           messageNoResult: i18n.global.t('form.messageNoCompany'),
@@ -32,6 +34,7 @@ export const useOrganizations = () => {
         return {
           titleDialog: i18n.global.t('form.company.titleAddSchool'),
           label: i18n.global.t('form.labelSchool'), // used in register coordinator form
+          labelForCoordinator: i18n.global.t('form.labelSchoolForCoordinator'),
           labelName: i18n.global.t('form.company.labelSchool'), // used in SelectTable
           labelShort: i18n.global.t('form.labelSchoolShort'), // used in "add new" dialog
           messageNoResult: i18n.global.t('form.messageNoSchool'),
@@ -41,6 +44,7 @@ export const useOrganizations = () => {
         return {
           titleDialog: i18n.global.t('form.company.titleAddFamily'),
           label: i18n.global.t('form.labelFamily'), // used in register coordinator form
+          labelForCoordinator: i18n.global.t('form.labelFamilyForCoordinator'),
           labelName: i18n.global.t('form.company.labelFamily'), // used in SelectTable
           labelShort: i18n.global.t('form.labelFamilyShort'), // used in "add new" dialog
           messageNoResult: i18n.global.t('form.messageNoFamily'),
@@ -50,6 +54,7 @@ export const useOrganizations = () => {
         return {
           titleDialog: '',
           label: '',
+          labelForCoordinator: '',
           labelName: '',
           labelShort: '',
           messageNoResult: '',

diff --git a/src/i18n/cs.toml b/src/i18n/cs.toml
@@ -216,9 +216,12 @@ labelChallengeType = "Typ výzvy"
 labelChallengeTypePerformance = "Výkonnostní"
 labelChallengeTypeRegularity = "Pravidelnostní"
 labelCity = "Město"
-labelCompany = "Firma, pro kterou chcete být koordinátorem"
-labelSchool = "Škola, pro kterou chcete být koordinátorem"
-labelFamily = "Rodina, pro kterou chcete být koordinátorem"
+labelCompany = "Název firmy"
+labelCompanyForCoordinator = "Firma, pro kterou chcete být koordinátorem"
+labelSchool = "Název školy"
+labelSchoolForCoordinator = "Škola, pro kterou chcete být koordinátorem"
+labelFamily = "Název rodiny"
+labelFamilyForCoordinator = "Rodina, pro kterou chcete být koordinátorem"
 labelCompanyShort = "Firma"
 labelConfirmBillingDetails = "Potvrzuji, že fakturační údaje výše jsou správné"
 labelCoordinatorResponsibility = "Zajistím, aby společnost uhradila startovné nebo část startovného za náš zaměstnanecký tým nebo týmy."

diff --git a/src/i18n/en.toml b/src/i18n/en.toml
@@ -215,9 +215,12 @@ labelChallengeType = "Challenge type"
 labelChallengeTypePerformance = "Performance"
 labelChallengeTypeRegularity = "Regularity"
 labelCity = "City"
-labelCompany = "The company you want to be a coordinator for"
-labelSchool = "The school you want to be a coordinator for"
-labelFamily = "The family you want to be a coordinator for"
+labelCompany = "Company name"
+labelCompanyForCoordinator = "The company you want to be a coordinator for"
+labelSchool = "School name"
+labelSchoolForCoordinator = "The school you want to be a coordinator for"
+labelFamily = "Family name"
+labelFamilyForCoordinator = "The family you want to be a coordinator for"
 labelCompanyShort = "Company"
 labelConfirmBillingDetails = "I confirm that the billing information above is correct"
 labelCoordinatorResponsibility = "I will arrange for the company to pay all or part of the entry fee for our employee team(s)."

diff --git a/src/i18n/sk.toml b/src/i18n/sk.toml
@@ -215,9 +215,12 @@ labelChallengeType = "Typ výzvy"
 labelChallengeTypePerformance = "Výkon"
 labelChallengeTypeRegularity = "Pravidelnosť"
 labelCity = "Mesto"
-labelCompany = "Spoločnosť, pre ktorú chcete byť koordinátorom"
-labelSchool = "Škola, pre ktorú chcete byť koordinátorom"
-labelFamily = "Rodina, pre ktorú chcete byť koordinátorom"
+labelCompany = "Názov spoločnosti"
+labelCompanyForCoordinator = "Spoločnosť, pre ktorú chcete byť koordinátorom"
+labelSchool = "Názov školy"
+labelSchoolForCoordinator = "Škola, pre ktorú chcete byť koordinátorom"
+labelFamily = "Názov rodiny"
+labelFamilyForCoordinator = "Rodina, pre ktorú chcete byť koordinátorom"
 labelCompanyShort = "Spoločnosť"
 labelConfirmBillingDetails = "Potvrdzujem, že uvedené fakturačné údaje sú správne"
 labelCoordinatorResponsibility = "Zabezpečím, aby spoločnosť zaplatila štartovné alebo časť štartovného za tím(y) našich zamestnancov."