[IMP] website_sale(_coupon): improve promo code alert style

By using proper BS4 classes for alert, so it looks better and it is more
compatible with themes.

Also removed the unused "Option not available".

closes #32061

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

addons/website_sale/views/templates.xml

@@ -612,7 +612,6 @@
                    "display_currency": product.currency_id,
                }'/>
           </h4>
-          <h4 class="d-none oe_not_available bg-warning">Option not available</h4>
       </div>
     </template>
 
@@ -990,11 +989,8 @@
     </template>
 
     <template id='coupon_form' name='Coupon form'>
-        <t t-if="request.params.get('code_not_available')" name="code_not_available">
-            <p class="bg-warning">This promo code is not available</p>
-        </t>
         <form t-att-action="'/shop/pricelist%s' % (redirect and '?r=' + redirect or '')"
-            method="post" class="mb32" name="coupon_code">
+            method="post" name="coupon_code">
             <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()" />
             <div class="input-group w-100">
                 <input name="promo" class="form-control" type="text" placeholder="code..." t-att-value="website_sale_order.pricelist_id.code or None"/>
@@ -1003,6 +999,9 @@
                 </div>
             </div>
         </form>
+        <t t-if="request.params.get('code_not_available')" name="code_not_available">
+            <div class="alert alert-danger text-left" role="alert">This promo code is not available.</div>
+        </t>
     </template>
 
     <template id="checkout">

addons/website_sale_coupon/views/website_sale_templates.xml

@@ -25,41 +25,31 @@
     <xpath expr="//form[@name='coupon_code']" position="after">
         <t t-if="website_sale_order and website_sale_order.applied_coupon_ids">
             <t t-foreach="website_sale_order.applied_coupon_ids" t-as="coupon">
-                <div class="card bg-success text-white mt16">
-                    <div class="card-header clearfix">
-                    <span class="float-left">You have successfully applied following promo code: <b t-esc="coupon.code"/></span>
-                    </div>
+                <div class="alert alert-success text-left mt16" role="alert">
+                    You have successfully applied following promo code: <strong t-esc="coupon.code"/>
                 </div>
             </t>
         </t>
         <t t-if="website_sale_order and website_sale_order.promo_code">
-            <div class="card bg-success text-white mt16">
-                <div class="card-header clearfix">
-                <span class="float-left">You have successfully applied following promo code: <b t-esc="website_sale_order.promo_code"/></span>
-                </div>
+            <div class="alert alert-success text-left mt16" role="alert">
+                You have successfully applied following promo code: <strong t-esc="website_sale_order.promo_code"/>
             </div>
         </t>
         <t t-if="website_sale_order and website_sale_order.generated_coupon_ids">
             <t t-foreach="website_sale_order.generated_coupon_ids.filtered(lambda c: c.state != 'expired')" t-as="coupon">
-                <div class="card bg-success text-white mt16">
-                    <div class="card-header clearfix">
-                        <span class="float-left">Your reward <b t-esc="coupon.discount_line_product_id.name"/> is available on a next order with this promo code: <b t-esc="coupon.code"/></span>
-                    </div>
+                <div class="alert alert-success text-left mt16" role="alert">
+                    Your reward <strong t-esc="coupon.discount_line_product_id.name"/> is available on a next order with this promo code: <strong t-esc="coupon.code"/>
                 </div>
             </t>
         </t>
         <t t-if="request.params.get('code_not_available')">
-            <div class="card bg-danger text-white mt16">
-                <div class="card-header clearfix">
-                    <span class="float-left">Invalid or expired promo code</span>
-                </div>
+            <div class="alert alert-danger text-left mt16" role="alert">
+                Invalid or expired promo code.
             </div>
         </t>
         <t t-if="website_sale_order.get_promo_code_error(delete=False)">
-            <div class="card bg-danger text-white mt16">
-                <div class="card-header clearfix">
-                    <span class="float-left"><t t-esc="website_sale_order.get_promo_code_error()" /></span>
-                </div>
+            <div class="alert alert-danger text-left mt16" role="alert">
+                <t t-esc="website_sale_order.get_promo_code_error()"/>
             </div>
         </t>
     </xpath>