feat: added thanks page and success events for causes

GD-162
kiva · Nov 17, 2021 · 9fef538 · 9fef538
1 parent d81c22c
commit 9fef538
Show file tree

Hide file tree

Showing 5 changed files with 135 additions and 73 deletions.
diff --git a/src/components/Causes/CausesDropInPaymentWrapper.vue b/src/components/Causes/CausesDropInPaymentWrapper.vue
@@ -136,29 +136,26 @@ export default {
 						// Payment method failed, unselect attempted payment method
 						this.$refs.braintreeDropInInterface.btDropinInstance.clearSelectedPaymentMethod();
 						// exit
+						this.submitting = false;
 						return kivaBraintreeResponse;
 					}
-					console.log(kivaBraintreeResponse, paymentType);
 
-					// TODO handle success and emit success event
 					// Transaction is complete
 					// eslint-disable-next-line max-len
-					// const subscriptionCreatedSuccessfully = kivaBraintreeResponse.data?.my?.createMonthlyGoodSubscription;
+					const causeSignUpSuccess = kivaBraintreeResponse.data?.id;
 
-					// if (subscriptionCreatedSuccessfully) {
-					// 	// fire BT Success event
-					// 	this.$kvTrackEvent(
-					// 		this.action,
-					// 		`${paymentType} Braintree DropIn Subscription Payment`,
-					// 		`${this.action.toLowerCase()}-monthly-good-submit`
-					// 	);
+					if (causeSignUpSuccess) {
+						// fire BT Success event
+						this.$kvTrackEvent(
+							this.action,
+							`${paymentType} Braintree DropIn Causes Payment`,
+							`${this.action.toLowerCase()}-causes-submit`
+						);
 
-					// 	// Complete transaction handles additional analytics + redirect
-					// 	this.$emit('complete-transaction', paymentType);
-					// }
+						// Complete transaction handles additional analytics + redirect
+						this.$emit('complete-transaction', paymentType);
+					}
 					return kivaBraintreeResponse;
-				}).finally(() => {
-					this.submitting = false;
 				});
 			}
 		},
@@ -170,6 +167,5 @@ export default {
 			return '';
 		}
 	}
-
 };
 </script>
diff --git a/src/graphql/mutation/createSubscription.graphql b/src/graphql/mutation/createSubscription.graphql
@@ -17,25 +17,6 @@ mutation createSubscription($nonce: String!, $deviceData: String!, $amount: Mone
 				}
 			}
 		) {
-			amount
-			category {
-				id
-				description
-				name
-				enabled
-				savedSearch {
-					id
-				}
-				subscriptionType
-			}
-			donation
 			id
-			noteSize
-			userId
-			schedule {
-				dayOfMonth
-				lendingDelay
-				period
-			}
 		}
 }
diff --git a/src/pages/Causes/SignupForm.vue b/src/pages/Causes/SignupForm.vue
@@ -31,37 +31,39 @@
 						@submit.prevent=""
 						novalidate
 					>
-						<label
-							class="tw-text-h4"
-							for="amount"
-						>
-							Monthly Amount
-						</label>
-						<kv-select
-							class="tw-w-full tw-mt-2"
-							id="amount"
-							v-model="amount"
-						>
-							<option
-								v-for="(option, index) in mgAmountOptions"
-								:value="option.value"
-								:key="index"
+						<fieldset :disabled="true">
+							<label
+								class="tw-text-h4"
+								for="amount"
 							>
-								{{ option.label }}
-							</option>
-						</kv-select>
+								Monthly Amount
+							</label>
+							<kv-select
+								class="tw-w-full tw-mt-2"
+								id="amount"
+								v-model="amount"
+							>
+								<option
+									v-for="(option, index) in mgAmountOptions"
+									:value="option.value"
+									:key="index"
+								>
+									{{ option.label }}
+								</option>
+							</kv-select>
 
-						<p class="tw-mt-2 tw-text-base">
-							<!-- eslint-disable-next-line max-len -->
-							Your subscription will renew automatically every month on the 1st. You can cancel any time.
-						</p>
+							<p class="tw-mt-2 tw-text-base">
+								<!-- eslint-disable-next-line max-len -->
+								Your subscription will renew automatically every month on the 1st. You can cancel any time.
+							</p>
 
