Merge pull request #643 from wmde/C24_WMDE_Mobile_DE_11

C24_WMDE_Mobile_DE_11

banners/mobile/C24_WMDE_Mobile_DE_11/MainDonationForm_changesAmountOptions.vue

@@ -0,0 +1,133 @@
+<template>
+	<form
+		method="post"
+		class="wmde-banner-sub-form wmde-banner-sub-form-donation"
+		@submit.prevent="validate"
+	>
+		<fieldset class="wmde-banner-form-field-group">
+			<legend class="wmde-banner-form-field-group-legend">{{ $translate( 'intervals-header' ) }}</legend>
+			<SelectGroup
+				:field-name="'select-interval'"
+				:selectionItems="formItems.intervals"
+				:isValid="isValidOrUnset( intervalValidity )"
+				:errorMessage="$translate( 'no-interval-message' )"
+				v-model:inputValue="interval"
+				:disabledOptions="disabledIntervals"
+			/>
+		</fieldset>
+
+		<fieldset class="wmde-banner-form-field-group">
+			<legend class="wmde-banner-form-field-group-legend">{{ $translate( 'amounts-header' ) }}</legend>
+			<SelectGroup
+				fieldName="select-amount"
+				:selectionItems="amountsForFormItems"
+				:isValid="isValidOrUnset( amountValidity )"
+				:errorMessage="$translate( amountValidityMessageKey( amountValidity ) )"
+				v-model:inputValue="selectedAmount"
+			>
+				<SelectCustomAmount
+					fieldName="select-amount"
+					v-model:inputValue="customAmount"
+					@focus="clearSelectedAmount"
+					@blur="formatCustomAmount"
+					:placeholder="$translate( customAmountPlaceholderKey )"
+				/>
+			</SelectGroup>
+		</fieldset>
+
+		<fieldset class="wmde-banner-form-field-group">
+			<legend class="wmde-banner-form-field-group-legend">{{ $translate( 'payments-header' ) }}</legend>
+			<SelectGroup
+				:field-name="'select-payment-method'"
+				:selectionItems="formItems.paymentMethods"
+				:isValid="isValidOrUnset( paymentMethodValidity )"
+				:errorMessage="$translate( 'no-payment-type-message' )"
+				v-model:inputValue="paymentMethod"
+				:disabledOptions="disabledPaymentMethods"
+			>
+				<template #select-group-label="{ label, slotName }: any">
+					<slot :name="'label-' + slotName" :label="label"/>
+				</template>
+				<SmsBox>
+					<template #sms-icon>
+						<slot name="sms-icon"/>
+					</template>
+				</SmsBox>
+			</SelectGroup>
+		</fieldset>
+
+		<div class="wmde-banner-form-button-container">
+			<slot name="button">
+				<MainDonationFormButtonMultiStep/>
+			</slot>
+			<button v-if="!isFormValid && showErrorScrollLink" class="wmde-banner-form-button-error">
+				{{ $translate( 'global-error' ) }}
+			</button>
+		</div>
+	</form>
+</template>
+
+<script lang="ts">
+// All form components must have names
+export default {
+	name: 'MainDonationFormChangesAmountOptions'
+};
+</script>
+<script setup lang="ts">
+
+import { inject, ref } from 'vue';
+import SelectGroup from '@src/components/DonationForm/SubComponents/SelectGroup.vue';
+import { DonationFormItems } from '@src/utils/FormItemsBuilder/DonationFormItems';
+import SelectCustomAmount from '@src/components/DonationForm/SubComponents/SelectCustomAmount.vue';
+import SmsBox from '@src/components/DonationForm/SubComponents/SmsBox.vue';
+import { useFormModel } from '@src/components/composables/useFormModel';
+import { newDonationFormValidator } from '@src/validation/DonationFormValidator';
+import { amountValidityMessageKey } from '@src/utils/amountValidityMessageKey';
+import { isValidOrUnset } from '@src/components/DonationForm/Forms/isValidOrUnset';
+import { Currency } from '@src/utils/DynamicContent/formatters/Currency';
+import MainDonationFormButtonMultiStep from '@src/components/DonationForm/Forms/MainDonationFormButtonMultiStep.vue';
+import { FormItem } from '@src/utils/FormItemsBuilder/FormItem';
+
+interface Props {
+	showErrorScrollLink?: boolean;
+	customAmountPlaceholderKey?: string;
+	amountsForFormItems: FormItem[];
+}
+
+withDefaults( defineProps<Props>(), {
+	showErrorScrollLink: false,
+	customAmountPlaceholderKey: 'custom-amount-placeholder'
+} );
+const emit = defineEmits( [ 'submit' ] );
+
+const currencyFormatter = inject<Currency>( 'currencyFormatter' );
+const formItems = inject<DonationFormItems>( 'formItems' );
+const formModel = useFormModel();
+const validator = newDonationFormValidator( formModel );
+const isFormValid = ref<boolean>( true );
+
+const validate = (): void => {
+	isFormValid.value = validator.validate();
+
+	if ( isFormValid.value ) {
+		emit( 'submit' );
+	}
+};
+
+const {
+	interval, intervalValidity, disabledIntervals,
+	selectedAmount, customAmount, numericAmount, amountValidity,
+	paymentMethod, paymentMethodValidity, disabledPaymentMethods
+} = formModel;
+
+const clearSelectedAmount = (): void => {
+	selectedAmount.value = '';
+};
+
+const formatCustomAmount = (): void => {
+	if ( customAmount.value !== '' ) {
+		customAmount.value = currencyFormatter.customAmountInput( numericAmount.value );
+	}
+};
+
+</script>

