diff --git a/cypress/e2e/registration/consultingType.cy.ts b/cypress/e2e/registration/consultingType.cy.ts index 2fc5d93dc..ab77713e5 100644 --- a/cypress/e2e/registration/consultingType.cy.ts +++ b/cypress/e2e/registration/consultingType.cy.ts @@ -147,21 +147,21 @@ describe('Registration', () => { cy.get('input#postcode').type('12345', { force: true }); cy.wait('@service.agencies'); // Check if both agencies from consultingType2 are listed - cy.get('.agencySelection__proposedAgency').should( + cy.get('.agencyRadioSelect__wrapper').should( 'have.length', 2 ); // Check if one agency from consultingType1 is visible cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-11' + '.agencyRadioSelect__wrapper .radioButton__input#agency-11' ).should('exist'); // Check if external agency from consultingType1 is hidden cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-12' + '.agencyRadioSelect__wrapper .radioButton__input#agency-12' ).should('not.exist'); // Check if one agency from other consultingType is hidden cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-21' + '.agencyRadioSelect__wrapper .radioButton__input#agency-21' ).should('not.exist'); }); }); @@ -183,10 +183,13 @@ describe('Registration', () => { it('should show preselected agency', () => { // Check if both agencies from consultingType2 are listed - cy.get('.preselectedAgency__item').should('have.length', 1); + cy.get('.agencyRadioSelect__wrapper').should( + 'have.length', + 1 + ); // Check if one agency from consultingType1 is visible cy.get( - '.preselectedAgency__item .radioButton__input#11' + '.agencyRadioSelect__wrapper .radioButton__input#agency-11' ).should('exist'); }); }); @@ -208,26 +211,26 @@ describe('Registration', () => { it('should find agencies for consultingType', () => { // Check if no agency are preselected - cy.get('.preselectedAgency__item').should('not.exist'); + cy.get('.agencyRadioSelect__wrapper').should('not.exist'); // Check if search for agencies is working cy.get('input#postcode').type('12345', { force: true }); cy.wait('@service.agencies'); // Check if both agencies from consultingType2 are listed - cy.get('.agencySelection__proposedAgency').should( + cy.get('.agencyRadioSelect__wrapper').should( 'have.length', 2 ); // Check if one agency from consultingType1 is visible cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-11' + '.agencyRadioSelect__wrapper .radioButton__input#agency-11' ).should('exist'); // Check if external agency from consultingType1 is hidden cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-12' + '.agencyRadioSelect__wrapper .radioButton__input#agency-12' ).should('not.exist'); // Check if one agency from other consultingType is hidden cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-21' + '.agencyRadioSelect__wrapper .radioButton__input#agency-21' ).should('not.exist'); }); }); @@ -249,26 +252,26 @@ describe('Registration', () => { it('should find agencies for consultingType', () => { // Check if no agency are preselected - cy.get('.preselectedAgency__item').should('not.exist'); + cy.get('.agencyRadioSelect__wrapper').should('not.exist'); // Check if search for agencies is working cy.get('input#postcode').type('12345', { force: true }); cy.wait('@service.agencies'); // Check if both agencies from consultingType2 are listed - cy.get('.agencySelection__proposedAgency').should( + cy.get('.agencyRadioSelect__wrapper').should( 'have.length', 2 ); // Check if one agency from consultingType1 is visible cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-11' + '.agencyRadioSelect__wrapper .radioButton__input#agency-11' ).should('exist'); // Check if external agency from consultingType1 is hidden cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-12' + '.agencyRadioSelect__wrapper .radioButton__input#agency-12' ).should('not.exist'); // Check if one agency from other consultingType is hidden cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-21' + '.agencyRadioSelect__wrapper .radioButton__input#agency-21' ).should('not.exist'); }); }); @@ -319,10 +322,13 @@ describe('Registration', () => { it('should show preselected agency', () => { // Check if both agencies from consultingType2 are listed - cy.get('.preselectedAgency__item').should('have.length', 1); + cy.get('.agencyRadioSelect__wrapper').should( + 'have.length', + 1 + ); // Check if one agency from consultingType1 is visible cy.get( - '.preselectedAgency__item .radioButton__input#11' + '.agencyRadioSelect__wrapper .radioButton__input#agency-11' ).should('exist'); }); }); @@ -341,10 +347,13 @@ describe('Registration', () => { it('should show preselected agency', () => { // Check if both agencies from consultingType2 are listed - cy.get('.preselectedAgency__item').should('have.length', 1); + cy.get('.agencyRadioSelect__wrapper').should( + 'have.length', + 1 + ); // Check if one agency from consultingType1 is visible cy.get( - '.preselectedAgency__item .radioButton__input#11' + '.agencyRadioSelect__wrapper .radioButton__input#agency-11' ).should('exist'); }); }); @@ -363,10 +372,13 @@ describe('Registration', () => { it('should show all consultant agencies', () => { // Check if both agencies from consultingType2 are listed - cy.get('.preselectedAgency__item').should('have.length', 1); + cy.get('.agencyRadioSelect__wrapper').should( + 'have.length', + 1 + ); // Check if one agency from consultingType1 is visible cy.get( - '.preselectedAgency__item .radioButton__input#11' + '.agencyRadioSelect__wrapper .radioButton__input#agency-11' ).should('exist'); }); }); @@ -385,10 +397,13 @@ describe('Registration', () => { it('should find agencies for consultingType', () => { // Check if both agencies from consultingType2 are listed - cy.get('.preselectedAgency__item').should('have.length', 1); + cy.get('.agencyRadioSelect__wrapper').should( + 'have.length', + 1 + ); // Check if one agency from consultingType1 is visible cy.get( - '.preselectedAgency__item .radioButton__input#21' + '.agencyRadioSelect__wrapper .radioButton__input#agency-21' ).should('exist'); }); }); @@ -406,10 +421,13 @@ describe('Registration', () => { it('should find agencies for consultingType', () => { // Check if both agencies from consultingType2 are listed - cy.get('.preselectedAgency__item').should('have.length', 1); + cy.get('.agencyRadioSelect__wrapper').should( + 'have.length', + 1 + ); // Check if one agency from consultingType1 is visible cy.get( - '.preselectedAgency__item .radioButton__input#11' + '.agencyRadioSelect__wrapper .radioButton__input#agency-11' ).should('exist'); }); }); @@ -445,15 +463,15 @@ describe('Registration', () => { }); it('should show preselected agency', () => { - cy.get('.agencySelection__proposedAgency').should( + cy.get('.agencyRadioSelect__wrapper').should( 'have.length', 2 ); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-11' + '.agencyRadioSelect__wrapper .radioButton__input#agency-11' ).should('exist'); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-13' + '.agencyRadioSelect__wrapper .radioButton__input#agency-13' ).should('exist'); }); }); @@ -472,10 +490,13 @@ describe('Registration', () => { it('should show preselected agency', () => { // Check if both agencies from consultingType2 are listed - cy.get('.preselectedAgency__item').should('have.length', 1); + cy.get('.agencyRadioSelect__wrapper').should( + 'have.length', + 1 + ); // Check if one agency from consultingType1 is visible cy.get( - '.preselectedAgency__item .radioButton__input#11' + '.agencyRadioSelect__wrapper .radioButton__input#agency-11' ).should('exist'); }); }); @@ -493,15 +514,15 @@ describe('Registration', () => { }); it('should show all consultant agencies', () => { - cy.get('.agencySelection__proposedAgency').should( + cy.get('.agencyRadioSelect__wrapper').should( 'have.length', 2 ); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-11' + '.agencyRadioSelect__wrapper .radioButton__input#agency-11' ).should('exist'); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-13' + '.agencyRadioSelect__wrapper .radioButton__input#agency-13' ).should('exist'); }); }); @@ -519,15 +540,15 @@ describe('Registration', () => { }); it('should find agencies for consultingType', () => { - cy.get('.agencySelection__proposedAgency').should( + cy.get('.agencyRadioSelect__wrapper').should( 'have.length', 2 ); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-21' + '.agencyRadioSelect__wrapper .radioButton__input#agency-21' ).should('exist'); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-22' + '.agencyRadioSelect__wrapper .radioButton__input#agency-22' ).should('exist'); }); }); @@ -544,15 +565,15 @@ describe('Registration', () => { }); it('should find agencies for consultingType', () => { - cy.get('.agencySelection__proposedAgency').should( + cy.get('.agencyRadioSelect__wrapper').should( 'have.length', 2 ); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-11' + '.agencyRadioSelect__wrapper .radioButton__input#agency-11' ).should('exist'); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-13' + '.agencyRadioSelect__wrapper .radioButton__input#agency-13' ).should('exist'); }); }); @@ -586,30 +607,30 @@ describe('Registration', () => { it('should show agencies with consultingtype dropdown', () => { cy.get('#consultingTypeSelection').should('exist'); - cy.get('.agencySelection__proposedAgency').should( + cy.get('.agencyRadioSelect__wrapper').should( 'have.length', 2 ); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-11' + '.agencyRadioSelect__wrapper .radioButton__input#agency-11' ).should('exist'); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-13' + '.agencyRadioSelect__wrapper .radioButton__input#agency-13' ).should('exist'); cy.get('#consultingTypeSelection').click(); cy.get('#consultingTypeSelection .select__input__option') .eq(1) .click(); - cy.get('.agencySelection__proposedAgency').should( + cy.get('.agencyRadioSelect__wrapper').should( 'have.length', 2 ); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-21' + '.agencyRadioSelect__wrapper .radioButton__input#agency-21' ).should('exist'); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-22' + '.agencyRadioSelect__wrapper .radioButton__input#agency-22' ).should('exist'); }); }); @@ -626,15 +647,15 @@ describe('Registration', () => { }); it('should show preselected agency', () => { - cy.get('.agencySelection__proposedAgency').should( + cy.get('.agencyRadioSelect__wrapper').should( 'have.length', 2 ); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-11' + '.agencyRadioSelect__wrapper .radioButton__input#agency-11' ).should('exist'); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-13' + '.agencyRadioSelect__wrapper .radioButton__input#agency-13' ).should('exist'); }); }); @@ -654,10 +675,13 @@ describe('Registration', () => { it('should show preselected agency', () => { cy.get('#consultingTypeSelection').should('not.exist'); // Check if both agencies from consultingType2 are listed - cy.get('.preselectedAgency__item').should('have.length', 1); + cy.get('.agencyRadioSelect__wrapper').should( + 'have.length', + 1 + ); // Check if one agency from consultingType1 is visible cy.get( - '.preselectedAgency__item .radioButton__input#11' + '.agencyRadioSelect__wrapper .radioButton__input#agency-11' ).should('exist'); }); }); @@ -676,15 +700,15 @@ describe('Registration', () => { it('should show all consultant agencies', () => { cy.get('#consultingTypeSelection').should('not.exist'); - cy.get('.agencySelection__proposedAgency').should( + cy.get('.agencyRadioSelect__wrapper').should( 'have.length', 2 ); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-11' + '.agencyRadioSelect__wrapper .radioButton__input#agency-11' ).should('exist'); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-13' + '.agencyRadioSelect__wrapper .radioButton__input#agency-13' ).should('exist'); }); }); @@ -702,15 +726,15 @@ describe('Registration', () => { it('should find agencies for consultingType', () => { cy.get('#consultingTypeSelection').should('not.exist'); - cy.get('.agencySelection__proposedAgency').should( + cy.get('.agencyRadioSelect__wrapper').should( 'have.length', 2 ); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-21' + '.agencyRadioSelect__wrapper .radioButton__input#agency-21' ).should('exist'); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-22' + '.agencyRadioSelect__wrapper .radioButton__input#agency-22' ).should('exist'); }); }); @@ -728,30 +752,30 @@ describe('Registration', () => { it('should find agencies for consultingType', () => { cy.get('#consultingTypeSelection').should('exist'); - cy.get('.agencySelection__proposedAgency').should( + cy.get('.agencyRadioSelect__wrapper').should( 'have.length', 2 ); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-11' + '.agencyRadioSelect__wrapper .radioButton__input#agency-11' ).should('exist'); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-13' + '.agencyRadioSelect__wrapper .radioButton__input#agency-13' ).should('exist'); cy.get('#consultingTypeSelection').click(); cy.get('#consultingTypeSelection .select__input__option') .eq(1) .click(); - cy.get('.agencySelection__proposedAgency').should( + cy.get('.agencyRadioSelect__wrapper').should( 'have.length', 2 ); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-21' + '.agencyRadioSelect__wrapper .radioButton__input#agency-21' ).should('exist'); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-22' + '.agencyRadioSelect__wrapper .radioButton__input#agency-22' ).should('exist'); }); }); @@ -770,26 +794,23 @@ describe('Registration', () => { it('should find agencies for consultingType', () => { // Check if no agency are preselected - cy.get('.preselectedAgency__item').should('not.exist'); + cy.get('.agencyRadioSelect__wrapper').should('not.exist'); // Check if search for agencies is working cy.get('input#postcode').type('12345', { force: true }); cy.wait('@service.agencies'); // Check if both agencies from consultingType2 are listed - cy.get('.agencySelection__proposedAgency').should( - 'have.length', - 2 - ); + cy.get('.agencyRadioSelect__wrapper').should('have.length', 2); // Check if one agency from consultingType1 is visible cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-11' + '.agencyRadioSelect__wrapper .radioButton__input#agency-11' ).should('exist'); // Check if external agency from consultingType1 is hidden cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-13' + '.agencyRadioSelect__wrapper .radioButton__input#agency-13' ).should('exist'); // Check if one agency from other consultingType is hidden cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-21' + '.agencyRadioSelect__wrapper .radioButton__input#agency-21' ).should('not.exist'); }); }); @@ -812,10 +833,13 @@ describe('Registration', () => { it('should find agencies for consultingType', () => { // Check if both agencies from consultingType2 are listed - cy.get('.preselectedAgency__item').should('have.length', 1); + cy.get('.agencyRadioSelect__wrapper').should( + 'have.length', + 1 + ); // Check if one agency from consultingType1 is visible cy.get( - '.preselectedAgency__item .radioButton__input#11' + '.agencyRadioSelect__wrapper .radioButton__input#agency-11' ).should('exist'); }); }); @@ -856,10 +880,10 @@ describe('Registration', () => { 'not.exist' ); // Check if both agencies from consultingType2 are listed - cy.get('.preselectedAgency__item').should('have.length', 1); + cy.get('.agencyRadioSelect__wrapper').should('have.length', 1); // Check if one agency from consultingType1 is visible cy.get( - '.preselectedAgency__item .radioButton__input#41' + '.agencyRadioSelect__wrapper .radioButton__input#agency-41' ).should('exist'); }); }); @@ -899,10 +923,10 @@ describe('Registration', () => { 'not.exist' ); // Check if both agencies from consultingType2 are listed - cy.get('.preselectedAgency__item').should('have.length', 1); + cy.get('.agencyRadioSelect__wrapper').should('have.length', 1); // Check if one agency from consultingType1 is visible cy.get( - '.preselectedAgency__item .radioButton__input#41' + '.agencyRadioSelect__wrapper .radioButton__input#agency-41' ).should('exist'); }); }); diff --git a/cypress/e2e/registration/topic.cy.ts b/cypress/e2e/registration/topic.cy.ts index 955d21b70..b4e22d317 100644 --- a/cypress/e2e/registration/topic.cy.ts +++ b/cypress/e2e/registration/topic.cy.ts @@ -257,19 +257,19 @@ describe('Registration', () => { cy.wait('@service.agencies'); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-21' + '.agencyRadioSelect__wrapper .radioButton__input#agency-21' ).should('exist'); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-22' + '.agencyRadioSelect__wrapper .radioButton__input#agency-22' ).should('exist'); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-23' + '.agencyRadioSelect__wrapper .radioButton__input#agency-23' ).should('not.exist'); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-24' + '.agencyRadioSelect__wrapper .radioButton__input#agency-24' ).should('not.exist'); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-11' + '.agencyRadioSelect__wrapper .radioButton__input#agency-11' ).should('not.exist'); }); }); @@ -306,10 +306,10 @@ describe('Registration', () => { cy.get('.formAccordionItem').eq(3).click(); // Check if both agencies from consultingType2 are listed - cy.get('.preselectedAgency__item').should('have.length', 1); + cy.get('.agencyRadioSelect__wrapper').should('have.length', 1); // Check if one agency from consultingType1 is visible cy.get( - '.preselectedAgency__item .radioButton__input#11' + '.agencyRadioSelect__wrapper .radioButton__input#agency-11' ).should('exist'); }); }); @@ -345,9 +345,9 @@ describe('Registration', () => { ).click(); cy.get('.formAccordionItem').eq(3).click(); - cy.get('.preselectedAgency__item').should('have.length', 1); + cy.get('.agencyRadioSelect__wrapper').should('have.length', 1); cy.get( - '.preselectedAgency__item .radioButton__input#13' + '.agencyRadioSelect__wrapper .radioButton__input#agency-13' ).should('exist'); }); }); @@ -393,19 +393,19 @@ describe('Registration', () => { cy.wait('@service.agencies'); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-21' + '.agencyRadioSelect__wrapper .radioButton__input#agency-21' ).should('exist'); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-22' + '.agencyRadioSelect__wrapper .radioButton__input#agency-22' ).should('exist'); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-23' + '.agencyRadioSelect__wrapper .radioButton__input#agency-23' ).should('not.exist'); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-24' + '.agencyRadioSelect__wrapper .radioButton__input#agency-24' ).should('not.exist'); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-11' + '.agencyRadioSelect__wrapper .radioButton__input#agency-11' ).should('not.exist'); }); }); @@ -466,9 +466,12 @@ describe('Registration', () => { cy.get('.formAccordionItem').eq(3).click(); - cy.get('.preselectedAgency__item').should('have.length', 1); + cy.get('.agencyRadioSelect__wrapper').should( + 'have.length', + 1 + ); cy.get( - '.preselectedAgency__item .radioButton__input#11' + '.agencyRadioSelect__wrapper .radioButton__input#agency-11' ).should('exist'); }); }); @@ -493,9 +496,12 @@ describe('Registration', () => { cy.get('.formAccordionItem').eq(3).click(); - cy.get('.preselectedAgency__item').should('have.length', 1); + cy.get('.agencyRadioSelect__wrapper').should( + 'have.length', + 1 + ); cy.get( - '.preselectedAgency__item .radioButton__input#11' + '.agencyRadioSelect__wrapper .radioButton__input#agency-11' ).should('exist'); }); }); @@ -521,9 +527,12 @@ describe('Registration', () => { cy.get('.formAccordionItem').eq(3).click(); - cy.get('.preselectedAgency__item').should('have.length', 1); + cy.get('.agencyRadioSelect__wrapper').should( + 'have.length', + 1 + ); cy.get( - '.preselectedAgency__item .radioButton__input#11' + '.agencyRadioSelect__wrapper .radioButton__input#agency-11' ).should('exist'); }); }); @@ -559,9 +568,12 @@ describe('Registration', () => { cy.get('.formAccordionItem').eq(3).click(); - cy.get('.preselectedAgency__item').should('have.length', 1); + cy.get('.agencyRadioSelect__wrapper').should( + 'have.length', + 1 + ); cy.get( - '.preselectedAgency__item .radioButton__input#21' + '.agencyRadioSelect__wrapper .radioButton__input#agency-21' ).should('exist'); }); }); @@ -589,9 +601,12 @@ describe('Registration', () => { cy.get('.formAccordionItem').eq(3).click(); - cy.get('.preselectedAgency__item').should('have.length', 1); + cy.get('.agencyRadioSelect__wrapper').should( + 'have.length', + 1 + ); cy.get( - '.preselectedAgency__item .radioButton__input#11' + '.agencyRadioSelect__wrapper .radioButton__input#agency-11' ).should('exist'); }); }); @@ -646,13 +661,13 @@ describe('Registration', () => { cy.get('.formAccordionItem').eq(3).click(); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-21' + '.agencyRadioSelect__wrapper .radioButton__input#agency-21' ).should('exist'); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-22' + '.agencyRadioSelect__wrapper .radioButton__input#agency-22' ).should('exist'); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-11' + '.agencyRadioSelect__wrapper .radioButton__input#agency-11' ).should('not.exist'); }); }); @@ -684,9 +699,12 @@ describe('Registration', () => { cy.get('.formAccordionItem').eq(3).click(); - cy.get('.preselectedAgency__item').should('have.length', 1); + cy.get('.agencyRadioSelect__wrapper').should( + 'have.length', + 1 + ); cy.get( - '.preselectedAgency__item .radioButton__input#21' + '.agencyRadioSelect__wrapper .radioButton__input#agency-21' ).should('exist'); }); }); @@ -718,15 +736,15 @@ describe('Registration', () => { cy.get('.formAccordionItem').eq(3).click(); - cy.get('.agencySelection__proposedAgency').should( + cy.get('.agencyRadioSelect__wrapper').should( 'have.length', 2 ); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-21' + '.agencyRadioSelect__wrapper .radioButton__input#agency-21' ).should('exist'); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-22' + '.agencyRadioSelect__wrapper .radioButton__input#agency-22' ).should('exist'); }); }); @@ -761,18 +779,18 @@ describe('Registration', () => { cy.get('.formAccordionItem').eq(3).click(); - cy.get('.agencySelection__proposedAgency').should( + cy.get('.agencyRadioSelect__wrapper').should( 'have.length', 2 ); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-21' + '.agencyRadioSelect__wrapper .radioButton__input#agency-21' ).should('exist'); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-23' + '.agencyRadioSelect__wrapper .radioButton__input#agency-23' ).should('not.exist'); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-11' + '.agencyRadioSelect__wrapper .radioButton__input#agency-11' ).should('not.exist'); }); }); @@ -807,18 +825,18 @@ describe('Registration', () => { cy.get('.formAccordionItem').eq(3).click(); - cy.get('.agencySelection__proposedAgency').should( + cy.get('.agencyRadioSelect__wrapper').should( 'have.length', 2 ); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-21' + '.agencyRadioSelect__wrapper .radioButton__input#agency-21' ).should('exist'); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-23' + '.agencyRadioSelect__wrapper .radioButton__input#agency-23' ).should('not.exist'); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-11' + '.agencyRadioSelect__wrapper .radioButton__input#agency-11' ).should('not.exist'); }); }); @@ -869,21 +887,21 @@ describe('Registration', () => { cy.get('.formAccordionItem').eq(3).click(); - cy.get('.agencySelection__proposedAgency').should( + cy.get('.agencyRadioSelect__wrapper').should( 'have.length', 2 ); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-11' + '.agencyRadioSelect__wrapper .radioButton__input#agency-11' ).should('not.exist'); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-13' + '.agencyRadioSelect__wrapper .radioButton__input#agency-13' ).should('not.exist'); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-21' + '.agencyRadioSelect__wrapper .radioButton__input#agency-21' ).should('exist'); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-22' + '.agencyRadioSelect__wrapper .radioButton__input#agency-22' ).should('exist'); }); }); @@ -917,18 +935,18 @@ describe('Registration', () => { cy.get('.formAccordionItem').eq(3).click(); - cy.get('.agencySelection__proposedAgency').should( + cy.get('.agencyRadioSelect__wrapper').should( 'have.length', 2 ); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-11' + '.agencyRadioSelect__wrapper .radioButton__input#agency-11' ).should('exist'); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-13' + '.agencyRadioSelect__wrapper .radioButton__input#agency-13' ).should('exist'); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-21' + '.agencyRadioSelect__wrapper .radioButton__input#agency-21' ).should('not.exist'); }); }); @@ -959,9 +977,12 @@ describe('Registration', () => { cy.get('.formAccordionItem').eq(3).click(); - cy.get('.preselectedAgency__item').should('have.length', 1); + cy.get('.agencyRadioSelect__wrapper').should( + 'have.length', + 1 + ); cy.get( - '.preselectedAgency__item .radioButton__input#11' + '.agencyRadioSelect__wrapper .radioButton__input#agency-11' ).should('exist'); }); }); @@ -993,15 +1014,15 @@ describe('Registration', () => { cy.get('.formAccordionItem').eq(3).click(); - cy.get('.agencySelection__proposedAgency').should( + cy.get('.agencyRadioSelect__wrapper').should( 'have.length', 2 ); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-11' + '.agencyRadioSelect__wrapper .radioButton__input#agency-11' ).should('exist'); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-13' + '.agencyRadioSelect__wrapper .radioButton__input#agency-13' ).should('exist'); }); }); @@ -1032,15 +1053,15 @@ describe('Registration', () => { cy.get('.formAccordionItem').eq(3).click(); - cy.get('.agencySelection__proposedAgency').should( + cy.get('.agencyRadioSelect__wrapper').should( 'have.length', 2 ); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-11' + '.agencyRadioSelect__wrapper .radioButton__input#agency-11' ).should('exist'); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-13' + '.agencyRadioSelect__wrapper .radioButton__input#agency-13' ).should('exist'); }); }); @@ -1075,21 +1096,21 @@ describe('Registration', () => { cy.get('.formAccordionItem').eq(3).click(); - cy.get('.agencySelection__proposedAgency').should( + cy.get('.agencyRadioSelect__wrapper').should( 'have.length', 2 ); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-11' + '.agencyRadioSelect__wrapper .radioButton__input#agency-11' ).should('not.exist'); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-13' + '.agencyRadioSelect__wrapper .radioButton__input#agency-13' ).should('not.exist'); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-21' + '.agencyRadioSelect__wrapper .radioButton__input#agency-21' ).should('exist'); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-22' + '.agencyRadioSelect__wrapper .radioButton__input#agency-22' ).should('exist'); }); }); @@ -1125,15 +1146,12 @@ describe('Registration', () => { cy.get('input#postcode').type('12345', { force: true }); cy.wait('@service.agencies'); - cy.get('.agencySelection__proposedAgency').should( - 'have.length', - 2 - ); + cy.get('.agencyRadioSelect__wrapper').should('have.length', 2); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-11' + '.agencyRadioSelect__wrapper .radioButton__input#agency-11' ).should('exist'); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-13' + '.agencyRadioSelect__wrapper .radioButton__input#agency-13' ).should('exist'); }); }); @@ -1166,9 +1184,9 @@ describe('Registration', () => { cy.get('.formAccordionItem').eq(3).click(); - cy.get('.preselectedAgency__item').should('have.length', 1); + cy.get('.agencyRadioSelect__wrapper').should('have.length', 1); cy.get( - '.preselectedAgency__item .radioButton__input#11' + '.agencyRadioSelect__wrapper .radioButton__input#agency-11' ).should('exist'); }); }); @@ -1202,15 +1220,12 @@ describe('Registration', () => { cy.get('input#postcode').type('12345', { force: true }); cy.wait('@service.agencies'); - cy.get('.agencySelection__proposedAgency').should( - 'have.length', - 2 - ); + cy.get('.agencyRadioSelect__wrapper').should('have.length', 2); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-11' + '.agencyRadioSelect__wrapper .radioButton__input#agency-11' ).should('exist'); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-13' + '.agencyRadioSelect__wrapper .radioButton__input#agency-13' ).should('exist'); }); }); @@ -1252,7 +1267,7 @@ describe('Registration', () => { cy.get('input#postcode').should('not.exist'); cy.get( - '.preselectedAgency__item .radioButton__input#41' + '.agencyRadioSelect__wrapper .radioButton__input#agency-41' ).should('exist'); }); }); @@ -1283,22 +1298,19 @@ describe('Registration', () => { cy.get('input#postcode').type('12345', { force: true }); cy.wait('@service.agencies'); - cy.get('.agencySelection__proposedAgency').should( - 'have.length', - 2 - ); + cy.get('.agencyRadioSelect__wrapper').should('have.length', 2); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-11' + '.agencyRadioSelect__wrapper .radioButton__input#agency-11' ).should('exist'); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-13' + '.agencyRadioSelect__wrapper .radioButton__input#agency-13' ).should('exist'); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-12' + '.agencyRadioSelect__wrapper .radioButton__input#agency-12' ).should('not.exist'); cy.get( - '.preselectedAgency__item .radioButton__input#12' + '.agencyRadioSelect__wrapper .radioButton__input#agency-12' ).should('not.exist'); }); }); @@ -1329,22 +1341,19 @@ describe('Registration', () => { cy.get('input#postcode').type('12345', { force: true }); cy.wait('@service.agencies'); - cy.get('.agencySelection__proposedAgency').should( - 'have.length', - 2 - ); + cy.get('.agencyRadioSelect__wrapper').should('have.length', 2); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-11' + '.agencyRadioSelect__wrapper .radioButton__input#agency-11' ).should('exist'); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-13' + '.agencyRadioSelect__wrapper .radioButton__input#agency-13' ).should('exist'); cy.get( - '.agencySelection__proposedAgency .radioButton__input#agency-21' + '.agencyRadioSelect__wrapper .radioButton__input#agency-21' ).should('not.exist'); cy.get( - '.preselectedAgency__item .radioButton__input#21' + '.agencyRadioSelect__wrapper .radioButton__input#agency-21' ).should('not.exist'); }); }); diff --git a/src/components/agencySelection/AgencyLanguages.tsx b/src/components/agencyRadioSelect/AgencyLanguages.tsx similarity index 65% rename from src/components/agencySelection/AgencyLanguages.tsx rename to src/components/agencyRadioSelect/AgencyLanguages.tsx index 41f2252c0..69616a3b5 100644 --- a/src/components/agencySelection/AgencyLanguages.tsx +++ b/src/components/agencyRadioSelect/AgencyLanguages.tsx @@ -10,18 +10,16 @@ interface AgencyLanguagesProps { agencyId: number; } -export const AgencyLanguages: React.FC = ({ - agencyId -}) => { +export const AgencyLanguages = ({ agencyId }: AgencyLanguagesProps) => { const { t: translate } = useTranslation(); - const { fixed: fixedLanguages } = useContext(LanguagesContext); const settings = useAppConfig(); const [isAllShown, setIsAllShown] = useState(false); const [languages, setLanguages] = useState([...fixedLanguages]); + const languagesSelection = languages.slice(0, 2); + const difference = languages.length - languagesSelection.length; useEffect(() => { - // async wrapper const getLanguagesFromApi = async () => { const response = await apiAgencyLanguages( agencyId, @@ -46,47 +44,42 @@ export const AgencyLanguages: React.FC = ({ settings?.multitenancyWithSingleDomainEnabled ]); - const languagesSelection = languages.slice(0, 2); - const difference = languages.length - languagesSelection.length; - const mapLanguages = (isoCode) => ( {translate(`languages.${isoCode}`)} ({isoCode.toUpperCase()}) ); - if (languages.length > 0) { - return ( -
-

- {translate('registration.agencySelection.languages.info')} -

- {isAllShown || difference < 1 ? ( -
{languages.map(mapLanguages)}
- ) : ( -
- {languagesSelection.map(mapLanguages)} - { + if (!languages.length) return null; + + return ( +
+

{translate('registration.agencySelection.languages.info')}

+ {isAllShown || difference < 1 ? ( +
{languages.map(mapLanguages)}
+ ) : ( +
+ {languagesSelection.map(mapLanguages)} +
- )} -
- ); - } else { - return <>; - } + } + }} + > + {`+${difference} ${translate( + 'registration.agencySelection.languages.more' + )}`} + +
+ )} +
+ ); }; diff --git a/src/components/agencyRadioSelect/AgencyRadioSelect.tsx b/src/components/agencyRadioSelect/AgencyRadioSelect.tsx new file mode 100644 index 000000000..3673207d0 --- /dev/null +++ b/src/components/agencyRadioSelect/AgencyRadioSelect.tsx @@ -0,0 +1,79 @@ +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import './agencyRadioSelect.styles'; +import { AgencyDataInterface } from '../../globalState/interfaces'; +import { Headline } from '../headline/Headline'; +import { RadioButton } from '../radioButton/RadioButton'; +import { InfoTooltip } from '../infoTooltip/InfoTooltip'; +import { AgencyLanguages } from './AgencyLanguages'; +import clsx from 'clsx'; + +interface AgencyRadioSelectProps { + agency: AgencyDataInterface; + checkedValue: string; + showTooltipAbove?: boolean; + prefix?: string; + onChange?: (agency: AgencyDataInterface) => void; + onKeyDown?: (event: KeyboardEvent) => void; +} + +export const AgencyRadioSelect = ({ + checkedValue, + onChange, + onKeyDown, + agency, + prefix, + showTooltipAbove = false +}: AgencyRadioSelectProps) => { + const { t } = useTranslation('agencies'); + const agencyIdAsString = agency.id.toString(); + + return ( +
+ {prefix && ( + + )} +
+ onChange && onChange(agency)} + onKeyDown={(e: KeyboardEvent) => onKeyDown && onKeyDown(e)} + type="smaller" + value={agencyIdAsString} + checked={agencyIdAsString === checkedValue} + inputId={`agency-${agencyIdAsString}`} + > + {t([`agency.${agencyIdAsString}.name`, agency.name])} + + + +
+ +
+ {agency.agencyLogo && ( + {t([ + )} + +
+
+ ); +}; diff --git a/src/components/agencySelection/agencyLanguages.styles.scss b/src/components/agencyRadioSelect/agencyLanguages.styles.scss similarity index 95% rename from src/components/agencySelection/agencyLanguages.styles.scss rename to src/components/agencyRadioSelect/agencyLanguages.styles.scss index 827b69824..570c27dce 100644 --- a/src/components/agencySelection/agencyLanguages.styles.scss +++ b/src/components/agencyRadioSelect/agencyLanguages.styles.scss @@ -36,6 +36,8 @@ $input-size: 24px; color: var(--skin-color-primary-contrast-safe, $primary); text-decoration: underline; cursor: pointer; + background: none; + border: none; &:focus { outline: $focus-outline; diff --git a/src/components/agencyRadioSelect/agencyRadioSelect.styles.scss b/src/components/agencyRadioSelect/agencyRadioSelect.styles.scss new file mode 100644 index 000000000..db8b8db4b --- /dev/null +++ b/src/components/agencyRadioSelect/agencyRadioSelect.styles.scss @@ -0,0 +1,59 @@ +$infoIconSize: 16px; + +.agencyRadioSelect { + position: relative; + width: 100%; + + &__wrapper { + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 12px 0; + + .radioButton { + flex-basis: calc(100% - #{$infoIconSize + 1px}); + min-height: unset; + padding: 4px 0 4px 4px; + + &__label { + font-size: 16px; + padding-left: 16px; + } + + &__contentWrapper { + align-items: center; + } + } + + &:not(:last-of-type) { + border-bottom: 1px solid $black-10-opacity; + } + + & > .headline { + margin-left: $registration-form-margin-left; + } + } + + &__radioContainer { + display: flex; + + &--withHeadline { + margin-top: 12px; + } + } + + &__content { + display: flex; + flex-direction: row; + justify-content: flex-start; + margin-left: 44px; + } + + &__logo { + max-width: 60px; + max-height: 60px; + margin-right: 16px; + object-fit: contain; + object-position: center left; + } +} diff --git a/src/components/agencySelection/AgencySelection.tsx b/src/components/agencySelection/AgencySelection.tsx index 3c0d219a2..87c6d6092 100644 --- a/src/components/agencySelection/AgencySelection.tsx +++ b/src/components/agencySelection/AgencySelection.tsx @@ -10,15 +10,11 @@ import { InputField, InputFieldItem } from '../inputField/InputField'; import { VALID_POSTCODE_LENGTH } from './agencySelectionHelpers'; import './agencySelection.styles'; import '../profile/profile.styles'; -import { RadioButton } from '../radioButton/RadioButton'; import { Loading } from '../app/Loading'; import { Text, LABEL_TYPES } from '../text/Text'; -import { InfoTooltip } from '../infoTooltip/InfoTooltip'; -import { PreselectedAgency } from '../../containers/registration/components/PreSelectedAgency/PreselectedAgency'; import { Headline } from '../headline/Headline'; import { parsePlaceholderString } from '../../utils/parsePlaceholderString'; import { Notice } from '../notice/Notice'; -import { AgencyLanguages } from './AgencyLanguages'; import { VALIDITY_INITIAL, VALIDITY_INVALID, @@ -26,6 +22,7 @@ import { } from '../registration/registrationHelpers'; import { useTranslation } from 'react-i18next'; import { useAppConfig } from '../../hooks/useAppConfig'; +import { AgencyRadioSelect } from '../agencyRadioSelect/AgencyRadioSelect'; export interface AgencySelectionProps { consultingType: ConsultingTypeBasicInterface; @@ -307,13 +304,15 @@ export const AgencySelection = (props: AgencySelectionProps) => { + handlePostcodeInput(e)} onKeyDown={(e) => props.onKeyDown ? props.onKeyDown(e, false) : null } - > + /> + {props.agencySelectionNote && (
{ />
)} + {validPostcode() && !preselectedAgency && (

@@ -335,6 +335,7 @@ export const AgencySelection = (props: AgencySelectionProps) => { 'registration.agencySelection.title.end' )}

+
WTF
{!proposedAgencies ? ( postcodeFallbackLink ? ( { ) ) : ( proposedAgencies?.map( - (agency: AgencyDataInterface, index) => ( -
-
- - setSelectedAgency( - agency - ) - } - type="smaller" - value={agency.id.toString()} - checked={index === 0} - inputId={agency.id.toString()} - > - {translate( - [ - `agency.${agency.id}.name`, - agency.name - ], - { ns: 'agencies' } - )} - - -
- -
+ (proposedAgency: AgencyDataInterface) => ( + + setSelectedAgency( + proposedAgency + ) + } + /> ) ) )} @@ -423,10 +394,11 @@ export const AgencySelection = (props: AgencySelectionProps) => { )} {showPreselectedAgency && ( - )}
diff --git a/src/components/consultingTypeSelection/ConsultingTypeAgencySelection.tsx b/src/components/consultingTypeSelection/ConsultingTypeAgencySelection.tsx index 70d649d2e..871268fa3 100644 --- a/src/components/consultingTypeSelection/ConsultingTypeAgencySelection.tsx +++ b/src/components/consultingTypeSelection/ConsultingTypeAgencySelection.tsx @@ -3,8 +3,6 @@ import { useCallback, useContext, useEffect, useMemo, useState } from 'react'; import { AgencyDataInterface } from '../../globalState/interfaces'; import './consultingTypeAgencySelection.styles'; import '../profile/profile.styles'; -import { RadioButton } from '../radioButton/RadioButton'; -import { InfoTooltip } from '../infoTooltip/InfoTooltip'; import { VALIDITY_INVALID, VALIDITY_VALID @@ -15,18 +13,18 @@ import { SelectOption } from '../select/SelectDropdown'; import { Text } from '../text/Text'; -import { AgencyLanguages } from '../agencySelection/AgencyLanguages'; import { useTranslation } from 'react-i18next'; import { useConsultantRegistrationData } from '../../containers/registration/hooks/useConsultantRegistrationData'; import { apiGetTopicsData } from '../../api/apiGetTopicsData'; import { useTenant } from '../../globalState'; import { UrlParamsContext } from '../../globalState/provider/UrlParamsProvider'; +import { AgencyRadioSelect } from '../agencyRadioSelect/AgencyRadioSelect'; export interface ConsultingTypeAgencySelectionProps { - onChange: Function; + onChange: (agency: AgencyDataInterface) => void; onValidityChange?: Function; agency?: any; - onKeyDown?: Function; + onKeyDown?: (event: KeyboardEvent) => void; } export const ConsultingTypeAgencySelection = ({ @@ -239,68 +237,21 @@ export const ConsultingTypeAgencySelection = ({ type="standard" /> )} - - - )} - - ); -}; - -type AgencySelectionProps = { - agencies: AgencyDataInterface[]; - selectedAgency?: AgencyDataInterface; - onChange: Function; - onKeyDown?: Function; -}; - -const AgencySelection = ({ - agencies, - onChange, - selectedAgency, - onKeyDown -}: AgencySelectionProps) => { - const { t: translate } = useTranslation(['agencies']); - return ( -
- {agencies.map((agency: AgencyDataInterface) => ( -
-
- onChange(agency)} - type="default" - value={agency.id.toString()} - checked={ - selectedAgency && - agency.id === selectedAgency.id - } - inputId={agency.id.toString()} - onKeyDown={onKeyDown} - > - {translate( - [`agency.${agency.id}.name`, agency.name], - { ns: 'agencies' } +
+ {agencyOptions.map( + (agencyOption: AgencyDataInterface) => ( + + ) )} - - +
- -
- ))} + )}
); }; diff --git a/src/components/infoTooltip/infoTooltip.styles.scss b/src/components/infoTooltip/infoTooltip.styles.scss index bee6d1381..d53ce599e 100644 --- a/src/components/infoTooltip/infoTooltip.styles.scss +++ b/src/components/infoTooltip/infoTooltip.styles.scss @@ -47,7 +47,7 @@ $breakpointFlyoutPosition: 1140px; position: absolute; top: -13px; width: 20px; - right: $grid-base; + right: 14px; margin: 0 auto; border-left: 10px solid transparent; border-right: 10px solid transparent; @@ -73,14 +73,14 @@ $breakpointFlyoutPosition: 1140px; &--above { top: auto; - bottom: 32px; + bottom: 40px; right: -12px; &::before, &::after { top: auto; left: auto; - right: 8px; + right: 14px; transform: rotate(0); } diff --git a/src/containers/registration/components/AgencySelection/index.tsx b/src/containers/registration/components/AgencySelection/index.tsx deleted file mode 100644 index 5fcbc65f8..000000000 --- a/src/containers/registration/components/AgencySelection/index.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import React from 'react'; -import { useTranslation } from 'react-i18next'; -import { InfoTooltip } from '../../../../components/infoTooltip/InfoTooltip'; -import { AgencyLanguages } from '../../../../components/agencySelection/AgencyLanguages'; -import { RadioButton } from '../../../../components/radioButton/RadioButton'; -import { AgencyDataInterface } from '../../../../globalState/interfaces'; - -interface AgencySelectionArgs { - checkedValue: string; - onChange: (value: string) => void; - agency: AgencyDataInterface; -} - -export const AgencySelection = ({ - checkedValue, - onChange, - agency -}: AgencySelectionArgs) => { - const { t } = useTranslation(['common', 'consultingTypes']); - const agencyId = agency.id.toString(); - const inputId = `agency-${agency.id.toString()}`; - - return ( -
-
- onChange(agencyId)} - type="smaller" - value={agencyId} - checked={agencyId === checkedValue} - inputId={inputId} - > - {t([`agency.${agency.id}.name`, agency.name], { - ns: 'agencies' - })} - - - -
- -
- {agency.agencyLogo && ( - {t([`agency.${agency.id}.name`, - )} - -
-
- ); -}; diff --git a/src/containers/registration/components/PreSelectedAgency/PreselectedAgency.tsx b/src/containers/registration/components/PreSelectedAgency/PreselectedAgency.tsx deleted file mode 100644 index 05ada7b5b..000000000 --- a/src/containers/registration/components/PreSelectedAgency/PreselectedAgency.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import * as React from 'react'; -import { useTranslation } from 'react-i18next'; -import { AgencyDataInterface } from '../../../../globalState/interfaces'; -import { Headline } from '../../../../components/headline/Headline'; -import { RadioButton } from '../../../../components/radioButton/RadioButton'; -import { InfoTooltip } from '../../../../components/infoTooltip/InfoTooltip'; -import { AgencyLanguages } from '../../../../components/agencySelection/AgencyLanguages'; -import './preselectedAgency.styles'; - -export interface PreselectedAgencyProps { - prefix: string; - agencyData: AgencyDataInterface; - isProfileView?: boolean; - onKeyDown?: Function; -} - -export const PreselectedAgency = (props: PreselectedAgencyProps) => { - const { t: translate } = useTranslation(['agencies']); - - return ( -
- {props.prefix && ( - - )} -
-
- void 0} - onKeyDown={(e) => - props.onKeyDown ? props.onKeyDown(e) : null - } - > - {translate( - [ - `agency.${props.agencyData.id}.name`, - props.agencyData.name - ], - { ns: 'agencies' } - )} - - -
- -
-
- ); -}; diff --git a/src/containers/registration/components/PreSelectedAgency/preselectedAgency.styles.scss b/src/containers/registration/components/PreSelectedAgency/preselectedAgency.styles.scss deleted file mode 100644 index 2a89f6c49..000000000 --- a/src/containers/registration/components/PreSelectedAgency/preselectedAgency.styles.scss +++ /dev/null @@ -1,47 +0,0 @@ -$maxFormElementWidth: 320px; -$infoIconSize: 16px; - -.preselectedAgency { - margin-top: $grid-base-three; - animation: fadeIn linear 0.2s; - position: relative; - - .headline { - margin: 0 0 12px; - text-align: left; - font-weight: $font-weight-bold; - } - - &__item { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - padding: 12px 0; - - .radioButton { - min-height: unset; - &__label { - font-size: 16px; - } - - &__contentWrapper { - align-items: center; - } - } - - .agencyLanguages { - margin-left: 32px; - } - - .agencyInfo { - top: 34px; - - &--above { - top: auto; - } - } - &__container { - display: flex; - } - } -} diff --git a/src/containers/registration/components/ProposedAgencies/ProposedAgencies.tsx b/src/containers/registration/components/ProposedAgencies/ProposedAgencies.tsx index 9aa2e8e61..5e1fd2958 100644 --- a/src/containers/registration/components/ProposedAgencies/ProposedAgencies.tsx +++ b/src/containers/registration/components/ProposedAgencies/ProposedAgencies.tsx @@ -1,7 +1,6 @@ import React, { useCallback, useContext, useEffect, useState } from 'react'; import { useAgenciesForRegistration } from '../../hooks/useAgenciesForRegistration'; import { NoAgencyFound } from '../NoAgencyFound'; -import { AgencySelection } from '../AgencySelection'; import { ConsultingTypeSelection } from '../ConsultingTypeSelection'; import { PostCodeSelection } from '../PostCodeSelection'; import { ProposedAgenciesTitle } from './ProposedAgenciesTitle'; @@ -14,12 +13,13 @@ import { } from '../../../../components/registration/registrationHelpers'; import { AgencyDataInterface } from '../../../../globalState/interfaces'; import { LABEL_TYPES, Text } from '../../../../components/text/Text'; -import './proposedAgencies.styles.scss'; import { useTranslation } from 'react-i18next'; -import { PreselectedAgency } from '../PreSelectedAgency/PreselectedAgency'; import { FormAccordionData } from '../../../../components/registration/RegistrationForm'; import { UrlParamsContext } from '../../../../globalState/provider/UrlParamsProvider'; import clsx from 'clsx'; +import { AgencyRadioSelect } from '../../../../components/agencyRadioSelect/AgencyRadioSelect'; + +import './proposedAgencies.styles.scss'; interface ProposedAgenciesProps { formAccordionData: FormAccordionData; @@ -197,7 +197,6 @@ export const ProposedAgencies = ({ isPreselectedAgency={!!preSelectedAgency} /> )} - {agencySelectionNote && (
)} - {consultingTypes.length > 1 && (
)} - {isLoading && } - {!agencies?.length && (autoSelectPostcode || isPostcodeValid(formAccordionData?.postcode)) && @@ -241,17 +237,16 @@ export const ProposedAgencies = ({ consultingType={formAccordionData.consultingType} /> )} - {!isLoading && agencies.length === 1 && formAccordionData.agency && ( - )} - {!isLoading && agencies?.length > 1 && (
{agencies.map((agency) => ( - + onChange={({ id }) => handleAgencyChange( - agencies.find( - (a) => a.id.toString() === id - ) + agencies.find((a) => a.id === id) ) } /> diff --git a/src/containers/registration/components/ProposedAgencies/proposedAgencies.styles.scss b/src/containers/registration/components/ProposedAgencies/proposedAgencies.styles.scss index fb653a19d..a0453f19d 100644 --- a/src/containers/registration/components/ProposedAgencies/proposedAgencies.styles.scss +++ b/src/containers/registration/components/ProposedAgencies/proposedAgencies.styles.scss @@ -94,50 +94,6 @@ $infoIconSize: 16px; } } - &__proposedAgency { - display: flex; - flex-direction: column; - justify-content: space-between; - padding: 12px 0; - - .radioButton { - flex-basis: calc(100% - #{$infoIconSize + 1px}); - min-height: unset; - padding: 4px 0 4px 4px; - - &__label { - font-size: 16px; - } - - &__contentWrapper { - align-items: center; - } - } - - &:not(:last-of-type) { - border-bottom: 1px solid $black-10-opacity; - } - - &__container { - display: flex; - } - - &__content { - display: flex; - flex-direction: row; - justify-content: flex-start; - margin-left: 44px; - } - - &__logo { - max-width: 60px; - max-height: 60px; - margin-right: 16px; - object-fit: contain; - object-position: center left; - } - } - h5 { margin-bottom: 12px; }