From a625737193668719c4458e939325fd9927307420 Mon Sep 17 00:00:00 2001
From: Sofia Matulis <sofiamatulis@users.noreply.github.com>
Date: Tue, 18 Jul 2023 14:34:20 -0300
Subject: [PATCH 01/13] Price per item, Popover and global style bugs (#2851)

---
 assets/component-volume-pricing.css  |  4 ++
 assets/price-per-item.js             |  2 -
 assets/quantity-popover.css          | 17 ++++-
 sections/featured-product.liquid     | 94 +++++++++++++++++++---------
 sections/main-cart-items.liquid      |  4 +-
 sections/main-product.liquid         | 61 +++++++++++++-----
 sections/quick-order-list.liquid     | 39 +++++++++---
 snippets/cart-drawer.liquid          | 32 +++++++---
 snippets/quick-order-list-row.liquid | 55 +++++++++-------
 9 files changed, 215 insertions(+), 93 deletions(-)

diff --git a/assets/component-volume-pricing.css b/assets/component-volume-pricing.css
index dc4ed2ae388..3d07c0ee380 100644
--- a/assets/component-volume-pricing.css
+++ b/assets/component-volume-pricing.css
@@ -52,3 +52,7 @@ volume-pricing show-more-button {
   font-size: 1.4rem;
   letter-spacing: 0.06rem;
 }
+
+.price-per-item dd {
+  margin-left: 0;
+}
diff --git a/assets/price-per-item.js b/assets/price-per-item.js
index 7bf83f3ab65..fdf37eb9700 100644
--- a/assets/price-per-item.js
+++ b/assets/price-per-item.js
@@ -72,7 +72,6 @@ if (!customElements.get('price-per-item')) {
         if (this.classList.contains('variant-item__price-per-item')) {
           this.currentQtyForVolumePricing = this.getCartQuantity(updatedCartQuantity);
         }
-
         for (let pair of this.qtyPricePairs) {
           if (this.currentQtyForVolumePricing >= pair[0]) {
             const pricePerItemCurrent = document.querySelector(`price-per-item[id^="Price-Per-Item-${this.dataset.sectionId || this.dataset.variantId}"] .price-per-item span`);
@@ -97,7 +96,6 @@ if (!customElements.get('price-per-item')) {
             this.qtyPricePairs.push([qty, price]);
           });
         }
-
         this.qtyPricePairs.reverse();
       }
     }
