Rearrange the donate-form.html

For html and js clarity as per code review.

Issue #48613

lego @ c889cd6f

-Subproject commit ac7043380033d2bc2a1bb8392607d718c98c3326
+Subproject commit c889cd6f9ebe83056ef456061d8ece5183a66510

templates/donate-form.html

 <div>
   {{ this.intro }}
 </div>
-<script type="text/javascript" src="https://js.stripe.com/v3/"></script>
-<script type="text/javascript" src="https://www.paypal.com/sdk/js?client-id={{ bag('donate', envvars('ENV'), 'paypalClientId') }}&vault=true"></script>
-<script type="text/javascript">
-  window.reactComponents = [
-    {
-      id: 'loading-dialog',
-      name: 'LoadingDialog',
-      props: {},
-    },
-    {
-      id: 'giving-form',
-      name: 'GivingForm',
-      props: {
-        'stripePublishableKey': `{{ bag('donate', envvars('ENV'), 'stripePublishableKey') }}`,
-        'frequencyOptions': `{{ this.frequency }}`,
-        'pricesOnButtons': {
-          'single': [
-            parseInt(`{{ this.single_one }}`),
-            parseInt(`{{ this.single_two }}`),
-            parseInt(`{{ this.single_three }}`),
-            parseInt(`{{ this.single_four }}`),
-            parseInt(`{{ this.single_five }}`)
-          ],
-          'monthly': [
-            parseInt(`{{ this.monthly_one }}`),
-            parseInt(`{{ this.monthly_two }}`),
-            parseInt(`{{ this.monthly_three }}`),
-            parseInt(`{{ this.monthly_four }}`),
-            parseInt(`{{ this.monthly_five }}`)
-          ]
-        },
-        'perks': [
-          {
-            'name': 'stickers',
-            'friendly_name': {
-              'single': `{{ this.sticker_perk_single_label }}`,
-              'monthly': `{{ this.sticker_perk_monthly_label }}`
-            },
-            'image': {
-              'single': `{{ this.sticker_perk_single_image }}`,
-              'monthly': `{{ this.sticker_perk_monthly_image }}`
-            },
-            'description': {
-              'single': `{{ this.sticker_perk_single_description }}`,
-              'monthly': `{{ this.sticker_perk_monthly_description }}`,
-            },
-            'price': {
-              'single': parseInt(`{{ this.single_one }}`),
-              'monthly': parseInt(`{{ this.monthly_two }}`),
-            },
-            'options': null,
-            'requiredFields': [],
-          },
-          {
-            'name': 't-shirt',
-            'friendly_name': {
-              'single': `{{ this.tshirt_perk_single_label }}`,
-              'monthly': `{{ this.tshirt_perk_monthly_label }}`
-            },
-            'image': {
-              'single': `{{ this.tshirt_perk_single_image }}`,
-              'monthly': `{{ this.tshirt_perk_monthly_image }}`
-            },
-            'description': {
-              'single': `{{ this.tshirt_perk_single_description }}`,
-              'monthly': `{{ this.tshirt_perk_monthly_description }}`,
-            },
-            'price': {
-              'single': parseInt(`{{ this.single_two }}`),
-              'monthly': parseInt(`{{ this.monthly_three }}`),
-            },
-            'options': null,
-            'requiredFields': ['shirt1Fit', 'shirt1Size'],
-          },
-          {
-            'name': 't-shirt-pack',
-            'friendly_name': {
-              'single': `{{ this.tshirt_pack_perk_single_label }}`,
-              'monthly': `{{ this.tshirt_pack_perk_monthly_label }}`
-            },
-            'image': {
-              'single': `{{ this.tshirt_pack_perk_single_image }}`,
-              'monthly': `{{ this.tshirt_pack_perk_monthly_image }}`
-            },
-            'description': {
-              'single': `{{ this.tshirt_pack_perk_single_description }}`,
-              'monthly': `{{ this.tshirt_pack_perk_monthly_description }}`,
-            },
-            'price': {
-              'single': parseInt(`{{ this.single_three }}`),
-              'monthly': parseInt(`{{ this.monthly_four }}`),
-            },
-            'options': [
-              {
-                'name': 'strength-in-numbers',
-                'friendlyName': 'Strength in Numbers',
-                'image': {
-                  'single': `{{ this.tshirt_pack_perk_single_image }}`,
-                  'monthly': `{{ this.tshirt_pack_perk_monthly_image }}`
-                }
-              },
-            ],
-            'requiredFields': ['shirt1Fit', 'shirt1Size', 'shirt2Fit', 'shirt2Size'],
-          },
-          {
-            'name': 'sweatshirt',
-            'friendly_name': {
-              'single': `{{ this.sweatshirt_perk_single_label }}`,
-              'monthly': `{{ this.sweatshirt_perk_monthly_label }}`
-            },
-            'image': {
-              'single': `{{ this.sweatshirt_perk_single_image }}`,
-              'monthly': `{{ this.sweatshirt_perk_monthly_image }}`
-            },
-            'description': {
-              'single': `{{ this.sweatshirt_perk_single_description }}`,
-              'monthly': `{{ this.sweatshirt_perk_monthly_description }}`,
-            },
-            'price': {
-              'single': parseInt(`{{ this.single_five }}`),
-              'monthly': parseInt(`{{ this.monthly_five }}`),
-            },
-            'options': null,
-            'requiredFields': ['sweatshirtSize'],
-          },
-        ],
-        'defaultFrequencyForBoth': `{{ this.default_frequency_for_both }}`,
-        'initialSelectedPrices': {
-          'single': parseInt(`{{ this.single_three }}`),
-          'monthly': parseInt(`{{ this.monthly_three }}`),
-        },
-        'donateProccessorBaseUrl': `{{ bag('donate', envvars('ENV'), 'donateProccessorBaseUrl') }}`,
-        'successRedirectUrl': `{{ this.success_redirect_url }}`,
-      },
-    }
-  ];
-</script>
 <div class="donate-form">
