Skip to content

Commit

Permalink
Merge pull request #253 from wmde/C23_WMDE_Mobile_EN_01
Browse files Browse the repository at this point in the history
C23_WMDE_Mobile_EN_01
  • Loading branch information
moiikana authored Nov 1, 2023
2 parents fd891f2 + d5d6ffd commit 8000d8c
Show file tree
Hide file tree
Showing 31 changed files with 655 additions and 97 deletions.
2 changes: 1 addition & 1 deletion banners/mobile_english/banner_var.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import { WindowPageScroller } from '@src/utils/PageScroller/WindowPageScroller';
import { Locales } from '@src/domain/Locales';

// Channel specific form setup
import { createFormItems } from './form_items';
import { createFormItems } from './form_items_var';
import { createFormActions } from '@src/createFormActions';

// Content for EN banners
Expand Down
9 changes: 8 additions & 1 deletion banners/mobile_english/components/BannerCtrl.vue
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,13 @@
<MultiStepDonation :step-controllers="stepControllers" :page-scroller="pageScroller">

<template #form-page-1="{ pageIndex, submit, previous, isCurrent }: any">
<MainDonationForm :page-index="pageIndex" :is-current="isCurrent" @submit="submit" @previous="previous"/>
<MainDonationForm
:page-index="pageIndex"
:is-current="isCurrent"
@submit="submit"
@previous="previous"
custom-amount-placeholder-key="custom-amount-placeholder-short"
/>
</template>

</MultiStepDonation>
Expand Down Expand Up @@ -99,6 +105,7 @@ const props = defineProps<Props>();
const emit = defineEmits( [ 'bannerClosed', 'bannerContentChanged' ] );
const tracker = inject<Tracker>( 'tracker' );
const isFundsModalVisible = ref<boolean>( false );
const slideShowStopped = ref<boolean>( false );
const slideshowShouldPlay = computed( () => props.bannerState === BannerStates.Visible && !slideShowStopped.value );
Expand Down
31 changes: 30 additions & 1 deletion banners/mobile_english/components/BannerVar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,31 @@
<MultiStepDonation :step-controllers="stepControllers" :page-scroller="pageScroller">

<template #form-page-1="{ pageIndex, submit, previous, isCurrent }: any">
<MainDonationForm :page-index="pageIndex" :is-current="isCurrent" @submit="submit" @previous="previous"/>
<MainDonationForm
:page-index="pageIndex"
:is-current="isCurrent"
@submit="submit"
@previous="previous"
custom-amount-placeholder-key="custom-amount-placeholder-short"
>

<template #label-payment-ppl>
<span class="wmde-banner-select-group-label with-logos paypal"><PayPalLogo/></span>
</template>

<template #label-payment-mcp>
<span class="wmde-banner-select-group-label with-logos credit-cards">
<VisaLogo/>
<MastercardLogo/>
<AmexLogo/>
</span>
</template>

<template #sms-icon>
<SmsIcon/>
</template>

</MainDonationForm>
</template>