diff --git a/assets/quantity-popover.css b/assets/quantity-popover.css
index eae0a897fbd..c39f7284a01 100644
--- a/assets/quantity-popover.css
+++ b/assets/quantity-popover.css
@@ -1,5 +1,6 @@
 quantity-popover {
   position: relative;
+  display: block;
 }
 
 quantity-popover volume-pricing li:nth-child(odd) {
@@ -22,12 +23,22 @@ quantity-popover volume-pricing li {
   max-width: 36rem;
 }
 
+.quantity-popover__info .button-close,
+.variant-remove-total quick-order-list-remove-all-button .button,
+.quick-order-list-total__confirmation quick-order-list-remove-all-button .button,
+quantity-popover quick-order-list-remove-button .button {
+  --shadow-opacity: 0;
+  --border-opacity: 0;
+}
+
 .quantity-popover__info-button {
   display: flex;
   align-items: center;
   margin: 0 0.4rem 0 0;
   min-width: 1.5rem;
   min-height: 1.5rem;
+  --shadow-opacity: 0;
+  --border-opacity: 0;
 }
 
 .quantity-popover__info-button--icon-with-label {
@@ -79,6 +90,10 @@ quantity-popover volume-pricing li {
   justify-content: flex-end;
 }
 
+.quantity-popover__info .volume-pricing-label~.button {
+  top: -0.2rem;
+}
+
 .quantity-popover__info .button .icon {
   width: 1.5rem;
   height: 1.5rem;
@@ -145,4 +160,4 @@ quantity-popover .quantity__rules .divider:nth-child(2)::before {
 quantity-popover .quantity__button:not(:focus-visible):not(.focused),
 quantity-popover .quantity__input:not(:focus-visible):not(.focused) {
   background-color: initial;
-}
+}
\ No newline at end of file
diff --git a/sections/featured-product.liquid b/sections/featured-product.liquid
index 22d5f814f18..7190579effb 100644
--- a/sections/featured-product.liquid
+++ b/sections/featured-product.liquid
@@ -282,35 +282,71 @@
                         assign current_qty_for_volume_pricing = cart_qty | plus: product.selected_or_first_available_variant.quantity_rule.increment
                       endif
                     -%}
-                    <price-per-item
-                      class="no-js-hidden"
-                      id="Price-Per-Item-{{ section.id }}"
-                      data-section-id="{{ section.id }}"
-                      data-variant-id="{{ product.selected_or_first_available_variant.id }}"
-                    >
-                      {%- if product.quantity_price_breaks_configured? -%}
-                        <div class="price-per-item">
-                          {%- if current_qty_for_volume_pricing < volume_pricing_array.last.minimum_quantity -%}
-                            {%- assign variant_price = product.selected_or_first_available_variant.price
-                              | money_with_currency
-                            -%}
-                            <span class="price-per-item--current">
-                              {{- 'products.product.volume_pricing.price_at_each' | t: price: variant_price -}}
-                            </span>
-                          {%- else -%}
-                            {%- for price_break in volume_pricing_array -%}
-                              {%- if current_qty_for_volume_pricing >= price_break.minimum_quantity -%}
-                                {%- assign price_break_price = price_break.price | money_with_currency -%}
-                                <span class="price-per-item--current">
-                                  {{- 'products.product.volume_pricing.price_at_each' | t: price: price_break_price -}}
-                                </span>
-                                {%- break -%}
-                              {%- endif -%}
-                            {%- endfor -%}
-                          {%- endif -%}
-                        </div>
-                      {%- endif -%}
-                    </price-per-item>
+                    {%- if product.quantity_price_breaks_configured? -%}
+                      <price-per-item
+                        class="no-js-hidden"
+                        id="Price-Per-Item-{{ section.id }}"
+                        data-section-id="{{ section.id }}"
+                        data-variant-id="{{ product.selected_or_first_available_variant.id }}"
+                      >
+                        {%- if product.selected_or_first_available_variant.quantity_price_breaks.size > 0 -%}
+                          <div class="price-per-item">
+                            {%- if current_qty_for_volume_pricing < volume_pricing_array.last.minimum_quantity -%}
+                              {%- assign variant_price = product.selected_or_first_available_variant.price
+                                | money_with_currency
+                              -%}
+                              <span class="price-per-item--current">
+                                {{- 'products.product.volume_pricing.price_at_each' | t: price: variant_price -}}
+                              </span>
+                            {%- else -%}
+                              {%- for price_break in volume_pricing_array -%}
+                                {%- if current_qty_for_volume_pricing >= price_break.minimum_quantity -%}
+                                  {%- assign price_break_price = price_break.price | money_with_currency -%}
+                                  <span class="price-per-item--current">
+                                    {{-
+                                      'products.product.volume_pricing.price_at_each'
+                                      | t: price: price_break_price
+                                    -}}
+                                  </span>
+                                  {%- break -%}
+                                {%- endif -%}
+                              {%- endfor -%}
+                            {%- endif -%}
+                          </div>
+                        {%- else -%}
+                          {%- assign variant_price = product.selected_or_first_available_variant.price
+                            | money_with_currency
+                          -%}
+                          {%- assign variant_price_compare = product.selected_or_first_available_variant.compare_at_price -%}
+                          <div class="price-per-item">
+                            {%- if variant_price_compare -%}
+                              <dl class="price-per-item--current">
+                                <dt class="visually-hidden">
+                                  {{ 'products.product.price.regular_price' | t }}
+                                </dt>
+                                <dd>
+                                  <s class="variant-item__old-price">
+                                    {{ variant_price_compare | money }}
+                                  </s>
+                                </dd>
+                                <dt class="visually-hidden">
+                                  {{ 'products.product.price.sale_price' | t }}
+                                </dt>
+                                <dd>
+                                  <span class="price-per-item--current">
+                                    {{- 'products.product.volume_pricing.price_at_each' | t: price: variant_price -}}
+                                  </span>
+                                </dd>
+                              </dl>
+                            {%- else -%}
+                              <span class="price-per-item--current">
+                                {{- 'products.product.volume_pricing.price_at_each' | t: price: variant_price -}}
+                              </span>
+                            {%- endif -%}
+                          </div>
+                        {%- endif -%}
+                      </price-per-item>
+                    {%- endif -%}
                   </div>
                   <div class="quantity__rules caption no-js-hidden">
                     {%- if product.selected_or_first_available_variant.quantity_rule.increment > 1 -%}
diff --git a/sections/main-cart-items.liquid b/sections/main-cart-items.liquid
index c93eb7f6018..068f6840eed 100644
--- a/sections/main-cart-items.liquid
+++ b/sections/main-cart-items.liquid
@@ -319,7 +319,9 @@
                           hidden
                         >
                           {%- if has_qty_rules == false -%}
-                            <span class="volume-pricing-label caption">Volume pricing</span>
+                            <span class="volume-pricing-label caption">
+                              {{- 'products.product.volume_pricing.title' | t -}}
+                            </span>
                           {%- endif -%}
                           <div class="quantity__rules caption no-js-hidden">
                             {%- if item.variant.quantity_rule.increment > 1 -%}
diff --git a/sections/main-product.liquid b/sections/main-product.liquid
index 609aaf9bf84..017e6a67137 100644
--- a/sections/main-product.liquid
+++ b/sections/main-product.liquid
@@ -275,24 +275,51 @@
                     endif
 
                   -%}
-                  <price-per-item class="no-js-hidden" id="Price-Per-Item-{{ section.id }}" data-section-id="{{ section.id }}" data-variant-id="{{ product.selected_or_first_available_variant.id }}">
-                    {%- if product.quantity_price_breaks_configured? -%}
-                      <div class="price-per-item">
-                        {%- if current_qty_for_volume_pricing < volume_pricing_array.last.minimum_quantity -%}
-                          {%- assign variant_price = product.selected_or_first_available_variant.price | money_with_currency -%}
-                          <span class="price-per-item--current">{{ 'products.product.volume_pricing.price_at_each' | t: price: variant_price }}</span>
+                  {%- if product.quantity_price_breaks_configured? -%}
+                    <price-per-item class="no-js-hidden" id="Price-Per-Item-{{ section.id }}" data-section-id="{{ section.id }}" data-variant-id="{{ product.selected_or_first_available_variant.id }}">
+                      {%- if product.selected_or_first_available_variant.quantity_price_breaks.size > 0 -%}
+                        <div class="price-per-item">
+                          {%- if current_qty_for_volume_pricing < volume_pricing_array.last.minimum_quantity -%}
+                            {%- assign variant_price = product.selected_or_first_available_variant.price | money_with_currency -%}
+                            <span class="price-per-item--current">{{ 'products.product.volume_pricing.price_at_each' | t: price: variant_price }}</span>
+                          {%- else -%}
+                            {%- for price_break in volume_pricing_array -%}
+                              {%- if current_qty_for_volume_pricing >= price_break.minimum_quantity -%}
+                                {%- assign price_break_price = price_break.price | money_with_currency -%}
+                                <span class="price-per-item--current">{{ 'products.product.volume_pricing.price_at_each' | t: price: price_break_price }}</span>
+                                {%- break -%}
+                              {%- endif -%}
+                            {%- endfor -%}
+                          {%- endif -%}
+                        </div>
                         {%- else -%}
-                          {%- for price_break in volume_pricing_array -%}
-                            {%- if current_qty_for_volume_pricing >= price_break.minimum_quantity -%}
-                              {%- assign price_break_price = price_break.price | money_with_currency -%}
-                              <span class="price-per-item--current">{{ 'products.product.volume_pricing.price_at_each' | t: price: price_break_price }}</span>
-                              {%- break -%}
-                            {%- endif -%}
-                          {%- endfor -%}
-                        {%- endif -%}
-                      </div>
-                    {%- endif -%}
-                  </price-per-item>
+                        {%- assign variant_price = product.selected_or_first_available_variant.price | money_with_currency -%}
+                        {%- assign variant_price_compare = product.selected_or_first_available_variant.compare_at_price -%}
+                        <div class="price-per-item">
+                          {%- if variant_price_compare -%}
+                            <dl class="price-per-item--current">
+                              <dt class="visually-hidden">
+                                {{ 'products.product.price.regular_price' | t }}
+                              </dt>
+                              <dd>
+                                <s class="variant-item__old-price">
+                                  {{ variant_price_compare | money }}
+                                </s>
+                              </dd>
+                              <dt class="visually-hidden">
+                                {{ 'products.product.price.sale_price' | t }}
+                              </dt>
+                              <dd>
+                                <span class="price-per-item--current">{{ 'products.product.volume_pricing.price_at_each' | t: price: variant_price }}</span>
+                              </dd>
+                            </dl>
+                          {%- else -%}
+                            <span class="price-per-item--current">{{ 'products.product.volume_pricing.price_at_each' | t: price: variant_price }}</span>
+                          {%- endif -%}
+                        </div>
+                      {%- endif -%}
+                    </price-per-item>
+                  {%- endif -%}
                 </div>
                 <div class="quantity__rules caption no-js-hidden">
                   {%- if product.selected_or_first_available_variant.quantity_rule.increment > 1 -%}
diff --git a/sections/quick-order-list.liquid b/sections/quick-order-list.liquid
index ab2c4081aff..b2eb96dbfe6 100644
--- a/sections/quick-order-list.liquid
+++ b/sections/quick-order-list.liquid
@@ -140,9 +140,14 @@
               </a>
               <div class="variant-remove-total">
                 {%- render 'loading-overlay' -%}
-                <quick-order-list-remove-all-button class="button button--tertiary no-js-hidden" data-action="confirm">
-                  {% render 'icon-remove' %}
-                  <span class="text-body">{{ 'sections.quick_order_list.remove_all' | t }}</span>
+                <quick-order-list-remove-all-button
+                  class="no-js-hidden"
+                  data-action="confirm"
+                >
+                  <button class="button button--tertiary" type="button">
+                    {% render 'icon-remove' %}
+                    <span class="text-body">{{ 'sections.quick_order_list.remove_all' | t }}</span>
+                  </button>
                 </quick-order-list-remove-all-button>
               </div>
             </div>
@@ -197,9 +202,15 @@
               </a>
               <div class="variant-remove-total">
                 {%- render 'loading-overlay' -%}
-                <quick-order-list-remove-all-button class="button button--tertiary no-js-hidden" data-action="confirm">
-                  {% render 'icon-remove' %}
-                  <span class="text-body">{{ 'sections.quick_order_list.remove_all' | t }}</span>
+                <quick-order-list-remove-all-button
+                  class="no-js-hidden"
+                  data-action="confirm"
+                >
+                  <button class="button button--tertiary" type="button">
+                    {% render 'icon-remove' %}
+
+                    <span class="text-body">{{ 'sections.quick_order_list.remove_all' | t }}</span>
+                  </button>
                 </quick-order-list-remove-all-button>
               </div>
             </div>
@@ -217,16 +228,24 @@
             {{ 'sections.quick_order_list.remove_all_items_confirmation' | t: quantity: items_in_cart }}
           </span>
           <quick-order-list-remove-all-button
-            class="quick-order-list__button-confirm button button--secondary"
             data-action="remove"
           >
-            {{- 'sections.quick_order_list.remove_all' | t -}}
+            <button
+              class="quick-order-list__button-confirm button button--secondary"
+              type="button"
+            >
+              {{- 'sections.quick_order_list.remove_all' | t -}}
+            </button>
           </quick-order-list-remove-all-button>
           <quick-order-list-remove-all-button
-            class="quick-order-list__button-cancel button button--tertiary"
             data-action="cancel"
           >
-            {{- 'sections.quick_order_list.cancel' | t -}}
+            <button
+              class="quick-order-list__button-cancel button button--tertiary"
+              type="button"
+            >
+              {{- 'sections.quick_order_list.cancel' | t -}}
+            </button>
           </quick-order-list-remove-all-button>
         </div>
       </div>
diff --git a/snippets/cart-drawer.liquid b/snippets/cart-drawer.liquid
index e403cf59b8b..c5a9d5300d7 100644
--- a/snippets/cart-drawer.liquid
+++ b/snippets/cart-drawer.liquid
@@ -275,20 +275,28 @@
                           if item.variant.quantity_rule.increment > 1 or item.variant.quantity_rule.min > 1 or item.variant.quantity_rule.max != null
                             assign has_qty_rules = true
                           endif
-      
+
                           assign has_vol_pricing = false
                           if item.variant.quantity_price_breaks.size > 0
                             assign has_vol_pricing = true
                           endif
                         -%}
