floranet/src/pages/CheckoutSuccessPage.vue

<script>
import { apiBack } from "src/boot/axios";
import { useCheckoutForm } from "src/hooks/useCheckoutForm";
import { useLocalStorage } from "src/hooks/useLocalStorage";
import { defineComponent, onBeforeMount, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";

export default defineComponent({
  name: "CheckoutSuccessPage",
  setup() {
    const { query } = useRoute();
    const { push } = useRouter();
    const { getItem, removeItem } = useLocalStorage();
    console.log(query);
    const costumerData = getItem("costumer");

    const productsPurchased = reactive({ data: [] });
    const totalPrice = ref();

    async function getSuccessData() {
      try {
        productsPurchased.data = await new Promise(async (resolve, reject) => {
          try {
            const {
              data: { data },
            } = await apiBack.post("payment/success", {
              // params: query,
              data: JSON.stringify({ customer: costumerData, ...query }),
            });
            resolve(data.products);
            removeItem("costumer");
          } catch (error) {
            reject(error);
          }
        }).then((res) => res);

        totalPrice.value = await productsPurchased.data.reduce(
          (acc, { price }) => acc + Number(price),
          0
        );
      } catch (error) {
        console.error(`FATAL ERROR ::: ${error}`);
        push("/checkout/error");
      }
    }

    onBeforeMount(async () => {
      const queryObj = {
        paymentId: query.paymentId,
        productsIds: query.productsIds,
        PayerID: query.PayerID,
      };
      for (const [_, value] of Object.entries(queryObj)) {
        if (!value) return push("/");
      }

      await getSuccessData();
      console.log(productsPurchased.data);
    });

    const { isError, onError } = useCheckoutForm();
    const steppers = [
      {
        value: 1,
        name: "Paso 1",
        description: "Datos de facturación",
        active: true,
      },
      {
        value: 2,
        name: "Paso 2",
        description: "Confirmación",
        active: true,
      },
      {
        value: 3,
        name: "Paso 3",
        description: "Pago",
        active: true,
      },
    ];

    return { isError, onError, steppers, productsPurchased, totalPrice };
  },
});
</script>

<template>
  <q-page class="success-container">
    <div class="checkout-steps">
      <div
        v-for="({ active, description, name, value }, i) in steppers"
        class="step-item-container"
        :key="i"
      >
        <div class="step-item">
          <div class="circle-step-container">
            <span class="border-step" :class="[i == 0 && 'transparent']" />

            <div class="circle-step" :class="active && 'active'">
              <span class="step-value">{{ value }}</span>
            </div>

            <span
              class="border-step"
              :class="[i == steppers.length - 1 && 'transparent']"
            />
          </div>

          <div class="step-content">
            <div class="title">
              <h4>{{ name }}</h4>
            </div>

            <div class="description">
              <p>{{ description }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="checkout-success" id="success-block">
      <h6 class="checkout-success-title green-text">
        Has efectuado la siguiente compra
      </h6>

      <div class="checkout-success-body">
        <div class="checkout-success-content">
          <ul class="checkout-success-list">
            <li
              v-for="({ name, price, image }, index) in productsPurchased.data"
              :key="index"
              class="checkout-success-item"
            >
              <div class="checkout-item-content">
                <div class="checkout-product-details">
                  <img
                    :src="isError ? '../assets/empty-img.jpg' : image"
                    :alt="name"
                    class="checkout-product-img"
                    @error="onError"
                  />

                  <p class="checkout-product-title">
                    {{ name }}
                  </p>
                </div>

                <p class="checkout-product-price">{{ price }}€</p>
              </div>
            </li>
          </ul>
        </div>

        <footer class="checkout-success-footer">
          <p class="checkout-success-paragraph">Total</p>
          <p class="checkout-success-paragraph">{{ totalPrice }}€</p>
        </footer>
      </div>
    </div>
  </q-page>
</template>

<style lang="scss" scoped>
.success-container {
  display: flex;
  flex-direction: column;
  margin-top: 50px;
}

.checkout-steps {
  display: flex;
  justify-content: center;
  align-items: center;
}

.step-item-container {
  min-width: 200px;
}

.border-step {
  width: 90px;
  height: 1px;
  background-color: $primary-dark;
}

.circle-step-container {
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: 1fr auto 1fr;
}

.circle-step {
  width: 56px;
  height: 56px;
  border: 1px solid $primary-dark;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  user-select: none;
  .step-value {
    font-family: $font-questrial;
    color: $primary-dark;
    font-size: 1.25rem;
  }
  &.active {
    background-color: $primary-dark;
    .step-value {
      color: $white;
    }
  }
}

.step-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: $font-questrial;
  h4 {
    font-size: 1rem;
    font-weight: 700;
    color: $text-default;
    margin-top: 5px;
    margin-bottom: 4px;
    line-height: 1.3;
  }
  p {
    font-size: 0.875rem;
    color: $text-default;
    font-family: $font-lora;
  }
}

.checkout-success {
  width: min(100%, 499px);
  margin: 122px auto 0;
  text-align: center;
  & .checkout-success-title {
    margin-bottom: 26px;
  }
  & .checkout-success-body {
    & .checkout-success-content {
      background-color: $secondary-5;
      padding: 30px 46px 42px 38px;
      border-radius: 5px 5px 0px 0px;
      & .checkout-success-list {
        display: flex;
        flex-direction: column;
        gap: 28px;
        & .checkout-success-item {
          display: flex;
          flex: 1;
          & .checkout-item-content {
            display: flex;
            justify-content: space-between;
            flex: 1;
            min-height: 61px;
            & .checkout-product-details {
              display: flex;
              gap: 14px;
              & .checkout-product-img {
                object-fit: cover;
                width: 54px;
                height: 100%;
                border-radius: 5px;
              }

              & .checkout-product-title {
                font-size: $font-12;
                line-height: 21px;
                letter-spacing: 0.24px;
                font-family: $font-questrial;
                color: $text-default;
              }
            }

            & .checkout-product-price {
              color: $text-muted-one;
              font-family: $font-roboto;
              font-size: $font-12;
              line-height: 21px;
              letter-spacing: 0.24px;
            }
          }
        }
      }

      @media only screen and (max-width: $med-lg) {
        padding-right: 9px;
      }
    }

    & .checkout-success-footer {
      display: flex;
      justify-content: space-between;
      background-color: $secondary-40;
      border-radius: 0px 0px 5px 5px;
      padding: 14px 46px 7px 36px;

      & .checkout-success-paragraph {
        font-family: $font-lora;
        letter-spacing: 0.32px;
        line-height: 21px;
        font-weight: 600;
        color: $text-muted-one;
      }
    }
  }
}
</style>