Merge pull request #1419 from wmde/form_redesign_test_conclusion

Conclude form design change AB test
wmde · Jan 7, 2019 · 38fd6de · 38fd6de
2 parents b5c3704 + 207e0a6
commit 38fd6de
Show file tree

Hide file tree

Showing 13 changed files with 46 additions and 159 deletions.
diff --git a/app/config/archived_campaigns.yaml b/app/config/archived_campaigns.yaml
@@ -1,16 +1,17 @@
 # Move unused entries from campaigns.yml here
 
-example:
-  description: Example campaign which was never run
-  reference: https://phabricator.wikimedia.org/T123456789
-  start: "2000-01-01"
-  end: "2099-12-31"
+donation_form_design:
+  description: Test design changes to donation form
+  reference: "https://phabricator.wikimedia.org/T212203"
+  start: "2018-12-21 20:00:00"
+  end: "2019-01-07 23:00:00"
+  active: true
   buckets:
-    - "test_bucket_01"
-    - "test_bucket_02"
-  default_bucket: "test_bucket_01"
-  url_key: sample_url_key
-  active: false
+    - default
+    - design_change
+  default_bucket: default
+  url_key: dsn
+
 
 usability:
   description: Change the user experience on the donation page by removing immediate scrolling, some subheaders and moving newsletter opt-in

diff --git a/app/config/campaigns.dev.yml b/app/config/campaigns.dev.yml
@@ -16,7 +16,3 @@ membership_call_to_action:
 amount_options:
   active: true
   start: "2018-12-01"
-
-donation_form_design:
-  start: "2018-12-18"
-  active: true
diff --git a/app/config/campaigns.test.yml b/app/config/campaigns.test.yml
@@ -16,6 +16,3 @@ skins:
 
 donation_address:
   active: false
-
-donation_form_design:
-  active: false
diff --git a/app/config/campaigns.yml b/app/config/campaigns.yml
@@ -72,15 +72,3 @@ amount_options:
   default_bucket: "5to300"
   url_key: amtopt
   active: true
-
-donation_form_design:
-  description: Test design changes to donation form
-  reference: "https://phabricator.wikimedia.org/T212203"
-  start: "2018-12-21 20:00:00"
-  end: "2019-01-07 23:00:00"
-  active: true
-  buckets:
-    - default
-    - design_change
-  default_bucket: default
-  url_key: dsn
diff --git a/skins/cat17/package.json b/skins/cat17/package.json
@@ -18,9 +18,7 @@
     "cs": "eslint --ext .js,.vue src/app faq-page use-of-funds",
     "ci": "npm-run-all --parallel cs test build-assets",
     "build-assets": "npm-run-all clean --parallel webpack-build-assets build-css build-faq build-funds",
-    "build-sass": "npm-run-all --parallel --parallel build-sass-main build-sass-variant",
-    "build-sass-main": "node-sass --output-style compressed -o web/css --include-path node_modules src/sass/main.scss",
-    "build-sass-variant": "node-sass --output-style compressed -o web/css --include-path node_modules src/sass/variant.scss",
+    "build-sass": "node-sass --output-style compressed -o web/css --include-path node_modules src/sass/main.scss",
     "optimize-css": "postcss -r web/css",
     "build-css": "npm run build-sass && npm run optimize-css",
     "webpack-build-assets": "webpack --env production",

diff --git a/skins/cat17/src/sass/common/_base.scss b/skins/cat17/src/sass/common/_base.scss
@@ -38,12 +38,8 @@ a {
 }
 
 h1, .h1 {
-	font-size: 32px;
-	line-height: 47px;
-	@include bkp(sm) {
-		font-size: 24px;
-		line-height: 36px;
-	}
+	font-size: 16px;
+	line-height: 32px;
 }
 
 h2, .h2 {

diff --git a/skins/cat17/src/sass/components/_forms.scss b/skins/cat17/src/sass/components/_forms.scss
@@ -58,6 +58,14 @@ input[type=submit] {
 					border-bottom: themed('border2pxfieldSelected');
 				}
 			}
