Add description for each membership frequency #3

cartable.php

@@ -308,19 +308,29 @@ function cartable_get_membership_vars($vars){
         }
     }
 
-
+    // TODO:
+    // Maque title, description and label editable in settings
     $FrequenciesData = [
         "oneoff" => [
             "unit" => null,
             "is_recur" => false,
+            "title" => "Cotisation annuelle",
+            "description" => "Payez en 1 seul paiement annuel. Votre adhésion prendra fin au %s, vous devez alors la renouveler.",
+            "label" => "Cotisation annuelle après déduction fiscale : %s",
         ],
         "yearly" => [
             "unit" => "year",
             "is_recur" => true,
+            "title" => "Cotisation annuelle - renouvellement automatique",
+            "description" => "Payez en 1 paiement annuel. Votre adhésion sera automatiquement renouvelée au %s.",
+            "label" => "Cotisation annuelle après déduction fiscale : %s",
         ],
         "monthly" => [
             "unit" => "month",
             "is_recur" => true,
+            "title" => "Cotisation mensuelle - renouvellement automatique",
+            "description" => "Réglez votre adhésion chaque mois. Votre adhésion est renouvelée automatiquement chaque année le %s. Vous pouvez à tout moment choisir de suspendre, supprimer ou modifier votre cotisation.",
+            "label" => "Cotisation annuelle après déduction fiscale : %s",
         ],
     ];
 
@@ -333,6 +343,9 @@ function cartable_get_membership_vars($vars){
             'code' => $vars['currency'],
             'symbol' => $vars['currencySymbol'],
         ],
+        'i18n' => [
+            'dateformat' => 'dd MM',
+        ]
     ];
     if(civicrm_api3('Setting', 'getvalue', [
         'return' => "value",

src/js/membership.js

@@ -7,6 +7,8 @@ var membershipType;
 var Frequency;
 var Frequencies;
 var FrequencySelector;
+var MembershipStartDate;
+var membershipEndDate;
 
 const cartable_pick_membership_amount = function(){
     var SalarySelect = CRM.$('#cartable-membership-salary-select');
@@ -14,6 +16,7 @@ const cartable_pick_membership_amount = function(){
 
     var FrequencyControl = CRM.$('.cartable-membership-frequency-selector input[type=radio]:checked');
     var frequency_name = FrequencyControl.val();
+    CRM.$('.cartable-membership-frequency-amount').text( AnnualContributionAmount+cartable.Membership.currency.symbol );
     if(!frequency_name || typeof cartable.Membership.FrequenciesData[frequency_name]==='undefined'){
         return;
     }
@@ -29,10 +32,14 @@ const cartable_pick_membership_amount = function(){
     }
 
     ToPayAmount = AnnualContributionAmount;
-
     otherAmountField.val(ToPayAmount);
 }
 
+function cartable_print_date(datestring){
+    var month_day = datestring.padStart(4, '0')
+    return CRM.utils.formatDate(new Date().getFullYear()+'-'+month_day.substr(0,2)+'-'+month_day.substr(2,2), cartable.Membership.i18n.dateformat);
+}
+
 const cartable_reset_membership_amount = function(){
     CRM.$('#cartable-membership-selector').remove();
     var MembershipSelector = CRM.$('<div>')
@@ -44,6 +51,9 @@ const cartable_reset_membership_amount = function(){
     Syndicate = cartable.Syndicates.Syndicates[SyndicateId];
     membershipType = cartable.Syndicates.IndexedMembershipTypes[SyndicateId];
 
+    MembershipStartDate = cartable_print_date(typeof membershipType.fixed_period_start_day !== 'undefined' ? membershipType.fixed_period_start_day : '101');
+    membershipEndDate = cartable_print_date(typeof membershipType.fixed_period_rollover_day !== 'undefined' ? membershipType.fixed_period_rollover_day : '1231');
+
     MembershipSelector.append(
         CRM.$('<h3>')
         .addClass('cartable-membership-title')
@@ -91,8 +101,9 @@ const cartable_reset_membership_amount = function(){
         Frequencies = Syndicate.PaymentFrequency;
     }
     Frequencies.forEach((frequency) => {
+        FrequencyData = cartable.Membership.FrequenciesData[frequency];
         var FrequencyItem = CRM.$('<div>')
-            .addClass('cartable-membership-frequency-selector')
+            .addClass('cartable-membership-frequency-selector cartable-membership-frequency-selector-'+frequency)
             .append([
                     CRM.$('<input>')
                     .attr('name', 'cartable-membership-frequency')
@@ -104,7 +115,16 @@ const cartable_reset_membership_amount = function(){
                 ,
                     CRM.$('<label>')
                     .attr('for', 'cartable-membership-frequency-'+frequency)
-                    .text('I pay :'+frequency)
+                    .addClass('cartable-membership-frequency-description')
+                    .text(FrequencyData.title)
+                ,
+                    CRM.$('<div>')
+                    .addClass('cartable-membership-frequency-description')
+                    .html(FrequencyData.description.replace('%s', '<span class="cartable-membership-frequency-startdate">'+membershipEndDate+'</span>'))
+                ,
+                    CRM.$('<div>')
+                    .addClass('cartable-membership-frequency-label')
+                    .html(FrequencyData.label.replace('%s', '<span class="cartable-membership-frequency-amount"></span>'))
                 ,
             ])
         ;