select-schedule component

app/frontend/src/javascript/components/plan-card.tsx

@@ -82,7 +82,7 @@ const PlanCard: React.FC<PlanCardProps> = ({ plan, user, operator, onSelectPlan,
     onSelectPlan(plan);
   }
   return (
-    <div>
+    <div className="plan-card">
       <h3 className="title">{plan.base_name}</h3>
       <div className="content">
         {canBeScheduled() && <div className="wrap-monthly">

app/frontend/src/javascript/components/select-schedule.tsx

@@ -0,0 +1,48 @@
+/**
+ * This component is a switch enabling the users to choose if they want to pay by monthly schedule
+ * or with a one time payment
+ */
+
+import React, { Suspense } from 'react';
+import { useTranslation } from 'react-i18next';
+import { react2angular } from 'react2angular';
+import Switch from 'react-switch';
+import { IApplication } from '../models/application';
+import '../lib/i18n';
+
+declare var Application: IApplication;
+
+interface SelectScheduleProps {
+  show: boolean,
+  selected: boolean,
+  onChange: (selected: boolean) => void,
+  className: string,
+}
+
+const SelectSchedule: React.FC<SelectScheduleProps> = ({ show, selected, onChange, className }) => {
+  const { t } = useTranslation('shared');
+
+  return (
+    <div className="select-schedule">
+      {show && <div className={className}>
+        <label htmlFor="payment_schedule">{ t('app.shared.cart.monthly_payment') }</label>
+        <Switch checked={selected} id="payment_schedule" onChange={onChange} className="schedule-switch"></Switch>
+      </div>}
+    </div>
+  );
+}
+
+const SelectScheduleWrapper: React.FC<SelectScheduleProps> = ({ show, selected, onChange, className }) => {
+  const loading = (
+    <div className="fa-3x">
+      <i className="fas fa-circle-notch fa-spin" />
+    </div>
+  );
+  return (
+    <Suspense fallback={loading}>
+      <SelectSchedule show={show} selected={selected} onChange={onChange} className={className} />
+    </Suspense>
+  );
+}
+
+Application.Components.component('selectSchedule', react2angular(SelectScheduleWrapper, ['show', 'selected', 'onChange', 'className']));

app/frontend/src/stylesheets/app.components.scss

@@ -791,3 +791,11 @@
 input[type=date].form-control {
   line-height: 25px;
 }
+
+.select-schedule {
+  margin-top: 0.5em;
+  .schedule-switch {
+    vertical-align: middle;
+    margin-left: 1em;
+  }
+}

app/frontend/templates/shared/_cart.html

@@ -67,10 +67,7 @@
             <div class="text-base">{{ 'app.shared.cart.cost_of_the_subscription' | translate }} <span class="text-blue">{{selectedPlan.amount | currency}}</span></div>
           </div>
         </div>
-        <div ng-if="selectedPlan.monthly_payment">
-          <label for="payment_schedule" translate>{{ 'app.shared.cart.monthly_payment' }}</label>
-          <switch checked="schedule.requested_schedule" id="'payment_schedule'" on-change="togglePaymentSchedule" class-name="'v-middle'"></switch>
-        </div>
+        <select-schedule show="selectedPlan.monthly_payment" selected="schedule.requested_schedule" on-change="togglePaymentSchedule" />
       </div>
     </div>
 
@@ -85,10 +82,7 @@
     </div>
 
     <coupon show="!user.subscribed_plan" coupon="coupon.applied" total="totalNoCoupon" user-id="{{user.id}}"></coupon>
-    <div ng-if="selectedPlan.monthly_payment">
-      <label for="payment_schedule" translate>{{ 'app.shared.cart.monthly_payment' }}</label>
-      <switch checked="schedule.requested_schedule" id="'payment_schedule'" on-change="togglePaymentSchedule" class-name="'v-middle'"></switch>
-    </div>
+    <select-schedule show="selectedPlan.monthly_payment" selected="schedule.requested_schedule" on-change="togglePaymentSchedule" />
   </div>
 
   <div ng-if="schedule.payment_schedule">