Skip to content

Commit dea1082

Browse files
moiikanamoiikana
authored
Merge pull request #652 from wmde/C24_WMDE_Mobile_DE_12
C24_WMDE_Mobile_DE_12
2 parents 9e876a2 + 5098704 commit dea1082

34 files changed

+2286
-21
lines changed

‎banners/mobile/C24_WMDE_Mobile_DE_12/MainDonationForm_changesAmountOptions.vue

+133
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
<template>
2+
<form
3+
method="post"
4+
class="wmde-banner-sub-form wmde-banner-sub-form-donation"
5+
@submit.prevent="validate"
6+
>
7+
<fieldset class="wmde-banner-form-field-group">
8+
<legend class="wmde-banner-form-field-group-legend">{{ $translate( 'intervals-header' ) }}</legend>
9+
<SelectGroup
10+
:field-name="'select-interval'"
11+
:selectionItems="formItems.intervals"
12+
:isValid="isValidOrUnset( intervalValidity )"
13+
:errorMessage="$translate( 'no-interval-message' )"
14+
v-model:inputValue="interval"
15+
:disabledOptions="disabledIntervals"
16+
/>
17+
</fieldset>
18+
19+
<fieldset class="wmde-banner-form-field-group">
20+
<legend class="wmde-banner-form-field-group-legend">{{ $translate( 'amounts-header' ) }}</legend>
21+
<SelectGroup
22+
fieldName="select-amount"
23+
:selectionItems="amountsForFormItems"
24+
:isValid="isValidOrUnset( amountValidity )"
25+
:errorMessage="$translate( amountValidityMessageKey( amountValidity ) )"
26+
v-model:inputValue="selectedAmount"
27+
>
28+
<SelectCustomAmount
29+
fieldName="select-amount"
30+
v-model:inputValue="customAmount"
31+
@focus="clearSelectedAmount"
32+
@blur="formatCustomAmount"
33+
:placeholder="$translate( customAmountPlaceholderKey )"
34+
/>
35+
</SelectGroup>
36+
</fieldset>
37+
38+
<fieldset class="wmde-banner-form-field-group">
39+
<legend class="wmde-banner-form-field-group-legend">{{ $translate( 'payments-header' ) }}</legend>
40+
<SelectGroup
41+
:field-name="'select-payment-method'"
42+
:selectionItems="formItems.paymentMethods"
43+
:isValid="isValidOrUnset( paymentMethodValidity )"
44+
:errorMessage="$translate( 'no-payment-type-message' )"
45+
v-model:inputValue="paymentMethod"
46+
:disabledOptions="disabledPaymentMethods"
47+
>
48+
<template #select-group-label="{ label, slotName }: any">
49+
<slot :name="'label-' + slotName" :label="label"/>
50+
</template>
51+
<SmsBox>
52+
<template #sms-icon>
53+
<slot name="sms-icon"/>
54+
</template>
55+
</SmsBox>
56+
</SelectGroup>
57+
</fieldset>
58+
59+
<div class="wmde-banner-form-button-container">
60+
<slot name="button">
61+
<MainDonationFormButtonMultiStep/>
62+
</slot>
63+
<button v-if="!isFormValid && showErrorScrollLink" class="wmde-banner-form-button-error">
64+
{{ $translate( 'global-error' ) }}
65+
</button>
66+
</div>
67+
</form>
68+
</template>
69+
70+
<script lang="ts">
71+
// All form components must have names
72+
export default {
73+
name: 'MainDonationFormChangesAmountOptions'
74+
};
75+
</script>
76+
<script setup lang="ts">
77+
78+
import { inject, ref } from 'vue';
79+
import SelectGroup from '@src/components/DonationForm/SubComponents/SelectGroup.vue';
80+
import { DonationFormItems } from '@src/utils/FormItemsBuilder/DonationFormItems';
81+
import SelectCustomAmount from '@src/components/DonationForm/SubComponents/SelectCustomAmount.vue';
82+
import SmsBox from '@src/components/DonationForm/SubComponents/SmsBox.vue';
83+
import { useFormModel } from '@src/components/composables/useFormModel';
84+
import { newDonationFormValidator } from '@src/validation/DonationFormValidator';
85+
import { amountValidityMessageKey } from '@src/utils/amountValidityMessageKey';
86+
import { isValidOrUnset } from '@src/components/DonationForm/Forms/isValidOrUnset';
87+
import { Currency } from '@src/utils/DynamicContent/formatters/Currency';
88+
import MainDonationFormButtonMultiStep from '@src/components/DonationForm/Forms/MainDonationFormButtonMultiStep.vue';
89+
import { FormItem } from '@src/utils/FormItemsBuilder/FormItem';
90+
91+
interface Props {
92+
showErrorScrollLink?: boolean;
93+
customAmountPlaceholderKey?: string;
94+
amountsForFormItems: FormItem[];
95+
}
96+
97+
withDefaults( defineProps<Props>(), {
98+
showErrorScrollLink: false,
99+
customAmountPlaceholderKey: 'custom-amount-placeholder'
100+
} );
101+
const emit = defineEmits( [ 'submit' ] );
102+
103+
const currencyFormatter = inject<Currency>( 'currencyFormatter' );
104+
const formItems = inject<DonationFormItems>( 'formItems' );
105+
const formModel = useFormModel();
106+
const validator = newDonationFormValidator( formModel );
107+
const isFormValid = ref<boolean>( true );
108+
109+
const validate = (): void => {
110+
isFormValid.value = validator.validate();
111+
112+
if ( isFormValid.value ) {
113+
emit( 'submit' );
114+
}
115+
};
116+
117+
const {
118+
interval, intervalValidity, disabledIntervals,
119+
selectedAmount, customAmount, numericAmount, amountValidity,
120+
paymentMethod, paymentMethodValidity, disabledPaymentMethods
121+
} = formModel;
122+
123+
const clearSelectedAmount = (): void => {
124+
selectedAmount.value = '';
125+
};
126+
127+
const formatCustomAmount = (): void => {
128+
if ( customAmount.value !== '' ) {
129+
customAmount.value = currencyFormatter.customAmountInput( numericAmount.value );
130+
}
131+
};
132+
133+
</script>

