Refactor price display

Author: w3bdesign

components/Products/ProductPrice.vue

@@ -6,71 +6,59 @@
       :class="shouldCenterPrice ? 'justify-center' : ''"
     >
       <p class="pt-1 mt-4 text-gray-900" :class="getFontSizeClass">
-        <span v-if="hasVariations"> {{ formatPrice(variantPrice) }}</span>
-        <span v-else>{{ formatPrice(salePrice) }}</span>
+        {{ formatPrice(displayPrice) }}
       </p>
       <p
-        v-if="hasVariations"
         class="pt-1 pl-4 mt-4 text-gray-900 line-through"
         :class="getSaleFontSizeClass"
       >
-        >
-        {{ formatPrice(variantPrice) }}
-      </p>
-      <p
-        v-else
-        class="pt-1 pl-4 mt-4 text-gray-900 line-through"
-        :class="getSaleFontSizeClass"
-      >
-        {{ formatPrice(regularPrice) }}
+        {{ formatPrice(basePrice) }}
       </p>
     </div>
     <p
       v-else
-      class="flex justify-center pt-1 mt-4 text-gray-900"
-      :class="getFontSizeClass"
+      class="flex pt-1 mt-4 text-2xl text-gray-900"
+      :class="shouldCenterPrice ? 'justify-center' : ''"
     >
-      {{ formatPrice(nonSalePrice) }}
+      {{ formatPrice(displayPrice) }}
     </p>
   </div>
 </template>
 
 <script setup>
-/**
- * Vue.js component that renders a product's price.
- *
- * @typedef {Object} PriceComponentProps
- * @property {string} [variantPrice] - The price of a product's variant.
- * @property {boolean} onSale - Whether or not the product is on sale.
- * @property {boolean} hasVariations - Whether or not the product has variations.
- * @property {string} [salePrice] - The sale price of a product.
- * @property {string} regularPrice - The regular price of a product.
- * @property {string} nonSalePrice - The price of a product that is not on sale.
- * @property {string} [priceFontSize] - The font size of the price.
- * @property {boolean} [shouldCenterPrice] - Whether or not the price should be centered.
- *
- * @typedef {Object} PriceComponentComputedProperties
- * @property {string} getFontSizeClass - The font size CSS class for the regular price.
- * @property {string} getSaleFontSizeClass - The font size CSS class for the sale price.
- *
- * @typedef {Object} PriceComponentExports
- * @property {PriceComponentProps} props - The component's props.
- * @property {PriceComponentComputedProperties} computed - The component's computed properties.
- *
- * @type {PriceComponentExports}
- */
-
-import { formatPrice } from "@/utils/functions";
+import { computed } from "vue";
+import {
+  formatPrice,
+  filteredVariantPrice,
+  hasVariations,
+} from "@/utils/functions";
 
 const props = defineProps({
-  variantPrice: { type: String, required: false },
-  onSale: { type: Boolean, required: true },
-  hasVariations: { type: Boolean, required: true },
-  salePrice: { type: String, required: false },
-  regularPrice: { type: String, required: true },
-  nonSalePrice: { type: String, required: true },
-  priceFontSize: { type: String, required: false },
-  shouldCenterPrice: { type: Boolean, required: false },
+  product: Object,
+  priceFontSize: String,
+  shouldCenterPrice: Boolean,
+});
+
+const onSale = computed(() => props.product.onSale);
+
+const productHasVariations = computed(() => hasVariations(props.product));
+
+const basePrice = computed(() => {
+  if (productHasVariations.value) {
+    return filteredVariantPrice(props.product.price);
+  } else {
+    return props.product.regularPrice;
+  }
+});
+
+const displayPrice = computed(() => {
+  if (onSale.value) {
+    return productHasVariations.value
+      ? filteredVariantPrice(props.product.price)
+      : props.product.salePrice;
+  } else {
+    return props.product.price;
+  }
 });
 
 const getFontSizeClass = computed(() => {

components/Products/ProductsShowAll.vue

@@ -73,14 +73,9 @@
               </div>
             </NuxtLink>
             <ProductPrice
-              :variantPrice="filteredVariantPrice(product.price)"
-              :onSale="product.onSale"
-              :hasVariations="hasVariations(product)"
-              :salePrice="product.salePrice"
-              :regularPrice="product.regularPrice"
-              :nonSalePrice="product.price"
+              :product="product"
               priceFontSize="normal"
-              shouldCenterPrice="true"
+              :shouldCenterPrice="true"
             />
           </div>
         </template>

components/Products/ProductsSingleProduct.vue

@@ -8,9 +8,7 @@
             <p class="text-3xl font-bold text-left">
               {{ data.product.name }}
             </p>
-            <ProductPrice :variantPrice="filteredVariantPrice(data.product.price)" :onSale="data.product.onSale"
-              :hasVariations="hasVariations(data)" :salePrice="data.product.salePrice"
-              :regularPrice="data.product.regularPrice" :nonSalePrice="data.product.price" priceFontSize="big" />
+            <ProductPrice :product="data.product" :shouldCenterPrice="false" priceFontSize="big" />
             <p class="pt-1 mt-6 text-2xl text-gray-900">
               {{ stripHTML(data.product.description) }}
             </p>