I want you to redesign this code below, UX and UX please
<template>

  <page-breadcrumb>
    <li class="breadcrumb-item">
      <router-link to="/orders">{{ $t('My orders') }}</router-link>
    </li>
    <li class="breadcrumb-item">{{ $t('Place order') }}</li>
  </page-breadcrumb>

  <div class="container mt-5">

    <div class="options clearfix mb-3">
      <app-resource-viewer href="https://www.youtube.com/watch?v=wMwwdlbbdH8" target="_blank" class="btn btn-link btn-sm float-end ms-2" data-fancybox="gallery">
        {{ $t('How to create an order?') }}
      </app-resource-viewer>
    </div>

    <div v-if="!OrderStore.checkout" class="mb-5">
      <div class="card mb-3">
        <div class="card-header fw-bold bg-light">{{ $t('Products') }}</div>
        <div class="card-Body p-3 px-4">

          <div v-if="cart.products.length"  v-bind:class="{ 'is-invalid': OrderStore.errors.has('products') }">

            <app-table>
              <thead class="text-center p-3">
                <tr>
                  <th class="col">{{ $t('Product') }}</th>
                  <th class="col">{{ $t('Options') }}</th>
                  <th class="col">{{ $t('Unit price') }}</th>
                  <th class="col">{{ $t('Quantity') }}</th>
                  <th class="col">{{ $t('Total price') }}</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in cart.products" :key="index" class="text-center">
                  <td>
                    <img :src="item.product.preview" class="rounded" width="60" />
                    <div>{{ item.product.name }}</div>
                  </td>
                  <td>
                    <div class="bg-light p-2" role="button" @click="changeProductOptions(item)"
                      v-if="Object.keys(item.product.product_attributes).length">

                      <div v-for="(attrV, attrK) in item.product.product_attributes" :key="index" class="mb-1">
                        <span class="text-capitalize">{{ attrK }}</span> :

                        <div class="d-inline-block text-uppercase" v-if="attrV">
                          <span v-if="attrK == 'color'" class="rounded px-1" :style="
                          {
                            backgroundColor: `${attrV.value} !important`,
                            color: TextColorFromBackground(attrV.value),
                            border: `1px solid ${TextColorFromBackground(attrV.value)}`
                          }"
                          >
                            {{ attrV.name }}
                          </span>
                          <span v-else class="rounded px-1">
                            {{ attrV.value }}
                          </span>
                        </div>

                      </div>

                    </div>
                    <button class="btn btn-primary-gradient btn-grad-gradient btn-grad small py-2" role="button" @click="changeProductOptions(item)"
                      v-else>
                      {{ $t('Add options') }}
                    </button>
                  </td>
                  <td>{{ item.product.price_label }}</td>
                  <td>

                    <span class="badge bg-primary rounded-pill">{{ item.quantity }}</span>
                    <div class="btn-group ms-2">

                      <button type="button" class="btn btn-sm btn-primary-gradient btn-grad-gradient btn-grad"
                        @click="OrderStore.cartDecreaseProductQuantity(item.product.code)">
                        <i class="bi bi-dash-lg"></i>
                      </button>
                      <button type="button" class="btn btn-sm btn-primary-gradient btn-grad-gradient btn-grad"
                        @click="OrderStore.cartIncreaseProductQuantity(item.product.code)">
                        <i class="bi bi-plus-lg"></i>
                      </button>

                    </div>

                  </td>
                  <td>{{ $currencyFormat(OrderStore.cartTotalProductAmount(item.product.code)) }}</td>
                  <td>
                    <button type="button" class="btn btn-sm btn-outline-danger btn-circle "
                      @click="OrderStore.removeProduct(item.product.code)">
                      <i class="bi bi-trash"></i>
                    </button>
                  </td>
                </tr>

              </tbody>
            </app-table>

            <div class="text-end fw-bold">
              {{ $t('Total') }}: {{ $currencyFormat(OrderStore.cartTotalAmount()) }}
            </div>

            <div class="text-center" v-bind:class="{ 'is-invalid': OrderStore.errors.has('products') }">
              <button class="btn btn-outline-secondary btn-sm" @click="showList">{{ $t('Add a product') }}</button>
            </div>

          </div>

          <empty-state v-else type="cart" text="Your cart is empty"
            v-bind:class="{ 'is-invalid': OrderStore.errors.has('products') }" add-new="Add a product"
            @add-new="showList" />

          <div class="invalid-feedback text-center fs-5 mt-3">
            {{ OrderStore.errors.get('products') }}
          </div>

        </div>
      </div>

      <div class="card mb-3">
        <div class="card-header fw-bold bg-light">{{ $t('Shipping') }}</div>
        <div class="card-Body p-3">
          <div class="row">

            <div class="col-lg-6 mb-3">
              <div class="form-floating">
                <input type="text" class="form-control" id="client-shipping-name" placeholder="Client name"
                  v-model="OrderStore.shipping.name"
                  v-bind:class="{ 'is-invalid': OrderStore.errors.has('shipping.name') }">
                <label for="client-shipping-name">{{ $t('Client name') }}</label>
                <div class="invalid-feedback">
                  {{ OrderStore.errors.get('shipping.name') }}
                </div>
              </div>
            </div>

            <div class="col-lg-6 mb-3">
              <div class="form-floating">
                <input type="text" class="form-control" id="client-shipping-phone" placeholder="Client phone"
                  v-model="OrderStore.shipping.phone"
                  v-bind:class="{ 'is-invalid': OrderStore.errors.has('shipping.phone') }">
                <label for="client-shipping-phone">{{ ('Client phone') }}</label>
                <div class="invalid-feedback">
                  {{ OrderStore.errors.get('shipping.phone') }}
                </div>
              </div>
            </div>

            <div class="col-lg-6 mb-3">
              <div class="form-floating">

                <v-select :options="shippingCarrierStore.item.zones" v-model="OrderStore.shipping.city"
                  v-bind:class="{ 'is-invalid': OrderStore.errors.has('shipping.city') }"
                  :placeholder="$t('Client city')" label="name">

                  <template #option="{ delivered_fees, name, refused_fees, retourned_fees }">
                    <div class="border-bottom p-1">
                      <div class="fw-bold text-capitalize">{{ name }}</div>
                      <div>
                        <span class="small muted fw-light me-1">{{ $t('Delivered fees') }}: {{
                          $currencyFormat(delivered_fees)
                        }}</span>
                        <span class="small muted fw-light me-1">{{ $t('Refused fees') }}: {{
                          $currencyFormat(refused_fees)
                        }}</span>
                        <span class="small muted fw-light me-1">{{ $t('returned fees') }}: {{
                          $currencyFormat(retourned_fees)
                        }}</span>
                      </div>
                    </div>
                  </template>

                  <template #selected-option="{ name, delivered_fees }">
                    {{ name }} <span class="badge bg-outline-secondary ms-2">{{
                      $currencyFormat(delivered_fees)
                    }}</span>
                  </template>

                </v-select>

                <div class="invalid-feedback">
                  {{ OrderStore.errors.get('shipping.city') }}
                </div>
              </div>
            </div>

            <div class="col-lg-6 mb-3">
              <div class="form-floating">
                <input type="text" class="form-control" id="client-shipping-address" placeholder="Client address"
                  v-model="OrderStore.shipping.address"
                  v-bind:class="{ 'is-invalid': OrderStore.errors.has('shipping.address') }">
                <label for="client-shipping-address">{{ ('Client Address') }}</label>
                <div class="invalid-feedback">
                  {{ OrderStore.errors.get('shipping.address') }}
                </div>
              </div>
            </div>

            <div class="col-lg-6 mb-3">
              <div class="form-floating">
                <input type="text" class="form-control" id="client-shipping-note" placeholder="Note"
                  v-model="OrderStore.shipping.note"
                  v-bind:class="{ 'is-invalid': OrderStore.errors.has('shipping.note') }">
                <label for="client-shipping-address">{{ ('Note') }}</label>
                <div class="invalid-feedback">
                  {{ OrderStore.errors.get('shipping.note') }}
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
      <save-button @click="validationOrder()" :in-action="OrderStore.isSaving" class="btn btn-primary-gradient btn-grad float-end"
        text="checkout" />
    </div>

    <checkout v-else />

  </div>