‎banners/mobile/C24_WMDE_Mobile_DE_12/banner_ctrl.ts

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import { createVueApp } from '@src/createVueApp';
2+
3+
import './styles/styles.scss';
4+
5+
import BannerConductor from '@src/components/BannerConductor/BannerConductor.vue';
6+
import Banner from './components/BannerCtrl.vue';
7+
import { UrlRuntimeEnvironment } from '@src/utils/RuntimeEnvironment';
8+
import { WindowResizeHandler } from '@src/utils/ResizeHandler';
9+
import PageWPORG from '@src/page/PageWPORG';
10+
import { WindowMediaWiki } from '@src/page/MediaWiki/WindowMediaWiki';
11+
import { SkinFactory } from '@src/page/skin/SkinFactory';
12+
import { WindowSizeIssueChecker } from '@src/utils/SizeIssueChecker/WindowSizeIssueChecker';
13+
import TranslationPlugin from '@src/TranslationPlugin';
14+
import { Translator } from '@src/Translator';
15+
import DynamicTextPlugin from '@src/DynamicTextPlugin';
16+
import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
17+
import { WindowPageScroller } from '@src/utils/PageScroller/WindowPageScroller';
18+
import { LegacyTrackerWPORG } from '@src/tracking/LegacyTrackerWPORG';
19+
import eventMappings from './event_map';
20+
import messages from './messages';
21+
import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
22+
import { createFormItems } from './form_items';
23+
import { createFormActions } from '@src/createFormActions';
24+
import { LocalStorageCloseTracker } from '@src/utils/LocalCloseTracker';
25+
import { WindowTimer } from '@src/utils/Timer';
26+
27+
const localeFactory = new LocaleFactoryDe();
28+
const translator = new Translator( messages );
29+
const mediaWiki = new WindowMediaWiki();
30+
const page = new PageWPORG( mediaWiki, ( new SkinFactory( mediaWiki ) ).getSkin(), new WindowSizeIssueChecker() );
31+
const runtimeEnvironment = new UrlRuntimeEnvironment( window.location );
32+
const impressionCount = new LocalImpressionCount( page.getTracking().keyword, runtimeEnvironment );
33+
const tracker = new LegacyTrackerWPORG( mediaWiki, page.getTracking().keyword, eventMappings, runtimeEnvironment );
34+
35+
const currencyFormatter = localeFactory.getCurrencyFormatter();
36+
37+
const app = createVueApp( BannerConductor, {
38+
page,
39+
bannerConfig: {
40+
delay: runtimeEnvironment.getBannerDelay( 7500 ),
41+
transitionDuration: 1000
42+
},
43+
bannerProps: {
44+
useOfFundsContent: localeFactory.getUseOfFundsLoader().getContent(),
45+
pageScroller: new WindowPageScroller(),
46+
remainingImpressions: impressionCount.getRemainingImpressions( page.getMaxBannerImpressions( 'mobile' ) ),
47+
localCloseTracker: new LocalStorageCloseTracker()
48+
},
49+
resizeHandler: new WindowResizeHandler(),
50+
banner: Banner,
51+
impressionCount
52+
} );
53+
54+
app.use( TranslationPlugin, translator );
55+
app.use( DynamicTextPlugin, {
56+
campaignParameters: page.getCampaignParameters(),
57+
date: new Date(),
58+
formatters: localeFactory.getFormatters(),
59+
impressionCount,
60+
translator,
61+
urgencyMessageDaysLeft: 45
62+
} );
63+
64+
app.provide( 'currencyFormatter', currencyFormatter );
65+
app.provide( 'formItems', createFormItems( translator, currencyFormatter.euroAmount.bind( currencyFormatter ) ) );
66+
app.provide( 'formActions', createFormActions( page.getTracking(), impressionCount ) );
67+
app.provide( 'tracker', tracker );
68+
app.provide( 'timer', new WindowTimer() );
69+
70+
app.mount( page.getBannerContainer() );

