"Coming Soon" button changes to "Add To Cart" when product size is picked

[Jiozx]

Hi,

I have added an extra button to product pages for products that have been tagged with "soon".

When you go to the product page of those products, the button is disabled and shows "Coming Soon", but when I click on another size it goes back to saying "Add To Cart", and the button is re-enabled.

I'm using Dawn theme.

Here are my buttons in main-product.liquid

<button
                        type="submit"
                        name="add"
                        class="product-form__submit button button--full-width {% if block.settings.show_dynamic_checkout %}button--secondary{% else %}button--primary{% endif %}"
                        {% if product.selected_or_first_available_variant.available == false %}
                          disabled
                        {% endif %}
                        {% if product.tags contains "soon" %}
                          disabled
                        {% endif %}
                      >
                        <span>
                          {% for tag in product.tags %}
                            {% if tag contains 'soon' %}
                              {% assign soon_tag = 'soon' %}
                            {% endif %}
                          {% endfor %}
                    
                          {% if soon_tag == 'soon' %}
                            {{ 'products.product.unavailable' | t }}
                          {%- elsif product.selected_or_first_available_variant.available -%}
                            {{ 'products.product.add_to_cart' | t }}
                          {%- else -%}
                            {{ 'products.product.sold_out' | t }}
                          {%- endif -%}
                        </span>
                        <div class="loading-overlay__spinner hidden">
                          <svg
                            aria-hidden="true"
                            focusable="false"
                            role="presentation"
                            class="spinner"
                            viewBox="0 0 66 66"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                          </svg>
                        </div>
                      </button>

Here are the already existing buttons' JavaScript in product-form.js

const formData = new FormData(this.form);
      if (this.cart) {
        formData.append('sections', this.cart.getSectionsToRender().map((section) => section.id));
        formData.append('sections_url', window.location.pathname);
        this.cart.setActiveElement(document.activeElement);
      }
      config.body = formData;

      fetch(`${routes.cart_add_url}`, config)
        .then((response) => response.json())
        .then((response) => {
          if (response.status) {
            this.handleErrorMessage(response.description);

            const soldOutMessage = this.submitButton.querySelector('.sold-out-message');
            if (!soldOutMessage) return;
            this.submitButton.setAttribute('aria-disabled', true);
            this.submitButton.querySelector('span').classList.add('hidden');
            soldOutMessage.classList.remove('hidden');
            this.error = true;
            return;
          } else if (!this.cart) {
            window.location = window.routes.cart_url;
            return;
          }

          this.error = false;
          const quickAddModal = this.closest('quick-add-modal');
          if (quickAddModal) {
            document.body.addEventListener('modalClosed', () => {
              setTimeout(() => { this.cart.renderContents(response) });
            }, { once: true });
            quickAddModal.hide(true);
          } else {
            this.cart.renderContents(response);
          }
        })
        .catch((e) => {
          console.error(e);
        })
        .finally(() => {
          this.submitButton.classList.remove('loading');
          if (this.cart && this.cart.classList.contains('is-empty')) this.cart.classList.remove('is-empty');
          if (!this.error) this.submitButton.removeAttribute('aria-disabled');
          this.querySelector('.loading-overlay__spinner').classList.add('hidden');
        });
    }

[Jiozx]

Anyone ?