banners/mobile/C24_WMDE_Mobile_DE_11/banner_ctrl.ts

@@ -0,0 +1,70 @@
+import { createVueApp } from '@src/createVueApp';
+
+import './styles/styles.scss';
+
+import BannerConductor from '@src/components/BannerConductor/BannerConductor.vue';
+import Banner from './components/BannerCtrl.vue';
+import { UrlRuntimeEnvironment } from '@src/utils/RuntimeEnvironment';
+import { WindowResizeHandler } from '@src/utils/ResizeHandler';
+import PageWPORG from '@src/page/PageWPORG';
+import { WindowMediaWiki } from '@src/page/MediaWiki/WindowMediaWiki';
+import { SkinFactory } from '@src/page/skin/SkinFactory';
+import { WindowSizeIssueChecker } from '@src/utils/SizeIssueChecker/WindowSizeIssueChecker';
+import TranslationPlugin from '@src/TranslationPlugin';
+import { Translator } from '@src/Translator';
+import DynamicTextPlugin from '@src/DynamicTextPlugin';
+import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
+import { WindowPageScroller } from '@src/utils/PageScroller/WindowPageScroller';
+import { LegacyTrackerWPORG } from '@src/tracking/LegacyTrackerWPORG';
+import eventMappings from './event_map';
+import messages from './messages';
+import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
+import { createFormItems } from './form_items';
+import { createFormActions } from '@src/createFormActions';
+import { LocalStorageCloseTracker } from '@src/utils/LocalCloseTracker';
+import { WindowTimer } from '@src/utils/Timer';
+
+const localeFactory = new LocaleFactoryDe();
+const translator = new Translator( messages );
+const mediaWiki = new WindowMediaWiki();
+const page = new PageWPORG( mediaWiki, ( new SkinFactory( mediaWiki ) ).getSkin(), new WindowSizeIssueChecker() );
+const runtimeEnvironment = new UrlRuntimeEnvironment( window.location );
+const impressionCount = new LocalImpressionCount( page.getTracking().keyword, runtimeEnvironment );
+const tracker = new LegacyTrackerWPORG( mediaWiki, page.getTracking().keyword, eventMappings, runtimeEnvironment );
+
+const currencyFormatter = localeFactory.getCurrencyFormatter();
+
+const app = createVueApp( BannerConductor, {
+	page,
+	bannerConfig: {
+		delay: runtimeEnvironment.getBannerDelay( 7500 ),
+		transitionDuration: 1000
+	},
+	bannerProps: {
+		useOfFundsContent: localeFactory.getUseOfFundsLoader().getContent(),
+		pageScroller: new WindowPageScroller(),
+		remainingImpressions: impressionCount.getRemainingImpressions( page.getMaxBannerImpressions( 'mobile' ) ),
+		localCloseTracker: new LocalStorageCloseTracker()
+	},
+	resizeHandler: new WindowResizeHandler(),
+	banner: Banner,
+	impressionCount
+} );
+
+app.use( TranslationPlugin, translator );
+app.use( DynamicTextPlugin, {
+	campaignParameters: page.getCampaignParameters(),
+	date: new Date(),
+	formatters: localeFactory.getFormatters(),
+	impressionCount,
+	translator,
+	urgencyMessageDaysLeft: 45
+} );
+
+app.provide( 'currencyFormatter', currencyFormatter );
+app.provide( 'formItems', createFormItems( translator, currencyFormatter.euroAmount.bind( currencyFormatter ) ) );
+app.provide( 'formActions', createFormActions( page.getTracking(), impressionCount ) );
+app.provide( 'tracker', tracker );
+app.provide( 'timer', new WindowTimer() );
+
+app.mount( page.getBannerContainer() );