‎banners/mobile/C24_WMDE_Mobile_DE_12/banner_var.ts

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import { createVueApp } from '@src/createVueApp';
2+
3+
import './styles/styles_var.scss';
4+
5+
import BannerConductor from '@src/components/BannerConductor/BannerConductor.vue';
6+
import Banner from './components/BannerVar.vue';
7+
import { UrlRuntimeEnvironment } from '@src/utils/RuntimeEnvironment';
8+
import { WindowResizeHandler } from '@src/utils/ResizeHandler';
9+
import PageWPORG from '@src/page/PageWPORG';
10+
import { WindowMediaWiki } from '@src/page/MediaWiki/WindowMediaWiki';
11+
import { SkinFactory } from '@src/page/skin/SkinFactory';
12+
import { WindowSizeIssueChecker } from '@src/utils/SizeIssueChecker/WindowSizeIssueChecker';
13+
import TranslationPlugin from '@src/TranslationPlugin';
14+
import { Translator } from '@src/Translator';
15+
import DynamicTextPlugin from '@src/DynamicTextPlugin';
16+
import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
17+
import { WindowPageScroller } from '@src/utils/PageScroller/WindowPageScroller';
18+
import { LegacyTrackerWPORG } from '@src/tracking/LegacyTrackerWPORG';
19+
import eventMappings from './event_map';
20+
import messages from './messages';
21+
import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
22+
import { createFormItems } from './form_items';
23+
import { createFormActions } from '@src/createFormActions';
24+
import { LocalStorageCloseTracker } from '@src/utils/LocalCloseTracker';
25+
import { WindowTimer } from '@src/utils/Timer';
26+
import { currentCampaignTimePercentage } from '@src/components/ProgressBar/currentCampaignTimePercentage';
27+
28+
const localeFactory = new LocaleFactoryDe();
29+
const translator = new Translator( messages );
30+
const mediaWiki = new WindowMediaWiki();
31+
const page = new PageWPORG( mediaWiki, ( new SkinFactory( mediaWiki ) ).getSkin(), new WindowSizeIssueChecker() );
32+
const runtimeEnvironment = new UrlRuntimeEnvironment( window.location );
33+
const impressionCount = new LocalImpressionCount( page.getTracking().keyword, runtimeEnvironment );
34+
const tracker = new LegacyTrackerWPORG( mediaWiki, page.getTracking().keyword, eventMappings, runtimeEnvironment );
35+
const date = new Date();
36+
const currencyFormatter = localeFactory.getCurrencyFormatter();
37+
38+
const app = createVueApp( BannerConductor, {
39+
page,
40+
bannerConfig: {
41+
delay: runtimeEnvironment.getBannerDelay( 7500 ),
42+
transitionDuration: 1000
43+
},
44+
bannerProps: {
45+
useOfFundsContent: localeFactory.getUseOfFundsLoader().getContent(),
46+
pageScroller: new WindowPageScroller(),
47+
remainingImpressions: impressionCount.getRemainingImpressions( page.getMaxBannerImpressions( 'mobile' ) ),
48+
localCloseTracker: new LocalStorageCloseTracker()
49+
},
50+
resizeHandler: new WindowResizeHandler(),
51+
banner: Banner,
52+
impressionCount
53+
} );
54+
55+
app.use( TranslationPlugin, translator );
56+
app.use( DynamicTextPlugin, {
57+
campaignParameters: page.getCampaignParameters(),
58+
date,
59+
formatters: localeFactory.getFormatters(),
60+
impressionCount,
61+
translator,
62+
urgencyMessageDaysLeft: 45
63+
} );
64+
65+
app.provide( 'currencyFormatter', currencyFormatter );
66+
app.provide( 'formItems', createFormItems( translator, currencyFormatter.euroAmount.bind( currencyFormatter ) ) );
67+
app.provide( 'formActions', createFormActions( page.getTracking(), impressionCount ) );
68+
app.provide( 'tracker', tracker );
69+
app.provide( 'timer', new WindowTimer() );
70+
app.provide( 'currentCampaignTimePercentage', currentCampaignTimePercentage( date, page.getCampaignParameters() ) );
71+
72+
app.mount( page.getBannerContainer() );

0 commit comments

Comments
 (0)