diff --git a/src/components/__tests__/ProfileDetails.cy.js b/src/components/__tests__/ProfileDetails.cy.js index 07b050f64..19c69d16e 100644 --- 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('', () => { it('has translation for all strings', () => { cy.testLanguageStringsInContext( [ + 'buttonDownloadInvoice', 'descriptionNickname', 'labelAddressDivision', 'labelEmail', @@ -64,6 +73,9 @@ describe('', () => { 'labelOrganization', 'labelOrganizationType', 'labelPackage', + 'labelPaymentStateNotPaid', + 'labelPaymentStatePaid', + 'labelPaymentStatePaidByCompany', 'labelSize', 'labelState', 'labelTeam', @@ -73,6 +85,7 @@ describe('', () => { '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 index d7d2cdf81..a107f6e53 100644 --- 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') }} -
@@ -200,7 +243,6 @@ export default defineComponent({ > {{ $t('profile.titleStarterPackage') }} -
@@ -260,5 +302,56 @@ export default defineComponent({ />
+ + +

+ {{ $t('profile.titleRegistrationDetails') }} +

+ +
+
+ + + + +
+ + + {{ $t('profile.buttonDownloadInvoice') }} + +
+
+
diff --git a/src/components/types/Profile.ts b/src/components/types/Profile.ts index 7d51b6e03..6322bf842 100644 --- 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 index c7103619d..1cd7fc4a4 100755 --- 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 index c2db7ed6e..fc96c55c7 100755 --- 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 index e03f84c90..ce3d3b5d1 100755 --- 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 index 4dcc45b07..6ce6610d4 100644 --- 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" }