-                        <td class="cart-item__quantity {% if has_qty_rules or has_vol_pricing %} cart-item__quantity--info{% endif %}" role="cell" headers="CartDrawer-ColumnQuantity">
+                        <td
+                          class="cart-item__quantity {% if has_qty_rules or has_vol_pricing %} cart-item__quantity--info{% endif %}"
+                          role="cell"
+                          headers="CartDrawer-ColumnQuantity"
+                        >
                           <quantity-popover>
                             <div class="cart-item__quantity-wrapper quantity-popover-wrapper">
-                              <div class="quantity-popover-container{% if has_qty_rules or has_vol_pricing %} quantity-popover-container--hover{% endif %}">                                
+                              <div class="quantity-popover-container{% if has_qty_rules or has_vol_pricing %} quantity-popover-container--hover{% endif %}">
                                 <quantity-input class="quantity cart-quantity">
                                   <button class="quantity__button no-js-hidden" name="minus" type="button">
                                     <span class="visually-hidden">
-                                      {{- 'products.product.quantity.decrease' | t: product: item.product.title | escape -}}
+                                      {{-
+                                        'products.product.quantity.decrease'
+                                        | t: product: item.product.title
+                                        | escape
+                                      -}}
                                     </span>
                                     {% render 'icon-minus' %}
                                   </button>
@@ -312,7 +320,11 @@
                                   >
                                   <button class="quantity__button no-js-hidden" name="plus" type="button">
                                     <span class="visually-hidden">
-                                      {{- 'products.product.quantity.increase' | t: product: item.product.title | escape -}}
+                                      {{-
+                                        'products.product.quantity.increase'
+                                        | t: product: item.product.title
+                                        | escape
+                                      -}}
                                     </span>
                                     {% render 'icon-plus' %}
                                   </button>
@@ -341,13 +353,13 @@
                                 {% render 'icon-info' %}
                                 <span>
                                   {%- if has_vol_pricing -%}
-                                    Volume pricing available
+                                    {{ 'products.product.volume_pricing.note' | t }}
                                   {%- elsif has_qty_rules -%}
-                                    View quantity rules
+                                    {{ 'products.product.quantity.note' | t }}
                                   {%- endif -%}
                                 </span>
                               </button>
-                            {%- endif -%}                      
+                            {%- endif -%}
                             {%- if has_vol_pricing or has_qty_rules -%}
                               <div
                                 class="cart-items__info global-settings-popup quantity-popover__info"
@@ -355,7 +367,9 @@
                                 hidden
                               >
                                 {%- if has_qty_rules == false -%}
-                                  <span class="volume-pricing-label caption">Volume pricing</span>
+                                  <span class="volume-pricing-label caption">
+                                    {{- 'products.product.volume_pricing.title' | t -}}
+                                  </span>
                                 {%- endif -%}
                                 <div class="quantity__rules caption no-js-hidden">
                                   {%- if item.variant.quantity_rule.increment > 1 -%}
diff --git a/snippets/quick-order-list-row.liquid b/snippets/quick-order-list-row.liquid
index 36df93d8b9f..29ae3607b49 100644
--- a/snippets/quick-order-list-row.liquid
+++ b/snippets/quick-order-list-row.liquid
@@ -74,7 +74,7 @@
           {{ 'products.product.price.sale_price' | t }}
         </dt>
         <dd class="price">
-          {%- if product.quantity_price_breaks_configured? -%}
+          {%- if variant.quantity_price_breaks.size > 0 -%}
             {%- liquid
               assign volume_pricing_array = variant.quantity_price_breaks | sort: 'quantity' | reverse
             -%}
@@ -85,14 +85,14 @@
             >
               <div class="price-per-item">
                 {%- if cart_qty < volume_pricing_array.last.minimum_quantity -%}
-                  {%- assign variant_price = variant.price | money_with_currency -%}
+                  {%- assign variant_price = variant.price | money -%}
                   <span class="price-per-item--current price">
                     {{- 'sections.quick_order_list.each' | t: money: variant_price -}}
                   </span>
                 {%- else -%}
                   {%- for price_break in volume_pricing_array -%}
                     {%- if cart_qty >= price_break.minimum_quantity -%}
-                      {%- assign price_break_price = price_break.price | money_with_currency -%}
+                      {%- assign price_break_price = price_break.price | money -%}
                       <span class="price-per-item--current price">
                         {{- 'sections.quick_order_list.each' | t: money: price_break_price -}}
                       </span>
@@ -110,7 +110,7 @@
         </dd>
       </dl>
     {%- else -%}
-      {%- if product.quantity_price_breaks_configured? -%}
+      {%- if variant.quantity_price_breaks.size > 0 -%}
         {%- liquid
           assign volume_pricing_array = variant.quantity_price_breaks | sort: 'quantity' | reverse
         -%}
@@ -121,14 +121,14 @@
         >
           <div class="price-per-item">
             {%- if cart_qty < volume_pricing_array.last.minimum_quantity -%}
-              {%- assign variant_price = variant.price | money_with_currency -%}
+              {%- assign variant_price = variant.price | money -%}
               <span class="price-per-item--current price">
                 {{- 'sections.quick_order_list.each' | t: money: variant_price -}}
               </span>
             {%- else -%}
               {%- for price_break in volume_pricing_array -%}
                 {%- if cart_qty >= price_break.minimum_quantity -%}
