From 55ed92291a8213256b5b31db22b9c95a482afb1a Mon Sep 17 00:00:00 2001
From: eashaw <eric@fleetdm.com>
Date: Mon, 7 Feb 2022 17:00:09 -0600
Subject: [PATCH] replace billing form with cloud-error (#4039)

---
 website/views/pages/customers/new-license.ejs | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/website/views/pages/customers/new-license.ejs b/website/views/pages/customers/new-license.ejs
index d921f3c51e..f64e5dd586 100644
--- a/website/views/pages/customers/new-license.ejs
+++ b/website/views/pages/customers/new-license.ejs
@@ -41,18 +41,22 @@
         </div>
         <div class="card card-body mt-3" v-if="showBillingForm">
           <h3 class="pb-3">Billing information</h3>
-          <ajax-form action="saveBillingInfoAndSubscribe" :syncing.sync="syncing" :cloud-error.sync="cloudError" :form-errors.sync="formErrors" :form-data="formData" :form-rules="billingFormRules" @submitted="submittedPaymentForm()">
+          <ajax-form action="saveBillingInfoAndSubscribe" :syncing.sync="syncing" :cloud-error.sync="cloudError" :form-errors.sync="formErrors" :form-data="formData" :form-rules="billingFormRules" @submitted="submittedPaymentForm()" v-if="!cloudError || cloudError === 'couldNotSaveBillingInfo'">
             <div class="form-group">
               <label for="card">Billing Card</label>
-              <stripe-card-element class="mb-3" id="card" :is-errored.sync="formErrors.paymentSource" :stripe-publishable-key="stripePublishableKey"
+              <stripe-card-element class="mb-3" id="card" busy.sync="syncing" :is-errored.sync="formErrors.paymentSource" :stripe-publishable-key="stripePublishableKey"
               v-model="formData.paymentSource" key="billing-card" ref="paymentcardref"></stripe-card-element>
             </div>
             <cloud-error purpose="cloud-error" v-if="cloudError === 'couldNotSaveBillingInfo'">
               <p>The billing card provided could not be used. Please use another card or <a href="/contact" target="_blank">contact support</a></p>
             </cloud-error>
-            <cloud-error purpose="cloud-error" v-else-if="cloudError"></cloud-error>
             <ajax-button style="height: 40px;" purpose="submit-button" spinner="true" :syncing="syncing" class="btn btn-block btn-lg btn-info mt-4">Get license key</ajax-button>
           </ajax-form>
+          <cloud-error purpose="cloud-error" v-else-if="cloudError">
+            <p class="mb-3 text-bold text-strong">An error has occurred while processing your request.</p>
+            <p class="mb-2">We're sorry that this happened. A human has been informed of this error and is looking into it.</p>
+            <p>Feel free to <a href="/customers/new-license">reload the page</a> and try again. A team member at Fleet will investigate and correct duplicate charges, if any occurred.</p>
+          </cloud-error>
         </div>
       </div>