-  {% if this.counter %}
   <div id="campaign-totals-area"></div>
+  <div id="giving-form"></div>
+  <div id="loading-dialog"></div>
+  <script type="text/javascript" src="https://js.stripe.com/v3/"></script>
+  <script type="text/javascript" src="https://www.paypal.com/sdk/js?client-id={{ bag('donate', envvars('ENV'), 'paypalClientId') }}&vault=true"></script>
   <script type="text/javascript">
-    window.reactComponents.push(
+    window.reactComponents = [
+      {
+        id: 'loading-dialog',
+        name: 'LoadingDialog',
+        props: {},
+      },
       {
-        id: 'campaign-totals-area',
-        name: 'CampaignTotals',
+        id: 'giving-form',
+        name: 'GivingForm',
         props: {
+          'stripePublishableKey': `{{ bag('donate', envvars('ENV'), 'stripePublishableKey') }}`,
+          'frequencyOptions': `{{ this.frequency }}`,
+          'pricesOnButtons': {
+            'single': [
+              parseInt(`{{ this.single_one }}`),
+              parseInt(`{{ this.single_two }}`),
+              parseInt(`{{ this.single_three }}`),
+              parseInt(`{{ this.single_four }}`),
+              parseInt(`{{ this.single_five }}`)
+            ],
+            'monthly': [
+              parseInt(`{{ this.monthly_one }}`),
+              parseInt(`{{ this.monthly_two }}`),
+              parseInt(`{{ this.monthly_three }}`),
+              parseInt(`{{ this.monthly_four }}`),
+              parseInt(`{{ this.monthly_five }}`)
+            ]
+          },
+          'perks': [
+            {
+              'name': 'stickers',
+              'friendly_name': {
+                'single': `{{ this.sticker_perk_single_label }}`,
+                'monthly': `{{ this.sticker_perk_monthly_label }}`
+              },
+              'image': {
+                'single': `{{ this.sticker_perk_single_image }}`,
+                'monthly': `{{ this.sticker_perk_monthly_image }}`
+              },
+              'description': {
+                'single': `{{ this.sticker_perk_single_description }}`,
+                'monthly': `{{ this.sticker_perk_monthly_description }}`,
+              },
+              'price': {
+                'single': parseInt(`{{ this.single_one }}`),
+                'monthly': parseInt(`{{ this.monthly_two }}`),
+              },
+              'options': null,
+              'requiredFields': [],
+            },
+            {
+              'name': 't-shirt',
+              'friendly_name': {
+                'single': `{{ this.tshirt_perk_single_label }}`,
+                'monthly': `{{ this.tshirt_perk_monthly_label }}`
+              },
+              'image': {
+                'single': `{{ this.tshirt_perk_single_image }}`,
+                'monthly': `{{ this.tshirt_perk_monthly_image }}`
+              },
+              'description': {
+                'single': `{{ this.tshirt_perk_single_description }}`,
+                'monthly': `{{ this.tshirt_perk_monthly_description }}`,
+              },
+              'price': {
+                'single': parseInt(`{{ this.single_two }}`),
+                'monthly': parseInt(`{{ this.monthly_three }}`),
+              },
+              'options': null,
+              'requiredFields': ['shirt1Fit', 'shirt1Size'],
+            },
+            {
+              'name': 't-shirt-pack',
+              'friendly_name': {
+                'single': `{{ this.tshirt_pack_perk_single_label }}`,
+                'monthly': `{{ this.tshirt_pack_perk_monthly_label }}`
+              },
+              'image': {
+                'single': `{{ this.tshirt_pack_perk_single_image }}`,
+                'monthly': `{{ this.tshirt_pack_perk_monthly_image }}`
+              },
+              'description': {
+                'single': `{{ this.tshirt_pack_perk_single_description }}`,
+                'monthly': `{{ this.tshirt_pack_perk_monthly_description }}`,
+              },
+              'price': {
+                'single': parseInt(`{{ this.single_three }}`),
+                'monthly': parseInt(`{{ this.monthly_four }}`),
+              },
+              'options': [
+                {
+                  'name': 'strength-in-numbers',
+                  'friendlyName': 'Strength in Numbers',
+                  'image': {
+                    'single': `{{ this.tshirt_pack_perk_single_image }}`,
+                    'monthly': `{{ this.tshirt_pack_perk_monthly_image }}`
+                  }
+                },
+              ],
+              'requiredFields': ['shirt1Fit', 'shirt1Size', 'shirt2Fit', 'shirt2Size'],
+            },
+            {
+              'name': 'sweatshirt',
+              'friendly_name': {
+                'single': `{{ this.sweatshirt_perk_single_label }}`,
+                'monthly': `{{ this.sweatshirt_perk_monthly_label }}`
+              },
+              'image': {
+                'single': `{{ this.sweatshirt_perk_single_image }}`,
+                'monthly': `{{ this.sweatshirt_perk_monthly_image }}`
+              },
+              'description': {
+                'single': `{{ this.sweatshirt_perk_single_description }}`,
+                'monthly': `{{ this.sweatshirt_perk_monthly_description }}`,
+              },
+              'price': {
+                'single': parseInt(`{{ this.single_five }}`),
+                'monthly': parseInt(`{{ this.monthly_five }}`),
+              },
+              'options': null,
+              'requiredFields': ['sweatshirtSize'],
+            },
+          ],
+          'defaultFrequencyForBoth': `{{ this.default_frequency_for_both }}`,
+          'initialSelectedPrices': {
+            'single': parseInt(`{{ this.single_three }}`),
+            'monthly': parseInt(`{{ this.monthly_three }}`),
+          },
           'donateProccessorBaseUrl': `{{ bag('donate', envvars('ENV'), 'donateProccessorBaseUrl') }}`,
+          'successRedirectUrl': `{{ this.success_redirect_url }}`,
         },
       }
-    );
+    ];
+    if (`{{ this.counter }}` == 'True'){
+      window.reactComponents.push(
+        {
+          id: 'campaign-totals-area',
+          name: 'CampaignTotals',
+          props: {
+            'donateProccessorBaseUrl': `{{ bag('donate', envvars('ENV'), 'donateProccessorBaseUrl') }}`,
+          },
+        }
+      );
+    }
   </script>
-  {% endif %}
-  <div id="giving-form"></div>
-  <div id="loading-dialog"></div>
   <script type="text/javascript" src="/static/gen/donate.js"></script>
 </div>