-                  {%- assign price_break_price = price_break.price | money_with_currency -%}
+                  {%- assign price_break_price = price_break.price | money -%}
                   <span class="price-per-item--current price">
                     {{- 'sections.quick_order_list.each' | t: money: price_break_price -}}
                   </span>
@@ -259,7 +259,7 @@
           hidden
         >
           {%- if has_qty_rules == false -%}
-            <span class="volume-pricing-label caption">Volume pricing</span>
+            <span class="volume-pricing-label caption">{{ 'products.product.volume_pricing.title' | t }}</span>
           {%- endif -%}
           <div class="quantity__rules caption no-js-hidden">
             {%- if variant.quantity_rule.increment > 1 -%}
@@ -340,7 +340,7 @@
           {{ 'products.product.price.sale_price' | t }}
         </dt>
         <dd class="price">
-          {%- if product.quantity_price_breaks_configured? -%}
+          {%- if variant.quantity_price_breaks.size > 0 -%}
             {%- liquid
               assign volume_pricing_array = variant.quantity_price_breaks | sort: 'quantity' | reverse
             -%}
@@ -351,14 +351,14 @@
             >
               <div class="price-per-item">
                 {%- if cart_qty < volume_pricing_array.last.minimum_quantity -%}
-                  {%- assign variant_price = variant.price | money_with_currency -%}
+                  {%- assign variant_price = variant.price | money -%}
                   <span class="price-per-item--current price">
                     {{- 'sections.quick_order_list.each' | t: money: variant_price -}}
                   </span>
                 {%- else -%}
                   {%- for price_break in volume_pricing_array -%}
                     {%- if cart_qty >= price_break.minimum_quantity -%}
-                      {%- assign price_break_price = price_break.price | money_with_currency -%}
+                      {%- assign price_break_price = price_break.price | money -%}
                       <span class="price-per-item--current price">
                         {{- 'sections.quick_order_list.each' | t: money: price_break_price -}}
                       </span>
@@ -376,7 +376,7 @@
         </dd>
       </dl>
     {%- else -%}
-      {%- if product.quantity_price_breaks_configured? -%}
+      {%- if variant.quantity_price_breaks.size > 0 -%}
         {%- liquid
           assign volume_pricing_array = variant.quantity_price_breaks | sort: 'quantity' | reverse
         -%}
@@ -387,14 +387,14 @@
         >
           <div class="price-per-item">
             {%- if cart_qty < volume_pricing_array.last.minimum_quantity -%}
-              {%- assign variant_price = variant.price | money_with_currency -%}
+              {%- assign variant_price = variant.price | money -%}
               <span class="price-per-item--current price">
                 {{- 'sections.quick_order_list.each' | t: money: variant_price -}}
               </span>
             {%- else -%}
               {%- for price_break in volume_pricing_array -%}
                 {%- if cart_qty >= price_break.minimum_quantity -%}
-                  {%- assign price_break_price = price_break.price | money_with_currency -%}
+                  {%- assign price_break_price = price_break.price | money -%}
                   <span class="price-per-item--current price">
                     {{- 'sections.quick_order_list.each' | t: money: price_break_price -}}
                   </span>
@@ -433,16 +433,23 @@
   </td>
 </tr>
 
-<volume-pricing class="hidden" id="Volume-{{ variant.id }}">
-  <ul>
-    {%- for price_break in volume_pricing_array -%}
-      {%- assign price_break_price = price_break.price | money_with_currency -%}
+{%- if product.quantity_price_breaks_configured? -%}
+  <volume-pricing class="hidden" id="Volume-{{ variant.id }}">
+    <ul>
       <li>
-        <span>
-          {{- price_break.minimum_quantity -}}
-        </span>
-        <span data-text="{{ price_break_price }}">{{- price_break.price | money_with_currency }}</span>
+        <span>{{ variant.quantity_rule.min }}</span>
+        {%- assign price = variant.price | money -%}
+        <span data-text="{{ price }}">{{ price }}</span>
       </li>
-    {%- endfor -%}
-  </ul>
-</volume-pricing>
+      {%- for price_break in variant.quantity_price_breaks -%}
+        {%- assign price_break_price = price_break.price | money -%}
+        <li>
+          <span>
+            {{- price_break.minimum_quantity -}}
+          </span>
+          <span data-text="{{ price_break_price }}">{{- price_break.price | money }}</span>
+        </li>
+      {%- endfor -%}
+    </ul>
+  </volume-pricing>
+{%- endif -%}