-						<causes-drop-in-payment-wrapper
-							class="tw-mt-4 tw-mx-auto"
-							:amount="amount"
-							:category="cause"
-							@complete-transaction="completeCausesBraintree"
-						/>
+							<causes-drop-in-payment-wrapper
+								class="tw-mt-4 tw-mx-auto"
+								:amount="amount"
+								:category="cause"
+								@complete-transaction="completeCausesBraintree"
+							/>
+						</fieldset>
 					</form>
 				</div>
 			</kv-grid>
@@ -136,21 +138,19 @@ export default {
 					label: `${numeral(100).format('$0,0')}`,
 				},
 			],
-			amount: 5
+			amount: 5,
+			success: false
 		};
 	},
 	inject: ['apollo'],
 	methods: {
 		completeCausesBraintree() {
-			// TODO handle success and send to thanks page
-			// this.showLoadingOverlay = true;
-			// this.$kvTrackEvent('Registration', 'successful-auto-deposit-reg', 'register-auto-deposit');
-			// // Send to thanks page
-			// this.$router.push({
-			// 	path: `${this.$route.path}/thanks`,
-			// }).finally(() => {
-			// 	this.showLoadingOverlay = false;
-			// });
+			// disable form inputs while routing to thanks
+			this.success = true;
+			this.$kvTrackEvent('Registration', 'successful-causes-reg', 'register-causes');
+			this.$router.push({
+				path: 'causes/thanks',
+			});
 		},
 	},
 };

diff --git a/src/pages/Causes/Thanks.vue b/src/pages/Causes/Thanks.vue
@@ -0,0 +1,81 @@
+<template>
+	<section class="tw-relative">
+		<kv-page-container class="tw-mt-4 md:tw-mt-6 lg:tw-mt-8">
+			<kv-grid class="tw-grid-cols-12">
+				<div :class="[
+					'tw-px-2',
+					'tw-mb-2',
+					'tw-col-span-12',
+					'md:tw-col-span-8',
+					'md:tw-col-start-3',
+					'lg:tw-col-span-6',
+					'lg:tw-col-start-4'
+				]"
+				>
+					<img
+						class="tw-h-16 tw-w-16 tw-mx-auto tw-mb-4"
+						:src="causesIconImgRequire(`./heart-icon.svg`)"
+					>
+					<h1 class="tw-text-center">
+						We're excited you're here!
+					</h1>
+					<p class="tw-text-h3 tw-text-secondary tw-mt-3 tw-text-center tw-px-2.5 tw-mb-4">
+						Check the app for regular inspiration and updates on your impact.
+					</p>
+					<div class="tw-m-auto tw-max-w-[220px]">
+						<a
+							class="tw-inline-block tw-mb-3 tw-w-full"
+							:href="appStoreUrl"
+							rel="noopener"
+							v-kv-track-event="['global', 'click-app-badge-footer', 'App Store']"
+						>
+							<img
+								class="tw-w-full"
+								src="@/assets/icons/app-store.svg"
+								loading="lazy"
+								alt="Check out our new app on the App Store"
+							>
+						</a>
+						<a
+							class="tw-inline-block tw-mb-3 tw-w-full"
+							:href="playStoreUrl"
+							target="_blank"
+							rel="noopener"
+							v-kv-track-event="['global', 'click-app-badge-footer', 'Google Store']"
+						>
+							<img
+								class="tw-w-full"
+								src="@/assets/icons/play-store.svg"
+								loading="lazy"
+								alt="Check out our new app on the Play Store"
+							>
+						</a>
+					</div>
+				</div>
+			</kv-grid>
+		</kv-page-container>
+	</section>
+</template>
+
+<script>
+
+import KvGrid from '~/@kiva/kv-components/vue/KvGrid';
+import KvPageContainer from '~/@kiva/kv-components/vue/KvPageContainer';
+
+const causesIconImgRequire = require.context('@/assets/images/causes-icons/', true);
+
+export default {
+	components: {
+		KvGrid,
+		KvPageContainer,
+	},
+	data() {
+		return {
+			causesIconImgRequire,
+			appStoreUrl: 'https://apps.apple.com/app/id1453093374',
+			playStoreUrl: 'https://play.google.com/store/apps/details?id=org.kiva.lending'
+		};
+	},
+	inject: ['apollo'],
+};
+</script>
diff --git a/src/router/routes.js b/src/router/routes.js
@@ -58,6 +58,10 @@ export default [
 				props: route => ({
 					cause: route.query.cause
 				})
+			},
+			{
+				path: 'thanks',
+				component: () => import('@/pages/Causes/Thanks'),
 			}
 		]
 	},