</MultiStepDonation>
Expand Down Expand Up @@ -74,6 +98,10 @@ import ProgressBar from '@src/components/ProgressBar/ProgressBar.vue';
import BannerSlides from '../content/BannerSlides.vue';
import BannerFooter from '@src/components/Footer/BannerFooter.vue';
import KeenSlider from '@src/components/Slider/KeenSlider.vue';
import MastercardLogo from '@src/components/PaymentLogos/MastercardLogo.vue';
import VisaLogo from '@src/components/PaymentLogos/VisaLogo.vue';
import AmexLogo from '@src/components/PaymentLogos/AmexLogo.vue';
import PayPalLogo from '@src/components/PaymentLogos/PayPalLogo.vue';
import { Tracker } from '@src/tracking/Tracker';
import { MobileMiniBannerExpandedEvent } from '@src/tracking/events/MobileMiniBannerExpandedEvent';
import {
Expand All @@ -82,6 +110,7 @@ import {
import { CloseChoices } from '@src/domain/CloseChoices';
import { CloseEvent } from '@src/tracking/events/CloseEvent';
import { TrackingFeatureName } from '@src/tracking/TrackingEvent';
import SmsIcon from '@src/components/Icons/SmsIcon.vue';
enum ContentStates {
Mini = 'wmde-banner-wrapper--mini',
Expand Down
7 changes: 3 additions & 4 deletions banners/mobile_english/components/MiniBanner.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,14 @@
<div class="wmde-banner-mini-content">
<div class="wmde-banner-mini-close">
<button class="wmde-banner-mini-close-button t-close-main-banner" @click.prevent="$emit( 'close' )">
<CloseIconChunky/>
<CloseIconCircle/>
</button>
</div>

<div class="wmde-banner-mini-banner-slideshow">
<slot name="banner-slides"/>
</div>
</div>
<div class="wmde-banner-mini-button-wrapper">

<button class="wmde-banner-mini-button" @click="$emit( 'showFullPageBanner' )">
Donate now
</button>
Expand All @@ -21,7 +20,7 @@

<script setup lang="ts">
import CloseIconChunky from '@src/components/Icons/CloseIconChunky.vue';
import CloseIconCircle from '@src/components/Icons/CloseIconCircle.vue';
defineEmits( [ 'showFullPageBanner', 'close' ] );
Expand Down
18 changes: 16 additions & 2 deletions banners/mobile_english/components/MiniBannerVar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<div class="wmde-banner-mini-content">
<div class="wmde-banner-mini-close">
<button class="wmde-banner-mini-close-button t-close-main-banner" @click.prevent="$emit( 'close' )">
<CloseIconChunky/>
<CloseIconCircle/>
</button>
</div>

Expand All @@ -14,13 +14,27 @@
<button class="wmde-banner-mini-button" @click="$emit( 'showFullPageBanner' )">
Donate now
</button>

<div class="wmde-banner-mini-payment-icons">
<div><PayPalLogo/></div>
<div><VisaLogo/></div>
<div><MastercardLogo/></div>
<div><AmexLogo/></div>
<div><SmsIcon/></div>
</div>

</div>
</div>
</template>

<script setup lang="ts">
import CloseIconChunky from '@src/components/Icons/CloseIconChunky.vue';
import PayPalLogo from '@src/components/PaymentLogos/PayPalLogo.vue';
import VisaLogo from '@src/components/PaymentLogos/VisaLogo.vue';
import MastercardLogo from '@src/components/PaymentLogos/MastercardLogo.vue';
import AmexLogo from '@src/components/PaymentLogos/AmexLogo.vue';
import SmsIcon from '@src/components/Icons/SmsIcon.vue';
import CloseIconCircle from '@src/components/Icons/CloseIconCircle.vue';
defineEmits( [ 'showFullPageBanner', 'close' ] );
Expand Down
29 changes: 16 additions & 13 deletions banners/mobile_english/content/BannerSlides.vue
Original file line number Diff line number Diff line change
@@ -1,29 +1,31 @@
<template>
<KeenSliderSlide :is-current="currentSlide === 0" class="wmde-banner-slide-content-with-progress-bar">
<p><strong>Our donation target: {{ goalDonationSum }} million</strong></p>
<p><strong>Our donation target: {{ goalDonationSum }} million</strong></p>
<ProgressBar amount-to-show-on-right="TARGET"/>
</KeenSliderSlide>
<KeenSliderSlide :is-current="currentSlide === 1">
<p><strong>To all our readers in Germany: </strong></p>
<p>This {{ currentDayName }} your support is requested by the nonprofit that collects donations on
Wikipedia to support free knowledge.</p>
<p><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.</p>
</KeenSliderSlide>
<KeenSliderSlide :is-current="currentSlide === 2">
<p>Each year, thanks to the 1% of readers who give to support our nonprofit mission, we can expand the
reach of free knowledge to new corners of the world.</p>
<p>
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 === 3">
<p><span class="wmde-banner-text-animated-highlight">If Wikipedia matters and is useful to you too, please join them and donate €5 today.</span>
Give only what you can comfortably give: what matters is your support, not the size of your gift.
<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 === 4">
<p>Online, Wikipedia is the closest thing we have to a public park or a library where everyone can go to
learn. And that's priceless. Thank you.
<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>
<div>
<i> — Wikimedia Fördergesellschaft</i>
</div>
</KeenSliderSlide>
</template>

Expand All @@ -41,6 +43,7 @@ defineProps<Props>();
const {
currentDayName,
currentDate,
goalDonationSum
}: DynamicContent = inject( 'dynamicCampaignText' );
</script>
21 changes: 11 additions & 10 deletions banners/mobile_english/content/BannerText.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,19 @@
<div class="wmde-banner-message">
<div>
<p class="banner-text-title">
To all our readers in Germany,
&#8220;Wikipedia is not for sale.&#8221; – A personal appeal from Wikipedia-Founder Jimmy Wales
</p>
<p>
This {{ currentDayName }} your support is requested by the nonprofit that collects donations on
Wikipedia to support free knowledge. Each year, thanks to the 1% of readers who give to support our
nonprofit mission, we can expand the reach of free knowledge to new corners of the world. <span
class="wmde-banner-text-animated-highlight">If Wikipedia matters and is useful to you too, please join them and donate €5 today.</span>
Give only what you can comfortably give: what matters is your support, not the size of your gift.
Together, let's preserve this special space on the internet. Online, Wikipedia is the closest thing we
have to a public park or a library where everyone can go to learn. And that's priceless. Thank you.
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> It's hard to know what
to trust online these days. Disinformation and scammers are everywhere. 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. Thank you.
</p>
<i>— Wikimedia Fördergesellschaft</i>
</div>
</div>
</template>
Expand All @@ -22,6 +23,6 @@
import { inject } from 'vue';
import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
const { currentDayName }: DynamicContent = inject( 'dynamicCampaignText' );
const { currentDayName, currentDate }: DynamicContent = inject( 'dynamicCampaignText' );
</script>
7 changes: 5 additions & 2 deletions banners/mobile_english/event_map.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,14 @@ 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 ],
[ NotShownEvent.EVENT_NAME, mapNotShownEvent ],
[ MobileMiniBannerExpandedEvent.EVENT_NAME,
( e: MobileMiniBannerExpandedEvent ): WMDELegacyBannerEvent => new WMDELegacyBannerEvent( e.eventName, 1 ) ]
// TODO add more events
( e: MobileMiniBannerExpandedEvent ): WMDELegacyBannerEvent => new WMDELegacyBannerEvent( e.eventName, 1 ) ],
[ BannerSubmitEvent.EVENT_NAME, (): WMDESizeIssueEvent => new WMDESizeIssueEvent( `submit`, createViewportInfo(), 1 ) ]
] );
20 changes: 20 additions & 0 deletions banners/mobile_english/form_items_var.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import FormItemsBuilder from '@src/utils/FormItemsBuilder/FormItemsBuilder';
import { Translator } from '@src/Translator';
import { DonationFormItems } from '@src/utils/FormItemsBuilder/DonationFormItems';
import { Intervals } from '@src/utils/FormItemsBuilder/fields/Intervals';
import { PaymentMethods } from '@src/utils/FormItemsBuilder/fields/PaymentMethods';
import { NumberFormatter } from '@src/utils/DynamicContent/formatters/NumberFormatter';