From eed5c6e4056645cc1584bd6fafcde9829e80835d Mon Sep 17 00:00:00 2001
From: Sofia Matulis <sofiamatulis@users.noreply.github.com>
Date: Tue, 18 Jul 2023 21:57:39 -0300
Subject: [PATCH 02/13] Fix cart submission on Quick Order List (#2868)

---
 assets/quick-order-list.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/assets/quick-order-list.js b/assets/quick-order-list.js
index ee0e966e6e9..58aa1b497d8 100644
--- a/assets/quick-order-list.js
+++ b/assets/quick-order-list.js
@@ -68,6 +68,10 @@ class QuickOrderList extends HTMLElement {
     }
     this.quickOrderListId = 'quick-order-list'
     this.variantItemStatusElement = document.getElementById('shopping-cart-variant-item-status');
+    const form = this.querySelector('form');
+
+    form.addEventListener('submit', this.onSubmit.bind(this));
+
     const debouncedOnChange = debounce((event) => {
       this.onChange(event);
     }, ON_CHANGE_DEBOUNCE_TIMER);
@@ -76,6 +80,10 @@ class QuickOrderList extends HTMLElement {
 
   cartUpdateUnsubscriber = undefined;
 
+  onSubmit(event) {
+    event.preventDefault();
+  }
+
   connectedCallback() {
     this.cartUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.cartUpdate, (event) => {
       if (event.source === this.quickOrderListId) {

From 91d61716a2ab43eb20473cb14348a22badb5d04a Mon Sep 17 00:00:00 2001
From: melissaperreault <melissa.perreault@shopify.com>
Date: Wed, 19 Jul 2023 11:55:19 -0400
Subject: [PATCH 03/13] replace translation string to have the translation
 visible (#2869)

---
 sections/related-products.liquid | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/sections/related-products.liquid b/sections/related-products.liquid
index 2a74777c93e..610e0d31144 100644
--- a/sections/related-products.liquid
+++ b/sections/related-products.liquid
@@ -111,7 +111,7 @@
       "type": "color_scheme",
       "id": "color_scheme",
       "label": "t:sections.all.colors.label",
-      "info": "t:sections.image-banner.settings.color_scheme.info",
+      "info": "t:sections.all.colors.has_cards_info",
       "default": "background-1"
     },
     {

From ca15c89d59333fa9f826234eceb57699d7850d65 Mon Sep 17 00:00:00 2001
From: Eugene Kasimov <105315663+eugenekasimov@users.noreply.github.com>
Date: Wed, 19 Jul 2023 13:53:26 -0700
Subject: [PATCH 04/13] B2B compare at price with price range (#2858)

* Add sale badge and price-range for volume-pricing

* Add compare_at price to PDP and Feat Prod.

* Change opacity to 100% for price per item.

* Update the logic

* Hide price per item for unavailable variants.

* Remove margin for dl.

* Refactoring

* Correct a mistake in liquid.

* Change the JS logic back for updating price per item

* Add compare at to prod card. Add style to compare at
---
 assets/component-price.css          |  7 ++++++-
 assets/component-volume-pricing.css | 12 ++++++++++++
 assets/global.js                    |  3 +++
 sections/featured-product.liquid    | 15 ++++++++++++++-
 sections/main-product.liquid        | 17 +++++++++++++++--
 snippets/card-product.liquid        |  5 +++--
 snippets/price.liquid               | 22 ++++++++++++++++++++--
 7 files changed, 73 insertions(+), 8 deletions(-)

diff --git a/assets/component-price.css b/assets/component-price.css
index c73146bf24e..17d6cf969b7 100644
--- a/assets/component-price.css
+++ b/assets/component-price.css
@@ -64,10 +64,15 @@
 }
 
 .price--sold-out .price__badge-sold-out,
-.price--on-sale .price__badge-sale {
+.price--on-sale .price__badge-sale,
+.volume-pricing--sale-badge .price__badge-sale {
   display: inline-block;
 }
 
+.volume-pricing--sale-badge .price__badge-sale {
+  margin-left: 0.5rem;
+}
+
 .price--on-sale .price__sale {
   display: initial;
   flex-direction: row;
diff --git a/assets/component-volume-pricing.css b/assets/component-volume-pricing.css
index 3d07c0ee380..2729866c343 100644
--- a/assets/component-volume-pricing.css
+++ b/assets/component-volume-pricing.css
@@ -49,10 +49,22 @@ volume-pricing show-more-button {
 }
 
 .product-form__input .price-per-item {
+  color: rgba(var(--color-foreground));
   font-size: 1.4rem;
   letter-spacing: 0.06rem;
 }
 
+.price-per-item dl {
+  margin: 0;
+}
+
 .price-per-item dd {
   margin-left: 0;
 }
+
+.price-per-item__container .variant-item__old-price,
+.price__regular .variant-item__old-price {
+  color: rgba(var(--color-foreground), 0.75);
+  font-size: 1.2rem;
+  letter-spacing: 0.07rem;
+}
diff --git a/assets/global.js b/assets/global.js
index c4bda9ec3bf..c128d2dedc4 100644
--- a/assets/global.js
+++ b/assets/global.js
@@ -1124,6 +1124,7 @@ class VariantSelects extends HTMLElement {
 
         if (pricePerItemSource && pricePerItemDestination) {
           pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML;
+          pricePerItemDestination.classList.toggle('visibility-hidden', pricePerItemSource.classList.contains('visibility-hidden'));
         }
 
         const price = document.getElementById(`price-${this.dataset.section}`);
@@ -1174,12 +1175,14 @@ class VariantSelects extends HTMLElement {
     const price = document.getElementById(`price-${this.dataset.section}`);
     const inventory = document.getElementById(`Inventory-${this.dataset.section}`);
     const sku = document.getElementById(`Sku-${this.dataset.section}`);
+    const pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`);
 
     if (!addButton) return;
     addButtonText.textContent = window.variantStrings.unavailable;
     if (price) price.classList.add('visibility-hidden');
     if (inventory) inventory.classList.add('visibility-hidden');
     if (sku) sku.classList.add('visibility-hidden');
+    if (pricePerItem) pricePerItem.classList.add('visibility-hidden');
   }
 
   getVariantData() {
diff --git a/sections/featured-product.liquid b/sections/featured-product.liquid
index 7190579effb..cd9291ae323 100644
--- a/sections/featured-product.liquid
+++ b/sections/featured-product.liquid
@@ -290,7 +290,20 @@
                         data-variant-id="{{ product.selected_or_first_available_variant.id }}"
                       >
                         {%- if product.selected_or_first_available_variant.quantity_price_breaks.size > 0 -%}
+                          {%- assign variant_price_compare = product.selected_or_first_available_variant.compare_at_price -%}
                           <div class="price-per-item">
+                            {%- if variant_price_compare -%}
+                              <dl class="price-per-item--current">
+                                <dt class="visually-hidden">
+                                  {{ 'products.product.price.regular_price' | t }}
+                                </dt>
+                                <dd>
+                                  <s class="variant-item__old-price">
+                                    {{ variant_price_compare | money_with_currency }}
+                                  </s>
+                                </dd>
+                              </dl>
+                            {%- endif -%}
                             {%- if current_qty_for_volume_pricing < volume_pricing_array.last.minimum_quantity -%}
                               {%- assign variant_price = product.selected_or_first_available_variant.price
                                 | money_with_currency
@@ -326,7 +339,7 @@
                                 </dt>
                                 <dd>
                                   <s class="variant-item__old-price">
-                                    {{ variant_price_compare | money }}
+                                    {{ variant_price_compare | money_with_currency }}
                                   </s>
                                 </dd>
                                 <dt class="visually-hidden">
diff --git a/sections/main-product.liquid b/sections/main-product.liquid
index 017e6a67137..8b9e9fc9b4c 100644
--- a/sections/main-product.liquid
+++ b/sections/main-product.liquid
@@ -278,7 +278,20 @@
                   {%- if product.quantity_price_breaks_configured? -%}
                     <price-per-item class="no-js-hidden" id="Price-Per-Item-{{ section.id }}" data-section-id="{{ section.id }}" data-variant-id="{{ product.selected_or_first_available_variant.id }}">
                       {%- if product.selected_or_first_available_variant.quantity_price_breaks.size > 0 -%}
+                        {%- assign variant_price_compare = product.selected_or_first_available_variant.compare_at_price -%}
                         <div class="price-per-item">
+                          {%- if variant_price_compare -%}
+                            <dl class="price-per-item--current">
+                              <dt class="visually-hidden">
+                                {{ 'products.product.price.regular_price' | t }}
+                              </dt>
+                              <dd>
+                                <s class="variant-item__old-price">
+                                  {{ variant_price_compare | money_with_currency }}
+                                </s>
+                              </dd>
+                            </dl>
+                          {%- endif -%}
                           {%- if current_qty_for_volume_pricing < volume_pricing_array.last.minimum_quantity -%}
                             {%- assign variant_price = product.selected_or_first_available_variant.price | money_with_currency -%}
                             <span class="price-per-item--current">{{ 'products.product.volume_pricing.price_at_each' | t: price: variant_price }}</span>
@@ -292,7 +305,7 @@
                             {%- endfor -%}
                           {%- endif -%}
                         </div>
-                        {%- else -%}
+                      {%- else -%}
                         {%- assign variant_price = product.selected_or_first_available_variant.price | money_with_currency -%}
                         {%- assign variant_price_compare = product.selected_or_first_available_variant.compare_at_price -%}
                         <div class="price-per-item">
@@ -303,7 +316,7 @@
                               </dt>
                               <dd>
                                 <s class="variant-item__old-price">
-                                  {{ variant_price_compare | money }}
+                                  {{ variant_price_compare | money_with_currency }}
                                 </s>
                               </dd>
                               <dt class="visually-hidden">
diff --git a/snippets/card-product.liquid b/snippets/card-product.liquid
index e4944714e0b..b8be5fb6b86 100644
--- a/snippets/card-product.liquid
+++ b/snippets/card-product.liquid
@@ -21,6 +21,7 @@
 {% endcomment %}
 
 {{ 'component-rating.css' | asset_url | stylesheet_tag }}
+{{ 'component-volume-pricing.css' | asset_url | stylesheet_tag }}
 
 {%- if card_product and card_product != empty -%}
   {%- liquid
@@ -198,7 +199,7 @@
               </p>
             {%- endif -%}
 
-            {% render 'price', product: card_product, price_class: '' %}
+            {% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}
             {%- if card_product.quantity_price_breaks_configured? -%}
               <div class="card__information-volume-pricing-note">
                 <span class="caption">{{ 'products.product.volume_pricing.note' | t }}</span>
@@ -377,7 +378,7 @@
               <span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
               <div class="caption-with-letter-spacing light">{{ 'products.product.vendor' | t }}</div>
             {%- endif -%}
-            {% render 'price' %}
+            {% render 'price', show_compare_at_price: true %}
           </div>
         </div>
       </div>
diff --git a/snippets/price.liquid b/snippets/price.liquid
index 71bb2436bc9..30f3ad3aa73 100644
--- a/snippets/price.liquid
+++ b/snippets/price.liquid
@@ -6,6 +6,7 @@
   - use_variant: {Boolean} Renders selected or first variant price instead of overall product pricing (optional)
   - show_badges: {Boolean} Renders 'Sale' and 'Sold Out' tags if the product matches the condition (optional)
   - price_class: {String} Adds a price class to the price element (optional)
+  - show_compare_at_price: {Boolean} Renders the compare at price if the product matches the condition (optional)
 
   Usage:
   {% render 'price', product: product %}
@@ -40,8 +41,9 @@
   class="
     price
     {%- if price_class %} {{ price_class }}{% endif -%}
-    {%- if available == false %} price--sold-out {% endif -%}
-    {%- if compare_at_price > price %} price--on-sale {% endif -%}
+    {%- if available == false %} price--sold-out{% endif -%}
+    {%- if compare_at_price > price and product.quantity_price_breaks_configured? != true %} price--on-sale{% endif -%}
+    {%- if compare_at_price > price and product.quantity_price_breaks_configured? %} volume-pricing--sale-badge{% endif -%}
     {%- if product.price_varies == false and product.compare_at_price_varies %} price--no-compare{% endif -%}
     {%- if show_badges %} price--show-badge{% endif -%}
   "
@@ -54,6 +56,22 @@
     {%- endcomment -%}
     <div class="price__regular">
       {%- if product.quantity_price_breaks_configured? -%}
+        {%- if show_compare_at_price -%}
+          {%- unless product.price_varies == false and product.compare_at_price_varies %}
+            <span class="visually-hidden visually-hidden--inline">
+              {{- 'products.product.price.regular_price' | t -}}
+            </span>
+            <span>
+              <s class="price-item price-item--regular variant-item__old-price">
+                {% if settings.currency_code_enabled %}
+                  {{ compare_at_price | money_with_currency }}
+                {% else %}
+                  {{ compare_at_price | money }}
+                {% endif %}
+              </s>
+            </span>
+          {%- endunless -%}
+        {%- endif -%}
         <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
         <span class="price-item price-item--regular">
           {{- 'products.product.volume_pricing.price_range' | t: minimum: money_price_min, maximum: money_price_max -}}

From c4d51e3b318d47216e4d2e1cc96d302dbb90bebd Mon Sep 17 00:00:00 2001
From: Sofia Matulis <sofiamatulis@users.noreply.github.com>
Date: Thu, 20 Jul 2023 12:52:48 -0300
Subject: [PATCH 05/13] Add missing shadow styles to inputs in Quick Order List
 (#2879)

---
 assets/quick-order-list.css | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/assets/quick-order-list.css b/assets/quick-order-list.css
index a29a2b95ea6..ffd99807ac1 100644
--- a/assets/quick-order-list.css
+++ b/assets/quick-order-list.css
@@ -32,6 +32,14 @@ quick-order-list .quantity__button {
   text-align: center;
 }
 
+.variant-item__quantity .quantity:before {
+  z-index: 0;
+}
+
+.variant-item__quantity .quantity__button {
+  z-index: 1;
+}
+
 @media screen and (min-width: 990px) {
   .quick-order-list__total {
     position: sticky;

From b6f496a9255ce82a1fa9c1f09a02197ba7375b7e Mon Sep 17 00:00:00 2001
From: Sofia Matulis <sofiamatulis@users.noreply.github.com>
Date: Thu, 20 Jul 2023 20:52:12 -0300
Subject: [PATCH 06/13] Fix cart drawer for variant list and tablet spacing
 (#2880)

---
 assets/quick-order-list.css |  8 ++++++++
 assets/quick-order-list.js  | 14 ++++++++++++++
 2 files changed, 22 insertions(+)

diff --git a/assets/quick-order-list.css b/assets/quick-order-list.css
index ffd99807ac1..936431b47b1 100644
--- a/assets/quick-order-list.css
+++ b/assets/quick-order-list.css
@@ -289,6 +289,10 @@ quick-order-list-remove-button .icon-remove {
   padding: 0;
 }
 
+.variant-remove-total .button--tertiary {
+  width: max-content;
+}
+
 .variant-remove-total .icon-remove {
   width: 1.2rem;
   height: 1.2rem;
@@ -680,6 +684,10 @@ quick-order-list-remove-button {
     width: 100%;
     max-width: 36rem;
   }
+
+  quick-order-list .tax-note {
+    text-align: center
+  }
 }
 
 quick-order-list .tax-note {
diff --git a/assets/quick-order-list.js b/assets/quick-order-list.js
index 58aa1b497d8..6ef95948c3f 100644
--- a/assets/quick-order-list.js
+++ b/assets/quick-order-list.js
@@ -62,6 +62,7 @@ customElements.define('quick-order-list-remove-all-button', QuickOrderListRemove
 class QuickOrderList extends HTMLElement {
   constructor() {
     super();
+    this.cart = document.querySelector('cart-drawer');
     this.actions = {
       add: 'ADD',
       update: 'UPDATE'
@@ -150,6 +151,11 @@ class QuickOrderList extends HTMLElement {
         id: 'quick-order-list-total',
         section: document.getElementById(this.quickOrderListId).dataset.id,
         selector: '.quick-order-list__total'
+      },
+      {
+        id: 'CartDrawer',
+        selector: '#CartDrawer',
+        section: 'cart-drawer'
       }
     ];
   }
@@ -157,12 +163,20 @@ class QuickOrderList extends HTMLElement {
   renderSections(parsedState) {
     this.getSectionsToRender().forEach((section => {
       const sectionElement = document.getElementById(section.id);
+      if (sectionElement.parentElement.classList.contains('drawer')) {
+        parsedState.items.length > 0 ? sectionElement.parentElement.classList.remove('is-empty') : sectionElement.parentElement.classList.add('is-empty');
+
+        setTimeout(() => {
+          document.querySelector('#CartDrawer-Overlay').addEventListener('click', this.cart.close.bind(this.cart));
+        });
+      }
       const elementToReplace = sectionElement && sectionElement.querySelector(section.selector) ? sectionElement.querySelector(section.selector) : sectionElement;
       if (elementToReplace) {
         elementToReplace.innerHTML =
           this.getSectionInnerHTML(parsedState.sections[section.section], section.selector);
       }
     }));
+
   }
 
   updateMultipleQty(items) {

From d7a46a164438e13a2c8b14c876a8a101083221df Mon Sep 17 00:00:00 2001
From: Eugene Kasimov <105315663+eugenekasimov@users.noreply.github.com>
Date: Fri, 21 Jul 2023 05:17:02 -0700
Subject: [PATCH 07/13] Replace generic section name with section ID. (#2884)

---
 assets/quick-order-list.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/quick-order-list.js b/assets/quick-order-list.js
index 6ef95948c3f..1eb4e7b86d5 100644
--- a/assets/quick-order-list.js
+++ b/assets/quick-order-list.js
@@ -118,7 +118,7 @@ class QuickOrderList extends HTMLElement {
   }
 
   onCartUpdate() {
-    fetch(`${window.location.pathname}?section_id=quick-order-list`)
+    fetch(`${window.location.pathname}?section_id=${this.sectionId}`)
       .then((response) => response.text())
       .then((responseText) => {
         const html = new DOMParser().parseFromString(responseText, 'text/html');

From dc5b855ae045fac9086be5a4a770640172623d99 Mon Sep 17 00:00:00 2001
From: Eugene Kasimov <105315663+eugenekasimov@users.noreply.github.com>
Date: Fri, 21 Jul 2023 10:19:03 -0700
Subject: [PATCH 08/13] Fix error misalignment for Quick order list (#2887)

* Fix error misalignment

* Reduce top space. Address feedback.
---
 assets/quick-order-list.css          |  6 +++++-
 assets/quick-order-list.js           |  9 +++++++--
 snippets/quick-order-list-row.liquid | 27 ++++++++++++++++++++++++++-
 3 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/assets/quick-order-list.css b/assets/quick-order-list.css
index 936431b47b1..22a8fac96de 100644
--- a/assets/quick-order-list.css
+++ b/assets/quick-order-list.css
@@ -529,6 +529,10 @@ quick-order-list-remove-button:hover .icon-remove {
     vertical-align: middle;
   }
 
+  .quick-order-list__table .desktop-row-error td {
+    padding-top: 0;
+  }
+
   .quick-order-list__table .variant-item--unit-price td {
     vertical-align: top;
 
@@ -694,4 +698,4 @@ quick-order-list .tax-note {
   margin-bottom: 2rem;
   display: block;
   width: 100%;
-}
\ No newline at end of file
+}
diff --git a/assets/quick-order-list.js b/assets/quick-order-list.js
index 1eb4e7b86d5..9b43ea75ed1 100644
--- a/assets/quick-order-list.js
+++ b/assets/quick-order-list.js
@@ -348,8 +348,13 @@ class QuickOrderList extends HTMLElement {
   }
 
   updateLiveRegions(id, message) {
-    const variantItemError = document.getElementById(`Quick-order-list-item-error-${id}`);
-    if (variantItemError) variantItemError.querySelector('.variant-item__error-text').innerHTML = message;
+    const variantItemErrorDesktop = document.getElementById(`Quick-order-list-item-error-desktop-${id}`);
+    const variantItemErrorMobile = document.getElementById(`Quick-order-list-item-error-mobile-${id}`);
+    if (variantItemErrorDesktop) {
+      variantItemErrorDesktop.querySelector('.variant-item__error-text').innerHTML = message;
+      variantItemErrorDesktop.closest('tr').classList.remove('hidden');
+    }
+    if (variantItemErrorMobile) variantItemErrorMobile.querySelector('.variant-item__error-text').innerHTML = message;
 
     this.variantItemStatusElement.setAttribute('aria-hidden', true);
 
diff --git a/snippets/quick-order-list-row.liquid b/snippets/quick-order-list-row.liquid
index 29ae3607b49..89b82c491ff 100644
--- a/snippets/quick-order-list-row.liquid
+++ b/snippets/quick-order-list-row.liquid
@@ -308,7 +308,11 @@
           {%- endif -%}
         </div>
       {%- endif -%}
-      <div class="variant-item__error" id="Quick-order-list-item-error-{{ variant.id }}" role="alert">
+      <div
+        class="variant-item__error large-up-hide"
+        id="Quick-order-list-item-error-mobile-{{ variant.id }}"
+        role="alert"
+      >
         <small class="variant-item__error-text"></small>
         <svg
           aria-hidden="true"
@@ -432,6 +436,27 @@
     {% # theme-check-enable %}
   </td>
 </tr>
+<tr class="small-hide medium-hide hidden desktop-row-error">
+  <td></td>
+  <td>
+    <div class="variant-item__error" id="Quick-order-list-item-error-desktop-{{ variant.id }}" role="alert">
+      <small class="variant-item__error-text"></small>
+      <svg
+        aria-hidden="true"
+        focusable="false"
+        class="icon icon-error"
+        viewBox="0 0 13 13"
+      >
+        <circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
+        <circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/>
+        <path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
+        <path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
+      </svg>
+    </div>
+  </td>
+  <td></td>
+  <td></td>
+</tr>
 
 {%- if product.quantity_price_breaks_configured? -%}
   <volume-pricing class="hidden" id="Volume-{{ variant.id }}">

From ded1030695cb834a712a179cd2c5b8bb17cd0bc3 Mon Sep 17 00:00:00 2001
From: Sofia Matulis <sofiamatulis@users.noreply.github.com>
Date: Fri, 21 Jul 2023 14:54:33 -0300
Subject: [PATCH 09/13] Fix hardcoded info color (#2893)

---
 snippets/icon-info.liquid | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/snippets/icon-info.liquid b/snippets/icon-info.liquid
index 1f335db9355..0b916a8bac9 100644
--- a/snippets/icon-info.liquid
+++ b/snippets/icon-info.liquid
@@ -1,5 +1,5 @@
 <svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5 7C14.5 10.866 11.366 14 7.5 14C3.63401 14 0.5 10.866 0.5 7C0.5 3.13401 3.63401 0 7.5 0C11.366 0 14.5 3.13401 14.5 7ZM7.5 13.1737C10.9096 13.1737 13.6737 10.4096 13.6737 7C13.6737 3.59035 10.9096 0.826284 7.5 0.826284C4.09035 0.826284 1.32628 3.59035 1.32628 7C1.32628 10.4096 4.09035 13.1737 7.5 13.1737Z" fill="currentColor" fill-opacity="0.75"/>
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M8.19189 3.55353C8.19189 3.16326 7.91572 2.82899 7.50163 2.82899C7.09256 2.82899 6.80626 3.15786 6.80626 3.55353C6.80626 3.94642 7.09511 4.27259 7.50163 4.27259C7.9132 4.27259 8.19189 3.94104 8.19189 3.55353Z" fill="#121212" fill-opacity="0.75"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M8.19189 3.55353C8.19189 3.16326 7.91572 2.82899 7.50163 2.82899C7.09256 2.82899 6.80626 3.15786 6.80626 3.55353C6.80626 3.94642 7.09511 4.27259 7.50163 4.27259C7.9132 4.27259 8.19189 3.94104 8.19189 3.55353Z" fill="currentColor" fill-opacity="0.75"/>
   <path d="M6.97141 5.72371C6.97141 5.54117 7.11938 5.3932 7.30192 5.3932H7.69854C7.88107 5.3932 8.02905 5.54117 8.02905 5.72371V10.8467C8.02905 11.0292 7.88107 11.1772 7.69854 11.1772H7.30192C7.11938 11.1772 6.97141 11.0292 6.97141 10.8467V5.72371Z" fill="currentColor" fill-opacity="0.75"/>
 </svg>

From ae255548d6ed285a480a869f924500a2c9241711 Mon Sep 17 00:00:00 2001
From: Eugene Kasimov <105315663+eugenekasimov@users.noreply.github.com>
Date: Mon, 24 Jul 2023 06:17:41 -0700
Subject: [PATCH 10/13] Fix an error (#2903)

---
 assets/quick-order-list.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/assets/quick-order-list.js b/assets/quick-order-list.js
index 9b43ea75ed1..7a597594774 100644
--- a/assets/quick-order-list.js
+++ b/assets/quick-order-list.js
@@ -163,7 +163,7 @@ class QuickOrderList extends HTMLElement {
   renderSections(parsedState) {
     this.getSectionsToRender().forEach((section => {
       const sectionElement = document.getElementById(section.id);
-      if (sectionElement.parentElement.classList.contains('drawer')) {
+      if (sectionElement && sectionElement.parentElement && sectionElement.parentElement.classList.contains('drawer')) {
         parsedState.items.length > 0 ? sectionElement.parentElement.classList.remove('is-empty') : sectionElement.parentElement.classList.add('is-empty');
 
         setTimeout(() => {
@@ -284,9 +284,10 @@ class QuickOrderList extends HTMLElement {
         } else {
           this.updateMessage(-parseInt(quantityElement.dataset.cartQuantity))
         }
-      }).catch(() => {
+      }).catch((error) => {
         this.querySelectorAll('.loading-overlay').forEach((overlay) => overlay.classList.add('hidden'));
         this.resetQuantityInput(id);
+        console.error(error);
         this.setErrorMessage(window.cartStrings.error);
       })
       .finally(() => {

From 00242b5317f521c72af686d671da4f08ddb3cef5 Mon Sep 17 00:00:00 2001
From: Ken Meleta <30790058+kmeleta@users.noreply.github.com>
Date: Mon, 24 Jul 2023 10:32:18 -0600
Subject: [PATCH 11/13] Fix social list styles loading (#2900)

---
 sections/announcement-bar.liquid | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/sections/announcement-bar.liquid b/sections/announcement-bar.liquid
index 2dd6f21fa9d..92426f1261d 100644
--- a/sections/announcement-bar.liquid
+++ b/sections/announcement-bar.liquid
@@ -14,6 +14,10 @@
   endif
 -%}
 
+{% if social_icons %}
+  {{ 'component-list-social.css' | asset_url | stylesheet_tag }}
+{% endif %}
+
 <div
   class="utility-bar color-{{ section.settings.color_scheme }} gradient{% if section.settings.show_line_separator and section.blocks.size > 0 %} utility-bar--bottom-border{% elsif section.settings.show_line_separator and section.settings.show_social and social_icons%} utility-bar--bottom-border-social-only{% endif %}{% if section.settings.enable_country_selector or section.settings.enable_language_selector %} header-localization{% endif %}"
   {{ block.shopify_attributes }}

From 13dec2a98f18dca3a0d5d04319f31f5d3c9a77fc Mon Sep 17 00:00:00 2001
From: Kai <KaichenWang@users.noreply.github.com>
Date: Wed, 26 Jul 2023 15:08:14 +0100
Subject: [PATCH 12/13] v11.0.0 version bump and release notes (#2906)

---
 config/settings_schema.json |  2 +-
 release-notes.md            | 38 ++++++++++++++++++-------------------
 2 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/config/settings_schema.json b/config/settings_schema.json
index e5836f0b756..90bdeaa356d 100644
--- a/config/settings_schema.json
+++ b/config/settings_schema.json
@@ -2,7 +2,7 @@
   {
     "name": "theme_info",
     "theme_name": "Dawn",
-    "theme_version": "10.0.0",
+    "theme_version": "11.0.0",
     "theme_author": "Shopify",
     "theme_documentation_url": "https://help.shopify.com/manual/online-store/themes",
     "theme_support_url": "https://support.shopify.com/"
diff --git a/release-notes.md b/release-notes.md
index 3125a87b6be..d4dc701125b 100644
--- a/release-notes.md
+++ b/release-notes.md
@@ -1,26 +1,24 @@
-Dawn 10.0.0 introduces new color schemes, animation options across templates and sections, performance improvements for large images, an improved announcement bar, and the ability to change the shape of product cards images.
+Dawn 11.0.0 introduces new customization options to the announcement bar, new animations and hover effects, and a Quick order list section to product pages. 
 
 ### Added
-- Important: Fade in animations will now be enabled by default on your theme. If you’d like to disable them, navigate to your theme settings → animations → uncheck “Reveal sections on scroll”.
-- Important: We’ve introduced a new visual way of setting your theme's colors. In your theme settings, you can now configure 5+ color schemes and apply them across sections in your themes. The default colors are created based on your theme’s current color settings, but we recommend reviewing them before publishing.
-- We’ve added new animations to your theme settings where you can have sections fade in or slide in when the user scrolls.
-- You can pick a new hover effect for buttons and cards - 3D lift.
-- You now have options to add animations on the Image with Text and Image Banner sections.
-- We added options to change the shape of the product card images.
-- We introduced the ability to send and schedule a gift card to a recipient.
-- You can now create different color schemes and apply them across your pages and sections.
+- You can now add multiple Announcement bar sections to your Header. 
+- You can now display social media icons in the Announcement bar. 
+- You can now add the country/region selector and the language selector to the Announcement bar.
+- You can now set a different color scheme for your navigation menu than for your Header. 
+- We added a new “Zoom in on scroll” animation option to the Image with text and Image banner sections.
+- We added a new “Vertical lift” hover effect option to cards and buttons. 
+- You can now apply the outline button style to the button on Image with text. 
+- You can now adjust the bottom padding on the Subtotal section in the cart.
+- We introduced a new Quick order list section to the product template. This allows you to optimize your product pages for bulk buying. 
+- Customers who qualify for volume pricing will now see the different price breaks on your product pages. 
 
 ### Changed
-- Important: Color schemes now apply to content on the Image Banner and Slideshow sections, regardless of container visibility. Please review and adjust color schemes to ensure the content is readable.
-- There are now unique identifiers on navigation links, which lets you add custom CSS in the Header section.
-- We improved the announcement bar by adding a slider for each announcement instead of stacking them on top of each other.
-- We introduced new placeholder images across all theme sections.
+- We reduced the height of the Announcement bar section.
+- You can now choose to auto rotate the Announcement bar slides every 3 seconds. The minimum was previously 5 seconds.
+- Your mobile menu drawer will now appear full-width.
+- The Featured collection section will now display placeholder product images until a collection is selected. 
 
 ### Fixes and improvements
-- We fixed some spacing issues in the mobile drawer.
-- We improved the performance of the Collage section images.
-- We fixed some accessibility issues with the language and currency picker in the mobile drawer.
-- We fixed the facet filter animation duration to match the menu drawer.
-
-### Removed
-- Important: Decorative icons will now always inherit text color.
+- We fixed a bug where text links were not styled properly in the heading of the Related products section.
+- We made light stylistic improvements to link styles, alignment and spacing for both the dropdown and mega menu types in the Header.
+- We fixed a bug where the Footer would display extra white space when the “Show email signup” setting was left unchecked. 
\ No newline at end of file

From b8bc0205d47e4df1a72d8a52a9262c74f3579c35 Mon Sep 17 00:00:00 2001
From: Kai <KaichenWang@users.noreply.github.com>
Date: Wed, 26 Jul 2023 15:29:49 +0100
Subject: [PATCH 13/13] Update quantity-popover.css

Add new line at end of file
---
 assets/quantity-popover.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/quantity-popover.css b/assets/quantity-popover.css
index c39f7284a01..48645e71dd9 100644
--- a/assets/quantity-popover.css
+++ b/assets/quantity-popover.css
@@ -160,4 +160,4 @@ quantity-popover .quantity__rules .divider:nth-child(2)::before {
 quantity-popover .quantity__button:not(:focus-visible):not(.focused),
 quantity-popover .quantity__input:not(:focus-visible):not(.focused) {
   background-color: initial;
-}
\ No newline at end of file
+}