+			&:after {
+				content: $icon-done;
+				position: absolute;
+				right: 12px;
+				top: 10px;
+				font-family: 'icomoonwikimedia';
+				font-size: 20px;
+			}
 		}
 		&.invalid {
 			.error-text {

diff --git a/skins/cat17/src/sass/variant.scss b/skins/cat17/src/sass/variant.scss
diff --git a/skins/cat17/src/scripts/donationForm.js b/skins/cat17/src/scripts/donationForm.js
@@ -327,12 +327,10 @@ $( function () {
 	// Add scroll behaviors to links/input elements
 
 	WMDE.Scrolling.addScrollToLinkAnchors( $( 'a[href^="#"]' ), scroller);
-	var featureToggleScrollingForm = $('#form-donation').data( 'feature-toggle-scroll-form' );
-	if ( featureToggleScrollingForm ) {
-		WMDE.Scrolling.scrollOnSuboptionChange( $( 'input[name="periode"]' ), $( '#recurrence' ), scroller );
-		WMDE.Scrolling.scrollOnSuboptionChange( $( 'input[name="addressType"]' ), $( '#type-donor' ), scroller );
-		WMDE.Scrolling.scrollOnSuboptionChange( $( 'input[name="zahlweise"]' ), $( '#donation-payment' ), scroller );
-	}
+
+	WMDE.Scrolling.scrollOnSuboptionChange( $( 'input[name="periode"]' ), $( '#recurrence' ), scroller );
+	WMDE.Scrolling.scrollOnSuboptionChange( $( 'input[name="addressType"]' ), $( '#type-donor' ), scroller );
+	WMDE.Scrolling.scrollOnSuboptionChange( $( 'input[name="zahlweise"]' ), $( '#donation-payment' ), scroller );
 
 	var bankDataValidator = WMDE.FormValidation.createBankDataValidator(
 		initData.data( 'validate-iban-url' ),

diff --git a/skins/cat17/templates/Donation_Form.html.twig b/skins/cat17/templates/Donation_Form.html.twig
@@ -20,8 +20,7 @@
 		</div>
 	</div>
 
-	<form id="form-donation" class="main-form" action="{$ basepath $}/donation/add" method="post" novalidate
-		  data-feature-toggle-scroll-form="{$ featureToggle.formScrolling | json_encode $}">
+	<form id="form-donation" class="main-form" action="{$ basepath $}/donation/add" method="post" novalidate>
 		<div class="container">
 			<section class="state-bar state-overview col-xs-12 ">
 				<div class="wrap-bar container ">

diff --git a/skins/cat17/templates/partials/Page_Header.html.twig b/skins/cat17/templates/partials/Page_Header.html.twig
@@ -20,13 +20,26 @@
 					</div>
 					<nav class="menu menu-main">
 						<ul class="list-unstyled list-inline">
-							{% for menu_item in main_menu %}
-							<li class="col-xs-12 col-sm-6 no-gutter{% if page_identifier == menu_item.id %} selected{% endif %}">
-								<a href="{$ menu_item.url $}">
-									<span class="text">{$ menu_item.label | trans $}</span><i class="icon-keyboard_arrow_right"></i>
+							<li class="col-xs-12 col-sm-6 no-gutter{% if page_identifier == 'comments-list' %} selected{% endif %}">
+								<a href="{$ path( 'list-comments.html' ) $}">
+									<span class="text">Spendenkommentare</span><i class="icon-keyboard_arrow_right"></i>
+								</a>
+							</li>
+							<li class="col-xs-12 col-sm-6 no-gutter{% if page_identifier == 'faq' %} selected{% endif %}">
+								<a href="{$ path( 'faq' ) $}">
+									<span class="text">Häufige Fragen</span><i class="icon-keyboard_arrow_right"></i>
+								</a>
+							</li>
+							<li class="col-xs-12 col-sm-6 no-gutter{% if page_identifier == 'use_of_resources' %} selected{% endif %}">
+								<a href="{$ path( 'use-of-funds' ) $}">
+									<span class="text">Mittelverwendung</span><i class="icon-keyboard_arrow_right"></i>
+								</a>
+							</li>
+							<li class="col-xs-12 col-sm-6 no-gutter{% if page_identifier == 'donation' %} selected{% endif %}">
+								<a href="{$ path( 'show-donation-form' ) $}">
+									<span class="text">Spenden</span><i class="icon-keyboard_arrow_right"></i>
 								</a>
 							</li>
-							{% endfor %}
 							<li class="col-xs-12 col-sm-6 col-sm-offset-6 no-gutter clearfix">
 								<div class="other-info other-info-lateral">
 									<div class="other-text">

diff --git a/src/Factories/ChoiceFactory.php b/src/Factories/ChoiceFactory.php
@@ -71,75 +71,6 @@ public function getAmountOption(): array {
 		throw new UnknownChoiceDefinition( 'Amount option selection configuration failure.' );
 	}
 
-	public function getMainCss(): string {
-		if ( $this->featureToggle->featureIsActive( 'campaigns.donation_form_design.design_change' ) ) {
-			return '/skins/cat17/css/variant.css';
-		} elseif ( $this->featureToggle->featureIsActive( 'campaigns.donation_form_design.default' ) ) {
-			return '/skins/cat17/css/main.css';
-		}
-		throw new UnknownChoiceDefinition( 'Design selection failure.' );
-	}
-
-	public function getMainMenuItems( UrlGenerator $urlGenerator ): array {
-		if ( $this->featureToggle->featureIsActive( 'campaigns.donation_form_design.design_change' ) ) {
-			return [
-				[
-					'url' => $urlGenerator->generateRelativeUrl( 'list-comments.html' ),
-					'id' => 'comments-list',
-					'label' => 'menu_item_donation_comments'
-				],
-				[
-					'url' => $urlGenerator->generateRelativeUrl( 'faq' ),
-					'id' => 'faq',
-					'label' => 'menu_item_faq'
-				],
-				[
-					'url' => $urlGenerator->generateRelativeUrl( 'use-of-funds' ),
-					'id' => 'use_of_resources',
-					'label' => 'menu_item_use_of_resources'
-				],
-				[
-					'url' => $urlGenerator->generateRelativeUrl( 'show-donation-form' ),
-					'id' => 'donation',
-					'label' => 'menu_item_donate'
-				],
-			];
-		} elseif ( $this->featureToggle->featureIsActive( 'campaigns.donation_form_design.default' ) ) {
-			return [
-				[
-					'url' => $urlGenerator->generateRelativeUrl( 'list-comments.html' ),
-					'id' => 'comments-list',
-					'label' => 'menu_item_donation_comments'
-				],
-				[
-					'url' => $urlGenerator->generateRelativeUrl( 'faq' ),
-					'id' => 'faq',
-					'label' => 'menu_item_faq'
-				],
-				[
-					'url' => $urlGenerator->generateRelativeUrl( 'use-of-funds' ),
-					'id' => 'use_of_resources',
-					'label' => 'menu_item_use_of_resources'
-				],
-				[
-					'url' => $urlGenerator->generateRelativeUrl( 'page', ['pageName' => 'Spendenquittung'] ),
-					'id' => 'donation_receipt',
-					'label' => 'menu_item_donation_receipt'
-				],
-			];
-		}
-		throw new UnknownChoiceDefinition( 'Design selection failure.' );
-	}
-
-	public function isFormScrollingActive(): bool {
-		if ( $this->featureToggle->featureIsActive( 'campaigns.donation_form_design.design_change' ) ) {
-			return false;
-		} elseif ( $this->featureToggle->featureIsActive( 'campaigns.donation_form_design.default' ) ) {
-			return true;
-		}
-		throw new UnknownChoiceDefinition( 'Design selection failure.' );
-	}
-
 	private function getSkinDirectory( string $skin ): string {
 		return 'skins/' . $skin . '/templates';
 	}

diff --git a/src/Factories/FunFunFactory.php b/src/Factories/FunFunFactory.php
@@ -712,9 +712,7 @@ private function getDefaultTwigVariables(): array {
 		return [
 			'honorifics' => $this->getHonorifics()->getList(),
 			'piwik' => $this->config['piwik'],
-			'locale' => $this->config['locale'],
-			'main_css' => $this->getChoiceFactory()->getMainCss(),
-			'main_menu' => $this->getChoiceFactory()->getMainMenuItems( $this->getUrlGenerator() )
+			'locale' => $this->config['locale']
 		];
 	}
 
@@ -1362,9 +1360,6 @@ private function getDonationFormTemplate(): TwigTemplate {
 				'paymentTypes' => $this->getPaymentTypesSettings()->getEnabledForDonation(),
 				'presetAmounts' => $this->getPresetAmountsSettings( 'donations' ),
 				'messages' => $this->getMessages(),
-				'featureToggle' => [
-					'formScrolling' => $this->getChoiceFactory()->isFormScrollingActive()
-				]
 			]
 		);
 	}