Merge pull request #54 from commonknowledge/bug-fixes

Bug fixes

Author: conatus

packages/join-block/join.php

@@ -3,7 +3,7 @@
 /**
  * Plugin Name:     Common Knowledge Join Flow
  * Description:     Common Knowledge join flow plugin.
- * Version:         1.3.11
+ * Version:         1.3.12
  * Author:          Common Knowledge <hello@commonknowledge.coop>
  * Text Domain:     common-knowledge-join-flow
  * License: GPLv2 or later

packages/join-block/readme.txt

@@ -4,7 +4,7 @@ Tags: membership, subscription, join
 Contributors: commonknowledgecoop
 Requires at least: 5.4
 Tested up to: 6.8
-Stable tag: 1.3.11
+Stable tag: 1.3.12
 Requires PHP: 8.1
 License: GPLv2 or later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
@@ -107,6 +107,13 @@ Need help? Contact us at [hello@commonknowledge.coop](mailto:hello@commonknowled
 
 == Changelog ==
 
+= 1.3.12 =
+* Hide price display for zero-price membership tiers (global setting)
+* Block-level option to completely hide address section
+* Customisable sidebar heading (global + per-block override)
+* Customisable membership stage label (global + per-block override)
+* Customisable loading spinner verb (global + per-block override)
+* All new text customizations include sensible fallback defaults for backwards compatibility
 = 1.3.11 =
 * Fix bug with display of Direct Debit information when we have a zero priced tier.
 = 1.3.10 =

packages/join-block/src/Blocks.php

@@ -175,6 +175,8 @@ private static function registerJoinFormBlock()
                 Field::make('separator', 'ck_join_form', 'CK Join Form'),
                 $joined_page_association,
                 Field::make('checkbox', 'require_address')->set_default_value(true),
+                Field::make('checkbox', 'hide_address')
+                    ->set_help_text('Check to completely hide the address section from the form.'),
                 Field::make('checkbox', 'require_phone_number')->set_default_value(true),
                 Field::make('checkbox', 'ask_for_additional_donation'),
                 Field::make('checkbox', 'hide_home_address_copy')
@@ -194,6 +196,12 @@ private static function registerJoinFormBlock()
                 $custom_membership_plans,
                 Field::make('text', 'custom_webhook_url')
                     ->set_help_text('Leave blank to use the default Join Complete webhook from the settings page.'),
+                Field::make('text', 'custom_sidebar_heading')
+                    ->set_help_text('Leave blank to use the default from settings page.'),
+                Field::make('text', 'custom_membership_stage_label')
+                    ->set_help_text('Leave blank to use the default from settings page.'),
+                Field::make('text', 'custom_joining_verb')
+                    ->set_help_text('Leave blank to use the default from settings page (e.g., "Joining").'),
 
             ));
         $join_form_block->set_render_callback(function ($fields, $attributes, $inner_blocks) {
@@ -431,6 +439,33 @@ function ($o) {
             return $field;
         }, $fields['custom_fields'] ?? []);
 
+        // Determine sidebar heading
+        $sidebar_heading = $fields['custom_sidebar_heading'] ?? '';
+        if (!$sidebar_heading) {
+            $sidebar_heading = Settings::get("JOIN_FORM_SIDEBAR_HEADING");
+        }
+        if (!$sidebar_heading) {
+            $sidebar_heading = "Join Us";
+        }
+
+        // Determine membership stage label
+        $membership_stage_label = $fields['custom_membership_stage_label'] ?? '';
+        if (!$membership_stage_label) {
+            $membership_stage_label = Settings::get("MEMBERSHIP_STAGE_LABEL");
+        }
+        if (!$membership_stage_label) {
+            $membership_stage_label = "Your Membership";
+        }
+
+        // Determine joining verb
+        $joining_verb = $fields['custom_joining_verb'] ?? '';
+        if (!$joining_verb) {
+            $joining_verb = Settings::get("JOINING_VERB");
+        }
+        if (!$joining_verb) {
+            $joining_verb = "Joining";
+        }
+
         $environment = [
             'HOME_URL' => $homeUrl,
             "WP_REST_API" => get_rest_url(),
@@ -455,20 +490,25 @@ function ($o) {
             "HEAR_ABOUT_US_DETAILS" => Settings::get("HEAR_ABOUT_US_DETAILS"),
             "HEAR_ABOUT_US_HEADING" => Settings::get("HEAR_ABOUT_US_HEADING"),
             "HEAR_ABOUT_US_OPTIONS" => $hearAboutUsOptions,
+            "HIDE_ZERO_PRICE_DISPLAY" => Settings::get("HIDE_ZERO_PRICE_DISPLAY"),
             "HOME_ADDRESS_COPY" => wpautop(Settings::get("HOME_ADDRESS_COPY")),
             "MEMBERSHIP_TIERS_HEADING" => Settings::get("MEMBERSHIP_TIERS_HEADING"),
             "MEMBERSHIP_TIERS_COPY" => wpautop(Settings::get("MEMBERSHIP_TIERS_COPY")),
             "MINIMAL_JOIN_FORM" => $block_mode === self::MINIMAL_BLOCK_MODE,
             "IS_UPDATE_FLOW" => $fields['is_update_flow'] ?? false,
             "INCLUDE_SKIP_PAYMENT_BUTTON" => $fields['include_skip_payment_button'] ?? false,
+            "JOIN_FORM_SIDEBAR_HEADING" => $sidebar_heading,
+            "JOINING_VERB" => $joining_verb,
             "MEMBERSHIP_PLANS" => $membership_plans_prepared,
+            "MEMBERSHIP_STAGE_LABEL" => $membership_stage_label,
             "ORGANISATION_NAME" => Settings::get("ORGANISATION_NAME"),
             "ORGANISATION_BANK_NAME" => Settings::get("ORGANISATION_BANK_NAME"),
             "ORGANISATION_EMAIL_ADDRESS" => Settings::get("ORGANISATION_EMAIL_ADDRESS"),
             "PASSWORD_PURPOSE" => wpautop(Settings::get("PASSWORD_PURPOSE")),
             "POSTCODE_ADDRESS_PROVIDER" => Settings::get("POSTCODE_ADDRESS_PROVIDER"),
             "PRIVACY_COPY" => wpautop(Settings::get("PRIVACY_COPY")),
             "REQUIRE_ADDRESS" => $fields["require_address"] ?? false,
+            "HIDE_ADDRESS" => $fields["hide_address"] ?? false,
             "REQUIRE_PHONE_NUMBER" => $fields["require_phone_number"] ?? false,
             "SENTRY_DSN" => Settings::get("SENTRY_DSN"),
             "STRIPE_DIRECT_DEBIT" => Settings::get("STRIPE_DIRECT_DEBIT"),

packages/join-block/src/Settings.php

@@ -53,6 +53,8 @@ public static function init()
             Field::make('checkbox', 'collect_county'),
             Field::make('checkbox', 'collect_phone_and_email_contact_consent')
                 ->set_help_text('May or may not be necessary for your organisation to be given this explicit consent'),
+            Field::make('checkbox', 'hide_zero_price_display', 'Hide price display for zero-price items')
+                ->set_help_text('When enabled, membership tiers with a price of zero will not show a price label'),
             Field::make('checkbox', 'create_auth0_account'),
             Field::make('checkbox', 'use_zetkin', 'Use Zetkin'),
             Field::make('checkbox', 'use_gocardless', 'Use GoCardless'),
@@ -121,10 +123,19 @@ public static function init()
             Field::make('rich_text', 'privacy_copy')
                 ->set_help_text("E.G. We will always do our very best to keep the information we hold about you safe and secure."),
             Field::make('text', 'membership_tiers_heading')
-                ->set_default_value("Choose the plan that’s right for you"),
+                ->set_default_value("Choose the plan that's right for you"),
             Field::make('rich_text', 'membership_tiers_copy')
                 ->set_help_text("E.G. Choose tier X if you are Y, otherwise choose tier Z."),
             Field::make('text', 'subscription_day_of_month_copy', 'Only valid for monthly subscriptions')->set_default_value("Day of month to take payment"),
+            Field::make('text', 'join_form_sidebar_heading')
+                ->set_default_value("Join Us")
+                ->set_help_text("The heading shown in the sidebar progress steps"),
+            Field::make('text', 'membership_stage_label')
+                ->set_default_value("Your Membership")
+                ->set_help_text("The label for the membership selection stage"),
+            Field::make('text', 'joining_verb')
+                ->set_default_value("Joining")
+                ->set_help_text("The verb used in the loading spinner (e.g., 'Joining Organisation Name')"),
         ];
         $integration_fields = [
             Field::make('separator', 'zetkin', 'Zetkin'),

packages/join-flow/src/app.tsx

@@ -21,7 +21,7 @@ import { PaymentDetailsPage } from "./pages/payment-details.page";
 import { Stager } from "./components/stager";
 import { FormSchema, getPaymentPlan, getTestDataIfEnabled } from "./schema";
 import { ConfirmationPage } from "./pages/confirm.page";
-import { get as getEnv, getPaymentMethods } from "./env";
+import { get as getEnv, getStr as getEnvStr, getPaymentMethods } from "./env";
 import { usePostResource } from "./services/rest-resource.service";
 import gocardless from "./images/gocardless.svg";
 import chargebee from "./images/chargebee.png";
@@ -37,19 +37,6 @@ interface Stage {
   breadcrumb: boolean;
 }
 
-let stages: Stage[] = [
-  { id: "enter-details", label: "Your Details", breadcrumb: true },
-  { id: "plan", label: "Your Membership", breadcrumb: true },
-  { id: "donation", label: "Can you chip in?", breadcrumb: false },
-  { id: "payment-details", label: "Payment", breadcrumb: true },
-  { id: "payment-method", label: "Payment", breadcrumb: false },
-  { id: "confirm", label: "Confirm", breadcrumb: false }
-];
-
-if (getEnv("IS_UPDATE_FLOW")) {
-  stages = stages.filter((s) => s.id !== "enter-details");
-}
-
 // Redirect to confirm page if ?gocardless_success === "true"
 // because that is a redirect from GoCardless
 // Also require a billing request ID to be present.
@@ -72,6 +59,18 @@ let shouldRedirectToConfirm =
 const stripePromise = loadStripe(getEnv("STRIPE_PUBLISHABLE_KEY"));
 
 const App = () => {
+  let stages: Stage[] = [
+    { id: "enter-details", label: "Your Details", breadcrumb: true },
+    { id: "plan", label: getEnvStr("MEMBERSHIP_STAGE_LABEL"), breadcrumb: true },
+    { id: "donation", label: "Can you chip in?", breadcrumb: false },
+    { id: "payment-details", label: "Payment", breadcrumb: true },
+    { id: "payment-method", label: "Payment", breadcrumb: false },
+    { id: "confirm", label: "Confirm", breadcrumb: false }
+  ];
+
+  if (getEnv("IS_UPDATE_FLOW")) {
+    stages = stages.filter((s) => s.id !== "enter-details");
+  }
   const [data, setData] = useState(getInitialState);
   const [blockingMessage, setBlockingMessage] = useState<string | null>(null);
 
@@ -282,7 +281,7 @@ const App = () => {
     <>
       <RouterContext.Provider value={router}>
         <div className="progress-steps">
-          <h6>Join Us</h6>
+          <h6>{getEnvStr("JOIN_FORM_SIDEBAR_HEADING")}</h6>
           <div className="progress-steps__secure">
             <p>
               🔒 Secure payment with

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

@@ -3,6 +3,7 @@ import { Form, Button } from "react-bootstrap";
 import { Controller, UseFormMethods } from "react-hook-form";
 import { PageState, useCurrentRouter } from "../services/router.service";
 import { currencyCodeToSymbol } from "../schema";
+import { get as getEnv } from "../env";
 
 interface ContinueButtonProps {
   disabled?: boolean;
@@ -101,6 +102,8 @@ export const PlanRadioPanel: FC<PlanRadioPanelProps> = ({
   name,
   className = ""
 }) => {
+  const hideZeroPriceDisplay = Boolean(getEnv("HIDE_ZERO_PRICE_DISPLAY"));
+
   return (
     <Controller
       name={name}
@@ -120,6 +123,9 @@ export const PlanRadioPanel: FC<PlanRadioPanelProps> = ({
           amount: number;
           frequency: string;
         }) => {
+          if (hideZeroPriceDisplay && amount === 0) {
+            return "";
+          }
           const currencySymbol = currencyCodeToSymbol(currency);
           return `${currencySymbol}${amount}, ${frequency}`;
         };
@@ -177,7 +183,9 @@ export const PlanRadioPanel: FC<PlanRadioPanelProps> = ({
                     </Form.Control>
 
                     {!checked || !currentPlan.allowCustomAmount ? (
-                      `${currencyCodeToSymbol(currentPlan.currency)}${currentPlan.amount}`
+                      (hideZeroPriceDisplay && currentPlan.amount === 0) 
+                        ? ""
+                        : `${currencyCodeToSymbol(currentPlan.currency)}${currentPlan.amount}`
                     ) : (
                       <div
                         className={

packages/join-flow/src/env.ts

@@ -19,9 +19,14 @@ interface StaticEnv {
     HEAR_ABOUT_US_DETAILS: string;
     HEAR_ABOUT_US_HEADING: string;
     HEAR_ABOUT_US_OPTIONS: string[];
+    HIDE_ADDRESS: boolean;
     HIDE_HOME_ADDRESS_COPY: boolean;
+    HIDE_ZERO_PRICE_DISPLAY: boolean;
     HOME_ADDRESS_COPY: string;
+    JOIN_FORM_SIDEBAR_HEADING: string;
+    JOINING_VERB: string;
     MEMBERSHIP_PLANS: object[];
+    MEMBERSHIP_STAGE_LABEL: string;
     MEMBERSHIP_TIERS_HEADING: string;
     MEMBERSHIP_TIERS_COPY: string;
     ORGANISATION_NAME: string;
@@ -83,9 +88,14 @@ const staticEnv: StaticEnv = {
     HEAR_ABOUT_US_DETAILS: process.env.REACT_APP_HEAR_ABOUT_US_DETAILS || '',
     HEAR_ABOUT_US_HEADING: process.env.REACT_APP_HEAR_ABOUT_US_HEADING || '',
     HEAR_ABOUT_US_OPTIONS: (process.env.REACT_APP_HEAR_ABOUT_US_OPTIONS || '').split('.').map(i => i.trim()).filter(Boolean),
+    HIDE_ADDRESS: parseBooleanEnvVar("REACT_APP_HIDE_ADDRESS"),
     HIDE_HOME_ADDRESS_COPY: parseBooleanEnvVar("REACT_APP_HIDE_HOME_ADDRESS_COPY"),
+    HIDE_ZERO_PRICE_DISPLAY: parseBooleanEnvVar("REACT_APP_HIDE_ZERO_PRICE_DISPLAY"),
     HOME_ADDRESS_COPY: process.env.REACT_APP_HOME_ADDRESS_COPY || '',
+    JOIN_FORM_SIDEBAR_HEADING: process.env.REACT_APP_JOIN_FORM_SIDEBAR_HEADING || 'Join Us',
+    JOINING_VERB: process.env.REACT_APP_JOINING_VERB || 'Joining',
     MEMBERSHIP_PLANS: JSON.parse(process.env.REACT_APP_MEMBERSHIP_PLANS || '[]') as object[],
+    MEMBERSHIP_STAGE_LABEL: process.env.REACT_APP_MEMBERSHIP_STAGE_LABEL || 'Your Membership',
     MEMBERSHIP_TIERS_HEADING: process.env.REACT_APP_MEMBERSHIP_TIERS_HEADING || '',
     MEMBERSHIP_TIERS_COPY: process.env.REACT_APP_MEMBERSHIP_TIERS_COPY || '',
     MINIMAL_JOIN_FORM: parseBooleanEnvVar("REACT_APP_MINIMAL_JOIN_FORM"),

packages/join-flow/src/index.tsx

@@ -24,7 +24,7 @@ const init = () => {
   const sentryDsn = getEnvStr("SENTRY_DSN")
   Sentry.init({
     dsn: sentryDsn,
-    release: "1.3.11"
+    release: "1.3.12"
   });
 
   if (getEnv('USE_CHARGEBEE')) {

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

@@ -7,7 +7,7 @@ import { FormSchema, getPaymentFrequency, getPaymentPlan } from "../schema";
 import { usePostResource } from "../services/rest-resource.service";
 import { upperFirst } from "lodash-es";
 
-import { get as getEnv } from '../env';
+import { get as getEnv, getStr as getEnvStr } from '../env';
 import { useCurrentRouter } from "../services/router.service";
 
 export const ConfirmationPage: StagerComponent<FormSchema> = ({
@@ -19,6 +19,7 @@ export const ConfirmationPage: StagerComponent<FormSchema> = ({
   const organisationEmailAddress = getEnv('ORGANISATION_EMAIL_ADDRESS');
   const organisationMailToLink = `mailto:${organisationEmailAddress}`;
   const chargebeeSiteName = getEnv('CHARGEBEE_SITE_NAME');
+  const joiningVerb = getEnvStr('JOINING_VERB');
 
   const form = useForm();
   const router = useCurrentRouter();
@@ -39,7 +40,7 @@ export const ConfirmationPage: StagerComponent<FormSchema> = ({
       <div className="spinner-border" role="status">
         <span className="sr-only">Please wait</span>
       </div>
-      <div className="mt-3">Joining {organisationName}</div>
+      <div className="mt-3">{joiningVerb} {organisationName}</div>
     </div>
   );
 

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

@@ -19,6 +19,7 @@ const addressLookupFormSchema = yup.object().shape({
 });
 
 const requireAddress = Boolean(getEnv("REQUIRE_ADDRESS"));
+const hideAddress = Boolean(getEnv("HIDE_ADDRESS"));
 const homeAddressCopy = getEnvStr("HOME_ADDRESS_COPY");
 const passwordPurpose = getEnvStr("PASSWORD_PURPOSE");
 const privacyCopy = getEnvStr("PRIVACY_COPY");
@@ -149,15 +150,16 @@ export const DetailsPage: StagerComponent<FormSchema> = ({
         </section>
       ) : null}
 
-      <section className="form-section">
-        <h2>Home address</h2>
-        {getEnv("HIDE_HOME_ADDRESS_COPY") ? (
-          <div
-            className="text-secondary"
-            dangerouslySetInnerHTML={{ __html: homeAddressCopy }}
-          ></div>
-        ) : null}
-        {usePostcodeLookup ? (
+      {!hideAddress ? (
+        <section className="form-section">
+          <h2>Home address</h2>
+          {getEnv("HIDE_HOME_ADDRESS_COPY") ? (
+            <div
+              className="text-secondary"
+              dangerouslySetInnerHTML={{ __html: homeAddressCopy }}
+            ></div>
+          ) : null}
+          {usePostcodeLookup ? (
           <>
             <FormItem
               label="Postcode"
@@ -271,7 +273,8 @@ export const DetailsPage: StagerComponent<FormSchema> = ({
             </FormItem>
           </div>
         </Collapse>
-      </section>
+        </section>
+      ) : null}
 
       {customFields.length ? (
         <section className="form-section">