banners/mobile/C24_WMDE_Mobile_DE_11/banner_var.ts

@@ -0,0 +1,70 @@
+import { createVueApp } from '@src/createVueApp';
+
+import './styles/styles_var.scss';
+
+import BannerConductor from '@src/components/BannerConductor/BannerConductor.vue';
+import Banner from './components/BannerVar.vue';
+import { UrlRuntimeEnvironment } from '@src/utils/RuntimeEnvironment';
+import { WindowResizeHandler } from '@src/utils/ResizeHandler';
+import PageWPORG from '@src/page/PageWPORG';
+import { WindowMediaWiki } from '@src/page/MediaWiki/WindowMediaWiki';
+import { SkinFactory } from '@src/page/skin/SkinFactory';
+import { WindowSizeIssueChecker } from '@src/utils/SizeIssueChecker/WindowSizeIssueChecker';
+import TranslationPlugin from '@src/TranslationPlugin';
+import { Translator } from '@src/Translator';
+import DynamicTextPlugin from '@src/DynamicTextPlugin';
+import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
+import { WindowPageScroller } from '@src/utils/PageScroller/WindowPageScroller';
+import { LegacyTrackerWPORG } from '@src/tracking/LegacyTrackerWPORG';
+import eventMappings from './event_map';
+import messages from './messages';
+import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
+import { createFormItems } from './form_items';
+import { createFormActions } from '@src/createFormActions';
+import { LocalStorageCloseTracker } from '@src/utils/LocalCloseTracker';
+import { WindowTimer } from '@src/utils/Timer';
+
+const localeFactory = new LocaleFactoryDe();
+const translator = new Translator( messages );
+const mediaWiki = new WindowMediaWiki();
+const page = new PageWPORG( mediaWiki, ( new SkinFactory( mediaWiki ) ).getSkin(), new WindowSizeIssueChecker() );
+const runtimeEnvironment = new UrlRuntimeEnvironment( window.location );
+const impressionCount = new LocalImpressionCount( page.getTracking().keyword, runtimeEnvironment );
+const tracker = new LegacyTrackerWPORG( mediaWiki, page.getTracking().keyword, eventMappings, runtimeEnvironment );
+
+const currencyFormatter = localeFactory.getCurrencyFormatter();
+
+const app = createVueApp( BannerConductor, {
+	page,
+	bannerConfig: {
+		delay: runtimeEnvironment.getBannerDelay( 7500 ),
+		transitionDuration: 1000
+	},
+	bannerProps: {
+		useOfFundsContent: localeFactory.getUseOfFundsLoader().getContent(),
+		pageScroller: new WindowPageScroller(),
+		remainingImpressions: impressionCount.getRemainingImpressions( page.getMaxBannerImpressions( 'mobile' ) ),
+		localCloseTracker: new LocalStorageCloseTracker()
+	},
+	resizeHandler: new WindowResizeHandler(),
+	banner: Banner,
+	impressionCount
+} );
+
+app.use( TranslationPlugin, translator );
+app.use( DynamicTextPlugin, {
+	campaignParameters: page.getCampaignParameters(),
+	date: new Date(),
+	formatters: localeFactory.getFormatters(),
+	impressionCount,
+	translator,
+	urgencyMessageDaysLeft: 45
+} );
+
+app.provide( 'currencyFormatter', currencyFormatter );
+app.provide( 'formItems', createFormItems( translator, currencyFormatter.euroAmount.bind( currencyFormatter ) ) );
+app.provide( 'formActions', createFormActions( page.getTracking(), impressionCount ) );
+app.provide( 'tracker', tracker );
+app.provide( 'timer', new WindowTimer() );
+
+app.mount( page.getBannerContainer() );