[feature] Added setting to auto select the first plan

client/components/registration/registration.js

@@ -91,6 +91,7 @@ export default class Registration extends React.Component {
           logError(error, "Error while fetching plans");
         });
     }
+    this.autoSelectFirstPlan();
   }
 
   async componentDidUpdate(prevProps) {
@@ -333,10 +334,12 @@ export default class Registration extends React.Component {
   };
 
   getPlanSelection = () => {
+    const {registration} = this.props;
     const {plans, selectedPlan} = this.state;
+    const {auto_select_first_plan} = registration;
     let index = 0;
     return (
-      <div className="plans">
+      <div className={`plans ${auto_select_first_plan ? "hidden" : ""}`}>
         <p className="intro">{t`PLAN_SETTING_TXT`}.</p>
         {plans.map((plan) => {
           const currentIndex = String(index);
@@ -366,6 +369,13 @@ export default class Registration extends React.Component {
     );
   };
 
+  autoSelectFirstPlan = () => {
+    const {registration} = this.props;
+    if (registration.auto_select_first_plan) {
+      this.changePlan({target: {value: 0}});
+    }
+  };
+
   isPlanIdentityVerifier = () => {
     // If a payment is required, the plan is valid for identity verification
     const {selectedPlan, plans} = this.state;
@@ -960,6 +970,7 @@ Registration.propTypes = {
     }),
     additional_info_text: PropTypes.bool,
     links: PropTypes.object,
+    auto_select_first_plan: PropTypes.bool,
   }).isRequired,
   language: PropTypes.string.isRequired,
   orgSlug: PropTypes.string.isRequired,

client/components/registration/subscriptions.test.js

@@ -5,6 +5,7 @@ import {shallow} from "enzyme";
 import React from "react";
 import PropTypes from "prop-types";
 import {toast} from "react-toastify";
+import {cloneDeep} from "lodash";
 import {loadingContextValue} from "../../utils/loading-context";
 import tick from "../../utils/tick";
 import getConfig from "../../utils/get-config";
@@ -125,6 +126,29 @@ describe("test subscriptions", () => {
     expect(wrapper.find("input[name='plan_selection']").length).toBe(0);
   });
 
+  it("should auto select first plan when auto_select_first_plan is true", () => {
+    axios.mockImplementationOnce(() =>
+      Promise.resolve({
+        status: 201,
+        statusText: "ok",
+        data: plans,
+      }),
+    );
+    const customProps = cloneDeep(createTestProps());
+    customProps.settings.mobile_phone_verification = true;
+    customProps.registration.auto_select_first_plan = true;
+    wrapper = initShallow(customProps);
+    wrapper.instance().setState({plans, plansFetched: true});
+
+    expect(wrapper.find(".plans").exists()).toBe(true);
+    expect(wrapper.find(".plans").hasClass("hidden")).toBe(true);
+    expect(wrapper.state("selectedPlan")).toEqual(0);
+
+    expect(wrapper.find(".row.register").exists()).toBe(true);
+    expect(wrapper.find(".row.phone-number").exists()).toBe(true);
+    expect(wrapper.find(".row.email").exists()).toBe(true);
+  });
+
   it("should plan selection when multiple plans are present", () => {
     axios.mockImplementationOnce(() =>
       Promise.resolve({

organizations/default/default.yml

@@ -78,6 +78,7 @@ client:
         en: "Copyright"
 
     registration_form:
+      auto_select_first_plan: false
       input_fields:
         phone_number: {}
         username: