Merge pull request #234 from wmde/C23_WMDE_Desktop_EN_01

C23_WMDE_Desktop_EN_01
wmde · Nov 1, 2023 · fd891f2 · fd891f2
2 parents f4c2c5e + 7e25113
commit fd891f2
Show file tree

Hide file tree

Showing 16 changed files with 150 additions and 111 deletions.
diff --git a/banners/english/banner_ctrl.ts b/banners/english/banner_ctrl.ts
@@ -15,7 +15,6 @@ import { Translator } from '@src/Translator';
 import DynamicTextPlugin from '@src/DynamicTextPlugin';
 import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
 import { LegacyTrackerWPORG } from '@src/tracking/LegacyTrackerWPORG';
-import eventMappings from './event_map';
 import { Locales } from '@src/domain/Locales';
 
 // Locale-specific imports
@@ -25,6 +24,7 @@ import { LocaleFactoryEn } from '@src/utils/LocaleFactory/LocaleFactoryEn';
 // Channel specific form setup
 import { createFormItems } from './form_items';
 import { createFormActions } from '@src/createFormActions';
+import eventMappings from './event_map';
 
 const localeFactory = new LocaleFactoryEn();
 const translator = new Translator( messages );

diff --git a/banners/english/banner_var.ts b/banners/english/banner_var.ts
@@ -15,7 +15,7 @@ import { Translator } from '@src/Translator';
 import DynamicTextPlugin from '@src/DynamicTextPlugin';
 import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
 import { LegacyTrackerWPORG } from '@src/tracking/LegacyTrackerWPORG';
-import eventMappings from './event_map_var';
+import { Locales } from '@src/domain/Locales';
 
 // Locale-specific imports
 import messages from './messages';
@@ -24,7 +24,7 @@ import { LocaleFactoryEn } from '@src/utils/LocaleFactory/LocaleFactoryEn';
 // Channel specific form setup
 import { createFormItems } from './form_items';
 import { createFormActions } from '@src/createFormActions';
-import { Locales } from '@src/domain/Locales';
+import eventMappings from './event_map';
 
 const localeFactory = new LocaleFactoryEn();
 const translator = new Translator( messages );

diff --git a/banners/english/components/BannerCtrl.vue b/banners/english/components/BannerCtrl.vue
@@ -34,10 +34,6 @@
 						<UpgradeToYearlyForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous"/>
 					</template>
 
-					<template #[FormStepNames.CustomAmountFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
-						<CustomAmountForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous"/>
-					</template>
-
                 </MultiStepDonation>
             </template>
             <template #footer>
@@ -69,7 +65,6 @@ import { ref, watch } from 'vue';
 import MainBanner from './MainBanner.vue';
 import FundsModal from '@src/components/UseOfFunds/FundsModal.vue';
 import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/UseOfFunds/UseOfFundsContent';
-import CustomAmountForm from '@src/components/DonationForm/Forms/CustomAmountForm.vue';
 import UpgradeToYearlyForm from '@src/components/DonationForm/Forms/UpgradeToYearlyForm.vue';
 import BannerSlides from '../../english/content/BannerSlides.vue';
 import MainDonationForm from '@src/components/DonationForm/Forms/MainDonationForm.vue';