</template>
<script setup>
import vSelect from "vue-select";
import "vue-select/dist/vue-select.css";
import { storeToRefs } from 'pinia'
import { UseOrderStore } from './../../stores/OrderStore'
import { useShippingCarrierStore } from './../../stores/ShippingCarrierStore'
import ListProducts from './ListProducts'
import { onBeforeMount, inject } from 'vue';
import { useProductTemplateStore } from './../../stores/ProductTemplateStore'
import ChangeCartProductOptions from './cart/ChangeCartProductOptions.vue'
import { TextColorFromBackground } from '../../../../shared/helpers';
import Checkout from "./Checkout.vue";

const ProductTemplateStore = useProductTemplateStore()
const props = defineProps(['template_id'])
const { cart } = storeToRefs(UseOrderStore())
const OrderStore = UseOrderStore()
const shippingCarrierStore = useShippingCarrierStore()
const app = inject('app')


function validationOrder() {

  OrderStore.errors.clearAll()

  if (!OrderStore.cartHasProducts()) OrderStore.errors.add('products', ['At least one product must be selected'])
  if (!OrderStore.shipping.name) OrderStore.errors.add('shipping.name', ['Shipping name is required'])
  if (!OrderStore.shipping.city) OrderStore.errors.add('shipping.city', ['Shipping city  is required'])
  if (!OrderStore.shipping.address) OrderStore.errors.add('shipping.address', ['Shipping address is required'])
  if (!OrderStore.shipping.phone) OrderStore.errors.add('shipping.phone', ['Shipping phone is required'])

  if( ! isValidPhoneNumber( OrderStore.shipping.phone ) ){
    OrderStore.errors.add('shipping.phone', ['Shipping phone seems to be invalid'])
  }

  OrderStore.cart.products.forEach(item => {
    if( ! item.product.product_attributes || Object.keys(item.product.product_attributes).length <= 0 ) {

      OrderStore.errors.add('products', ['One or more products has no options'])
    }
  });

  if (OrderStore.errors.any()) {
    OrderStore.isSaving = false
    return;
  }

  OrderStore.checkout = true

}

function isValidPhoneNumber(phoneNumber) {
  var regex = /^(00212|\+212|0)[1-9]\d{8}$/;
  return regex.test(phoneNumber);
}

onBeforeMount(() => {
  if (props.template_id) {
    // Load product template and add it to it to cart.
    ProductTemplateStore.template_id = props.template_id
    ProductTemplateStore.loadItem()
      .then((response) => {
        OrderStore.addProductToCart(response.data.data)
      })
  }
  shippingCarrierStore.loadItem()
})

function changeProductOptions(item) {
  app.$modal(ChangeCartProductOptions, null, {
    clickToClose: true,
    escToClose: true,
    item: item
  })
}
</script>
<script>
export default {
  data() { return {} },
  methods: {
    showList() {
      this.$modal(ListProducts, 'My templates')
    }
  }
}
</script>