export function createFormItems( translations: Translator, amountFormatter: NumberFormatter ): DonationFormItems {
return new FormItemsBuilder( translations, amountFormatter )
.setIntervals(
Intervals.ONCE,
Intervals.MONTHLY,
Intervals.YEARLY
)
.setAmounts( 5, 15, 25, 50, 100 )
.setPaymentMethods(
PaymentMethods.PAYPAL,
PaymentMethods.CREDIT_CARD
).getItems();
}
3 changes: 2 additions & 1 deletion banners/mobile_english/styles/FullPageBanner.scss
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,11 @@
margin: 0 auto;
border-radius: 15px;
border: 8px solid colors.$primary;
padding: 5px 5px 15px;

&-content {
padding: 5px 5px 15px;
overflow-y: auto;
overflow-x: hidden;
height: 100%;
width: 100%;
}
Expand Down
72 changes: 40 additions & 32 deletions banners/mobile_english/styles/MiniBanner.scss
Original file line number Diff line number Diff line change
@@ -1,67 +1,75 @@
@use 'src/themes/Yperala/variables/globals';
@use 'src/themes/Yperala/variables/colors';
@use 'src/themes/Yperala/variables/breakpoints';

$height: 228px !default;
$height-small: 328px !default;
$height-large: 288px !default;

.wmde-banner {
&-mini {
padding: 5px 0;
min-height: $height-small;
display: flex;
flex-direction: column;
min-height: $height;
padding: 5px 0 0;

@include breakpoints.phone-m-up {
min-height: $height-large;
}

&-content {
position: relative;
cursor: pointer;
text-align: center;
box-sizing: border-box;
display: flex;
flex-grow: 1;
flex-wrap: wrap;
flex-direction: column;
justify-content: space-between;
align-items: center;
margin: 0 auto;
padding-bottom: 10px;
background: colors.$primary-lighter;
border: 8px solid colors.$primary;
box-shadow: 0 7px 22px 0 rgba( 0, 0, 0, 0.35 );
border-radius: 15px;
margin: 0 auto;
padding: 5px;
width: 98%;
}

&-close {
position: absolute;
top: 8px;
right: 8px;
top: 0;
right: -2px;
z-index: 2;
height: 30px;
width: 30px;
display: flex;
justify-content: center;
align-items: center;

svg {
height: 20px;
width: 20px;
}
}

.wmde-banner-progress-bar-text {
visibility: hidden;
}

&-banner-slideshow {
width: 100%;
flex: 1 0 auto;
}
}

&-mini-button {
position: absolute;
top: -9px;
left: 50%;
display: inline-block;
width: 170px;
height: 40px;
padding: 5px 15px 4px;
margin-left: -85px;
cursor: pointer;
background: colors.$primary-lighter;
border: 8px solid colors.$primary;
border-radius: 8px;
border-top: 2px solid colors.$primary-lighter;
text-transform: uppercase;
color: colors.$primary-darker;
font-size: 0.9em;
width: 160px;
line-height: 40px;
border-radius: globals.$form-element-border-radius;
font-weight: bold;

&-wrapper {
position: relative;
z-index: 1000;
height: 40px;
text-align: center;
}
color: colors.$white;
background-color: colors.$secondary;
text-align: center;
padding: 0 30px;
margin-bottom: 5px;
}
}
Loading

0 comments on commit 8000d8c

Please sign in to comment.