Merge pull request #46 from commonknowledge/feat/stripe-in-main-form

feat: add Stripe to main join flow block

packages/join-block/src/Services/JoinService.php

@@ -175,6 +175,32 @@ private static function tryHandleJoin($data)
         $data['gocardlessMandate'] = $subscription ? $subscription->links->mandate : null;
         $data['gocardlessCustomer'] = $subscription ? $subscription->links->customer : null;
 
+        if (Settings::get("USE_STRIPE")) {
+            $joinBlockLog->info('Subscribing with Stripe', [
+                "email" => $data['email'],
+                "membershipPlan" => $data['membershipPlan'],
+                "paymentToken" => $data['paymentToken']
+            ]);
+
+            StripeService::initialise();
+            [$customer, $newCustomer] = StripeService::upsertCustomer($data['email']);
+            $subscription = StripeService::createSubscription($customer, $data['membershipPlan']);
+            $confirmedPaymentIntent = StripeService::confirmSubscriptionPaymentIntent($subscription, $data['paymentToken']);
+            StripeService::updateCustomerDefaultPaymentMethod($customer->id, $subscription->latest_invoice->payment_intent->payment_method);
+
+            $data['stripeStatus'] = $confirmedPaymentIntent->status;
+            $data['stripeNewCustomer'] = $newCustomer;
+            $data['stripeCustomer'] = $customer->toArray();
+            $data['stripeSubscription'] = $subscription->toArray();
+
+            $joinBlockLog->info("Subscribed with Stripe", [
+                "email" => $data['email'],
+                "customer" => $data['stripeCustomer'],
+                "newCustomer" => $data['stripeNewCustomer'],
+                "subscription" => $data['stripeSubscription']
+            ]);
+        }
+
         $subscriptionPlanId = '';
         if ($useChargebee && $customerResult) {
             $customer = $customerResult->customer();

packages/join-block/src/Settings.php

@@ -56,6 +56,7 @@ public static function init()
 
         $theme_fields = [
             Field::make('color', 'theme_primary_color', 'Primary Color')
+                ->set_default_value('#007bff')
                 ->set_help_text("The color of interactive elements, e.g. buttons"),
             Field::make('color', 'theme_gray_color', 'Gray Color')
                 ->set_default_value('#dfdcda')
@@ -215,7 +216,7 @@ public static function createMembershipPlansField($name = 'membership_plans')
             Field::make('text', 'amount', "Price")->set_required(true)->set_attribute('type', 'number')
                 ->set_help_text("Price without currency, e.g. 10"),
             Field::make('checkbox', 'allow_custom_amount', 'Allow users to change the amount')
-                ->set_help_text('This makes the above price a minimum.'),
+                ->set_help_text('This makes the above price a minimum. Not compatible with Stripe.'),
             $payment_frequency_select,
             $payment_currency_select,
             Field::make('text', 'description'),

packages/join-flow/package.json

@@ -68,6 +68,7 @@
     "@types/yup": "^0.29.7",
     "env-cmd": "^10.1.0",
     "gifsicle": "^5.0.0",
+    "prettier": "^3.3.3",
     "resolve-url-loader": "^3.1.1",
     "typescript": "^4.0.3"
   }

packages/join-flow/scss/theme.scss

@@ -11,7 +11,7 @@ $black: var(--wp--preset--color--black, #212529);
 $gray: var(--ck-join-form-gray-color, --wp--preset--color--cyan-bluish-gray, #dfdcda);
 $background: var(--ck-join-form-background-color, --wp--preset--color--base, #f4f1ee);
 
-$primary: var(--ck-join-form-primary-color, --wp--preset--color--accent, #00643b);
+$primary: var(--ck-join-form-primary-color, --wp--preset--color--accent, #007bff);
 $primary-focus: native-rgb(from $primary r g b, 0.6);
 $danger: var(--wp--preset--color--accent-5, #e3220c);
 

packages/join-flow/src/app.tsx

@@ -25,6 +25,7 @@ import { get as getEnv, getPaymentMethods } from "./env";
 import { usePostResource } from "./services/rest-resource.service";
 import gocardless from "./images/gocardless.svg";
 import chargebee from "./images/chargebee.png";
+import stripe from "./images/stripe.png";
 
 import { Elements } from '@stripe/react-stripe-js';
 import MinimalJoinForm from "./components/minimal-join-flow";
@@ -160,12 +161,15 @@ const App = () => {
 
   const paymentProviderLogos = getPaymentMethods().map((method) => {
     return method === "directDebit" ?
-      <a href="https://gocardless.com" target="_blank">
-        <img key={method} alt="GoCardless" src={gocardless} width="100px" />
-      </a> :
-      <a href="https://chargebee.com" target="_blank">
-        <img key={method} alt="Chargebee" src={chargebee} width="100px" />
-      </a>
+      <a key={method} href="https://gocardless.com" target="_blank">
+        <img alt="GoCardless" src={gocardless} width="100px" />
+      </a> : getEnv("USE_CHARGEBEE") ?
+      <a key={method} href="https://chargebee.com" target="_blank">
+        <img alt="Chargebee" src={chargebee} width="100px" />
+      </a> : getEnv("USE_STRIPE") ?
+      <a key={method} href="https://stripe.com" target="_blank">
+        <img alt="Stripe" src={stripe} width="100px" />
+      </a> : null
   })
 
   const options = {
@@ -242,7 +246,7 @@ const getInitialState = (): FormSchema => {
   const paymentMethods = getPaymentMethods();
   const getDefaultState = () => ({
     membership: membershipPlans.length ? membershipPlans[0].value : "standard",
-    paymentMethod: paymentMethods.length ? paymentMethods[0] : "directDebit",
+    paymentMethod: paymentMethods.length ? paymentMethods[0] : null,
     // Default contact flags to true if not collecting consent, otherwise false
     contactByEmail: !getEnv('COLLECT_PHONE_AND_EMAIL_CONTACT_CONSENT'),
     contactByPhone: !getEnv('COLLECT_PHONE_AND_EMAIL_CONTACT_CONSENT'),

packages/join-flow/src/components/atoms.tsx

@@ -4,15 +4,17 @@ import { Controller, UseFormMethods } from "react-hook-form";
 import { PageState, useCurrentRouter } from "../services/router.service";
 
 interface ContinueButtonProps {
+  disabled?: boolean;
   text?: string;
   onClick?(event: React.MouseEvent<HTMLButtonElement>): void;
 }
 
-export const ContinueButton: FC<ContinueButtonProps> = ({ text, onClick }) => (
+export const ContinueButton: FC<ContinueButtonProps> = ({ disabled, text, onClick }) => (
   <Button
     className="form-section-addon d-flex align-items-center text-xxs"
     type="submit"
     onClick={onClick}
+    disabled={disabled}
   >
     {text || "Continue"}
   </Button>

packages/join-flow/src/env.ts

@@ -25,6 +25,7 @@ interface StaticEnv {
     USE_GOCARDLESS_API: boolean;
     USE_MAILCHIMP: boolean;
     USE_POSTCODE_LOOKUP: boolean;
+    USE_STRIPE: boolean;
     USE_TEST_DATA: boolean;
     WEBHOOK_UUID: string; // Connected to a URL in the wp_options table: `SELECT option_name FROM wp_options where option_value = :uuid`
     WP_REST_API: string;
@@ -66,6 +67,7 @@ const staticEnv: StaticEnv = {
     USE_GOCARDLESS_API: parseBooleanEnvVar("REACT_APP_USE_GOCARDLESS_API"),
     USE_MAILCHIMP: parseBooleanEnvVar("REACT_APP_USE_MAILCHIMP"),
     USE_POSTCODE_LOOKUP: parseBooleanEnvVar("REACT_APP_USE_POSTCODE_LOOKUP"),
+    USE_STRIPE: parseBooleanEnvVar("REACT_APP_USE_STRIPE"),
     USE_TEST_DATA: parseBooleanEnvVar("REACT_APP_USE_TEST_DATA"),
     WEBHOOK_UUID: process.env.WEBHOOK_UUID || '',
     WP_REST_API: '',
@@ -85,10 +87,13 @@ export const getStr = (envVar: keyof StaticEnv): string => {
 
 export const getPaymentMethods = () => {
     const paymentMethods = []
+    // TODO: refactor paymentMethods to be ["gocardless", "chargebee", "stripe"]
+    // Originally gocardless => directDebit, and chargebee => creditCard, but
+    // stripe does direct debit and credit card, so this distinction is wrong.
     if (get("USE_GOCARDLESS")) {
         paymentMethods.push("directDebit")
     }
-    if (get("USE_CHARGEBEE")) {
+    if (get("USE_CHARGEBEE") || get("USE_STRIPE")) {
         paymentMethods.push("creditCard")
     }
     return paymentMethods

packages/join-flow/src/pages/details.page.tsx

@@ -205,19 +205,19 @@ export const DetailsPage: StagerComponent<FormSchema> = ({
           <div>
             <FormItem label="Address line 1" name="addressLine1" form={form}>
               <Form.Control
-                autoComplete="address-line-1"
+                autoComplete="address-line1"
                 disabled={addressLookup.loading}
               />
             </FormItem>
             <FormItem label="Address line 2" name="addressLine2" form={form}>
               <Form.Control
-                autoComplete="address-line-2"
+                autoComplete="address-line2"
                 disabled={addressLookup.loading}
               />
             </FormItem>
             <FormItem label="City" name="addressCity" form={form}>
               <Form.Control
-                autoComplete="address-level1"
+                autoComplete="address-level2"
                 disabled={addressLookup.loading}
               />
             </FormItem>