@@ -85,7 +80,6 @@ import {
 import {
 	createSubmittableUpgradeToYearly
 } from '@src/components/DonationForm/StepControllers/SubmittableUpgradeToYearly';
-import { createSubmittableCustomAmount } from '@src/components/DonationForm/StepControllers/SubmittableCustomAmount';
 import { CloseChoices } from '@src/domain/CloseChoices';
 import { CloseEvent } from '@src/tracking/events/CloseEvent';
 import { TrackingFeatureName } from '@src/tracking/TrackingEvent';
@@ -114,8 +108,7 @@ const contentState = ref<ContentStates>( ContentStates.Main );
 const formModel = useFormModel();
 const stepControllers = [
 	createSubmittableMainDonationForm( formModel, FormStepNames.UpgradeToYearlyFormStep ),
-	createSubmittableUpgradeToYearly( formModel, FormStepNames.CustomAmountFormStep, FormStepNames.MainDonationFormStep ),
-	createSubmittableCustomAmount( formModel, FormStepNames.UpgradeToYearlyFormStep )
+	createSubmittableUpgradeToYearly( formModel, FormStepNames.MainDonationFormStep, FormStepNames.MainDonationFormStep )
 ];
 
 watch( contentState, async () => {

diff --git a/banners/english/components/BannerVar.vue b/banners/english/components/BannerVar.vue
@@ -19,11 +19,11 @@
                 </KeenSlider>
             </template>
 
-            <template #progress>
-                <ProgressBar amount-to-show-on-right="TARGET"/>
-            </template>
+			<template #progress>
+				<ProgressBar amount-to-show-on-right="TARGET"/>
+			</template>
 
-            <template #donation-form="{ formInteraction }: any">
+			<template #donation-form="{ formInteraction }: any">
 				<MultiStepDonation :step-controllers="stepControllers" @form-interaction="formInteraction">
 
 					<template #[FormStepNames.MainDonationFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
@@ -34,16 +34,11 @@
 						<UpgradeToYearlyForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous"/>
 					</template>
 
-					<template #[FormStepNames.CustomAmountFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
-						<CustomAmountForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous"/>
-					</template>
-
-				</MultiStepDonation>
+                </MultiStepDonation>
             </template>
             <template #footer>
-                <FooterAlreadyDonated
+                <BannerFooter
                     @showFundsModal="isFundsModalVisible = true"
-                    @showAlreadyDonatedModal="onShowAlreadyDonated"
                 />
             </template>
         </MainBanner>
@@ -60,18 +55,6 @@
             :is-funds-modal-visible="isFundsModalVisible"
             @hideFundsModal="isFundsModalVisible = false"
         />
-
-        <AlreadyDonatedModal
-            :is-visible="isAlreadyDonatedModalVisible"
-            :is-already-donated-modal-visible="isAlreadyDonatedModalVisible"
-            @hideAlreadyDonatedModal="isAlreadyDonatedModalVisible = false"
-            @goAway="() => onClose( 'AlreadyDonatedModal', CloseChoices.NoMoreBannersForCampaign )"
-            @maybe-later="() => onClose( 'AlreadyDonatedModal', CloseChoices.MaybeLater )"
-        >
-            <template #already-donated-content>
-                <AlreadyDonatedContent/>
-            </template>
-        </AlreadyDonatedModal>
     </div>
 </template>
 
@@ -82,25 +65,21 @@ import { ref, watch } from 'vue';
 import MainBanner from './MainBanner.vue';
 import FundsModal from '@src/components/UseOfFunds/FundsModal.vue';
 import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/UseOfFunds/UseOfFundsContent';
-import AlreadyDonatedModal from '@src/components/AlreadyDonatedModal/AlreadyDonatedModal.vue';
-import CustomAmountForm from '@src/components/DonationForm/Forms/CustomAmountForm.vue';
 import UpgradeToYearlyForm from '@src/components/DonationForm/Forms/UpgradeToYearlyForm.vue';
-import BannerSlides from '../../english/content/BannerSlides.vue';
+import BannerSlides from '../../english/content/BannerSlidesVar.vue';
 import MainDonationForm from '@src/components/DonationForm/Forms/MainDonationForm.vue';
 import ProgressBar from '@src/components/ProgressBar/ProgressBar.vue';
 import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue';
-import BannerText from '../../english/content/BannerText.vue';
-import FooterAlreadyDonated from '@src/components/Footer/FooterAlreadyDonated.vue';
-import AlreadyDonatedContent from '../content/AlreadyDonatedContent.vue';
+import BannerText from '../../english/content/BannerTextVar.vue';
 import KeenSlider from '@src/components/Slider/KeenSlider.vue';
+import BannerFooter from '@src/components/Footer/BannerFooter.vue';
 import { useFormModel } from '@src/components/composables/useFormModel';
 import {
 	createSubmittableMainDonationForm
 } from '@src/components/DonationForm/StepControllers/SubmittableMainDonationForm';
 import {
 	createSubmittableUpgradeToYearly
 } from '@src/components/DonationForm/StepControllers/SubmittableUpgradeToYearly';
-import { createSubmittableCustomAmount } from '@src/components/DonationForm/StepControllers/SubmittableCustomAmount';
 import { CloseChoices } from '@src/domain/CloseChoices';
 import { CloseEvent } from '@src/tracking/events/CloseEvent';
 import { TrackingFeatureName } from '@src/tracking/TrackingEvent';
@@ -125,13 +104,11 @@ defineProps<Props>();
 const emit = defineEmits( [ 'bannerClosed', 'maybeLater', 'bannerContentChanged' ] );
 
 const isFundsModalVisible = ref<boolean>( false );
-const isAlreadyDonatedModalVisible = ref<boolean>( false );
 const contentState = ref<ContentStates>( ContentStates.Main );
 const formModel = useFormModel();
 const stepControllers = [
 	createSubmittableMainDonationForm( formModel, FormStepNames.UpgradeToYearlyFormStep ),
-	createSubmittableUpgradeToYearly( formModel, FormStepNames.CustomAmountFormStep, FormStepNames.MainDonationFormStep ),
-	createSubmittableCustomAmount( formModel, FormStepNames.UpgradeToYearlyFormStep )
+	createSubmittableUpgradeToYearly( formModel, FormStepNames.MainDonationFormStep, FormStepNames.MainDonationFormStep )
 ];
 
 watch( contentState, async () => {
@@ -146,8 +123,4 @@ function onClose( feature: TrackingFeatureName, userChoice: CloseChoices ): void
 	emit( 'bannerClosed', new CloseEvent( feature, userChoice ) );
 }
 
-function onShowAlreadyDonated(): void {
-	isAlreadyDonatedModalVisible.value = true;
-}
-
 </script>
diff --git a/banners/english/content/BannerSlides.vue b/banners/english/content/BannerSlides.vue
@@ -2,26 +2,26 @@
 	<KeenSliderSlide :is-current="currentSlide === 0">
 		<p class="headline">
 			<InfoIcon fill="#990a00"/>
-			<strong> An alle, die Wikipedia in Deutschland nutzen </strong>
+			<strong> To all our readers in Germany,</strong>
 		</p>
 		<p>
-			This {{ currentDayName }} {{ currentDate }}, with only a few days before 2022 comes to an end, we
-			humbly ask for your support. We are the nonprofit that collects donations on Wikipedia to
-			support free knowledge. If you can, please join the 1% of readers who give.
+			This {{ currentDayName }}, {{ currentDate }}, with only a few weeks before 2023 comes to an end, we humbly
+			ask for your support. We are the nonprofit that collects donations on Wikipedia to support free knowledge.
+			If you can, please join the 1% of readers who give.
 		</p>
 	</KeenSliderSlide>
 	<KeenSliderSlide :is-current="currentSlide === 1">
-		<p><span class="wmde-banner-text-animated-highlight">If everyone reading this right now
-					gave just €5, we'd hit our annual goal in a couple of hours.</span> The price of a cup of
-			coffee is all we ask. It's easy to ignore our messages, but we hope you'll take one minute to
-			think about how useful Wikipedia is in your life.
+		<p>
+			<span class="wmde-banner-text-animated-highlight">If everyone reading this right now gave just €5, we'd hit
+			our annual goal in a couple of hours.</span> The price of a cup of coffee is all we ask. It's easy to ignore
+			our messages, but we hope you'll take one minute to think about how useful Wikipedia is in your life.
 		</p>
 	</KeenSliderSlide>
 	<KeenSliderSlide :is-current="currentSlide === 2">
-		<p>Online, Wikipedia is the closest thing we have to a public park or a library where everyone can
-			go to learn. If Wikipedia has given you €5 worth of knowledge this year, please support the
-			technology that makes our projects possible and advance the cause of free knowledge
-			worldwide. — <i>Wikimedia Fördergesellschaft</i>
+		<p>
+			Online, Wikipedia is the closest thing we have to a public park or a library where everyone can go to learn.
+			If Wikipedia has given you €5 worth of knowledge this year, please support the technology that makes our
+			projects possible and advance the cause of free knowledge worldwide. — <i>Wikimedia Deutschland</i>
 		</p>
 	</KeenSliderSlide>
 </template>

diff --git a/banners/english/content/BannerSlidesVar.vue b/banners/english/content/BannerSlidesVar.vue
@@ -0,0 +1,42 @@
+<template>
+	<KeenSliderSlide :is-current="currentSlide === 0">
+		<p class="headline">
+			<InfoIcon fill="#990a00"/>
+			<strong> &#8220;Wikipedia is not for sale.&#8221; - A personal appeal from Wikipedia founder Jimmy Wales.</strong>
+		</p>
+		<p>
+			Please don't ignore this 1-minute read. This {{ currentDayName }}, {{ currentDate }}, I ask you to reflect
+			on the number of times you visited Wikipedia in the past year, the value you got from it, and whether
+			you're able to give €5 back.
+		</p>
+	</KeenSliderSlide>
+	<KeenSliderSlide :is-current="currentSlide === 1">
+		<p>
+			If you can, please join the 1% of readers who give. <span class="wmde-banner-text-animated-highlight">If
+			everyone reading this right now gave just €5, we'd hit our goal in a couple of hours.</span> It's hard to
+			know what to trust online these days. Disinformation and scammers are everywhere.
+		</p>
+	</KeenSliderSlide>
+	<KeenSliderSlide :is-current="currentSlide === 2">
+		<p>
+			We are passionate about our model because we want everyone to have equal access to quality information
+			- something that is becoming harder and harder to find online. If Wikipedia has given you €5 worth of
+			knowledge this year, please give back. <em>Thank you.</em>
+		</p>
+	</KeenSliderSlide>
+</template>
+
+<script setup lang="ts">
+import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
+import { inject } from 'vue';
+import InfoIcon from '@src/components/Icons/InfoIcon.vue';
+import KeenSliderSlide from '@src/components/Slider/KeenSliderSlide.vue';
+
+interface Props {
+	currentSlide: number
+}
+
+defineProps<Props>();
+
+const { currentDayName, currentDate }: DynamicContent = inject( 'dynamicCampaignText' );
+</script>
diff --git a/banners/english/content/BannerText.vue b/banners/english/content/BannerText.vue
@@ -2,19 +2,19 @@
 	<div class="wmde-banner-message">
 		<div>
 			<p>
-				<InfoIcon/>
+				<InfoIcon fill="#990a00"/>
 				<strong> To all our readers in Germany, </strong>
 			</p>
 			<p>
-				This {{ currentDayName }} {{ currentDate }}, with only a few days before 2022 comes to an end, we humbly ask
-				for your support. We are the nonprofit that collects donations on Wikipedia to support free knowledge. If
-				you can, please join the 1% of readers who give. <span class="wmde-banner-text-animated-highlight">If
+				This {{ currentDayName }}, {{ currentDate }}, with only a few weeks before 2023 comes to an end, we
+				humbly ask for your support. We are the nonprofit that collects donations on Wikipedia to support free knowledge.
+				If you can, please join the 1% of readers who give. <span class="wmde-banner-text-animated-highlight">If
 				everyone reading this right now gave just €5, we'd hit our annual goal in a couple of hours.</span> The
 				price of a cup of coffee is all we ask. It's easy to ignore our messages, but we hope you'll take one
 				minute to think about how useful Wikipedia is in your life. Online, Wikipedia is the closest thing we
 				have to a public park or a library where everyone can go to learn. If Wikipedia has given you €5 worth
 				of knowledge this year, please support the technology that makes our projects possible and advance the
-				cause of free knowledge worldwide. — <i>Wikimedia Fördergesellschaft</i>
+				cause of free knowledge worldwide. — <i>Wikimedia Deutschland</i>
 			</p>
 		</div>
 	</div>

diff --git a/banners/english/content/BannerTextVar.vue b/banners/english/content/BannerTextVar.vue
@@ -0,0 +1,39 @@
+<template>
+	<div class="wmde-banner-message">
+		<div>
+			<p>
+				<InfoIcon fill="#990a00"/>
+				<strong> &#8220;Wikipedia is not for sale.&#8221; - A personal appeal from Wikipedia founder Jimmy Wales.</strong>
+			</p>
+			<p>
+				Please don't ignore this 1-minute read. This {{ currentDayName }}, {{ currentDate }}, I ask you to
+				reflect on the number of times you visited Wikipedia in the past year, the value you got from it,
+				and whether you're able to give 5€ back. If you can, please join the 1% of readers who
+				give. <span class="wmde-banner-text-animated-highlight">If everyone reading this right now gave
+				just 5€, we'd hit our goal in a couple of hours.</span>
+			</p>
+
+			<p>
+				It's hard to know what to trust online these days. Disinformation and scammers are everywhere.
+				Wikipedia is different. It's not perfect, but it's not here to make a profit or to push a particular
+				perspective. It's written by everyone, together. Wikipedia is something we all share, like a library
+				or a public park. We are passionate about our model because we want everyone to have equal access to
+				quality information - something that is becoming harder and harder to find online.
+			</p>
+
+			<p>
+				If Wikipedia has given you 5€ worth of knowledge this year, please give back. There are no small
+				contributions: every edit counts, every donation counts. Thank you.
+			</p>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { inject } from 'vue';
+import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
+import InfoIcon from '@src/components/Icons/InfoIcon.vue';
+
+const { currentDayName, currentDate }: DynamicContent = inject( 'dynamicCampaignText' );
+
+</script>
diff --git a/banners/english/event_map.ts b/banners/english/event_map.ts
@@ -7,6 +7,9 @@ import { CloseEvent } from '@src/tracking/events/CloseEvent';
 import { mapCloseEvent } from '@src/tracking/LegacyEventTracking/mapCloseEvent';
 import { NotShownEvent } from '@src/tracking/events/NotShownEvent';
 import { mapNotShownEvent } from '@src/tracking/LegacyEventTracking/mapNotShownEvent';
+import { BannerSubmitEvent } from '@src/tracking/events/BannerSubmitEvent';
+import { WMDESizeIssueEvent } from '@src/tracking/WPORG/WMDEBannerSizeIssue';
+import { createViewportInfo } from '@src/tracking/LegacyEventTracking/createViewportInfo';
 
 export default new Map<string, TrackingEventConverterFactory>( [
 	[ CloseEvent.EVENT_NAME, mapCloseEvent ],
@@ -16,7 +19,15 @@ export default new Map<string, TrackingEventConverterFactory>( [
 		( e: CustomAmountChangedEvent ): WMDELegacyBannerEvent =>
 			new WMDELegacyBannerEvent( e.userChoice + '-amount', 1 )
 	],
-
-	[ NotShownEvent.EVENT_NAME, mapNotShownEvent ]
-	// TODO add more events
+	[ NotShownEvent.EVENT_NAME, mapNotShownEvent ],
+	[ BannerSubmitEvent.EVENT_NAME, ( e: BannerSubmitEvent ): WMDESizeIssueEvent => {
+		switch ( e.feature ) {
+			case 'UpgradeToYearlyForm':
+				return new WMDESizeIssueEvent( `submit-${e.userChoice}`, createViewportInfo(), 1 );
+			case 'CustomAmountForm':
+				return new WMDESizeIssueEvent( `submit-different-amount`, createViewportInfo(), 1 );
+			default:
+				return new WMDESizeIssueEvent( `submit`, createViewportInfo(), 1 );
+		}
+	} ]
 ] );
diff --git a/banners/english/event_map_var.ts b/banners/english/event_map_var.ts
diff --git a/banners/english/styles/MainBanner.scss b/banners/english/styles/MainBanner.scss
@@ -40,7 +40,6 @@ $form-width: 300px !default;
 		display: flex;
 		flex-direction: column;
 		width: $form-width;
-		min-height: 315px;
 		padding: 10px 0;
 	}
 }
diff --git a/banners/english/styles/styles.scss b/banners/english/styles/styles.scss
@@ -2,7 +2,7 @@
 @use 'src/components/BannerConductor/banner-transition';
 @use 'Banner';
 @use 'MainBanner' with (
-	$banner-height: 376px,
+	$banner-height: 355px,
 	$form-width: 300px
 );
 @use 'src/themes/UseOfFunds/UseOfFunds';