From 69a05899dd97bf96a8726cec18c74aa9db7e952c Mon Sep 17 00:00:00 2001
From: Matias Perrone <github@matiasperrone.com>
Date: Fri, 12 Feb 2021 14:02:04 -0300
Subject: [PATCH] price styling minor fixes on previous commit

---
 src/App.vue                         |  5 ++++-
 src/DatePicker/HotelDatePicker.vue  |  3 +++
 src/DatePicker/components/Day.vue   | 17 ++++++++++-------
 src/DatePicker/components/Month.vue |  4 ++++
 4 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 66af7f89..f2a7ae9c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -71,7 +71,9 @@
             <input type="checkbox" v-model="showEndingDateValue" /> endingDateValue:
             <input type="text" v-model="endingDate" /><br />
             <input type="checkbox" v-model="showPeriodDates" /> showPeriodDates<br />
-            <input type="checkbox" v-model="showPrice" /> showPrice<br />
+            <input type="checkbox" v-model="showPrice" /> showPrice
+            <span v-if="showPrice">- priceSymbol: <input type="text" v-model="priceSymbol" style="width: 3em" /></span>
+            <br />
             <input type="checkbox" v-model="showMinNights" :true-value="minNights" :false-value="false" /> minNights
             <input v-if="showMinNights !== false" type="number" v-model="minNights" min="0" /><br />
             <input type="checkbox" v-model="showContentSlot" /> showContentSlot<br />
@@ -88,6 +90,7 @@
             :showSingleMonth="showSingleMonth"
             :showYear="showYear"
             :showPrice="showPrice"
+            :priceSymbol="priceSymbol"
             :yearBeforeMonth="yearBeforeMonth"
             :positionRight="positionRight"
             :singleDaySelection="singleDaySelection"
diff --git a/src/DatePicker/HotelDatePicker.vue b/src/DatePicker/HotelDatePicker.vue
index dc43f728..75b922df 100644
--- a/src/DatePicker/HotelDatePicker.vue
+++ b/src/DatePicker/HotelDatePicker.vue
@@ -128,6 +128,7 @@
             :nextDisabledDate="nextDisabledDate"
             :nextPeriodDisableDates="nextPeriodDisableDates"
             :options="dayOptions"
+            :priceSymbol="priceSymbol"
             :screenSize="screenSize"
             :showCustomTooltip="showCustomTooltip"
             :showPrice="showPrice"
@@ -182,6 +183,7 @@
               :nextDisabledDate="nextDisabledDate"
               :nextPeriodDisableDates="nextPeriodDisableDates"
               :options="dayOptions"
+              :priceSymbol="priceSymbol"
               :screenSize="screenSize"
               :showCustomTooltip="false"
               :showPrice="showPrice"
@@ -486,6 +488,7 @@ export default {
           // eslint-disable-next-line no-nested-ternary
           return v1 < v2 ? -1 : v1 > v2 ? 1 : 0
         }
+
         periodDates = [...this.periodDates].sort(sortFunction)
       }
 
diff --git a/src/DatePicker/components/Day.vue b/src/DatePicker/components/Day.vue
index 4fbd3273..293a584b 100644
--- a/src/DatePicker/components/Day.vue
+++ b/src/DatePicker/components/Day.vue
@@ -20,7 +20,7 @@
     >
       <div class="vhd__datepicker__month-day-wrapper">
         <span class="day">{{ dayNumber }}</span>
-        <Price :show="showPrice" :price="dayPrice.price" :symbol="dayPrice.symbol" />
+        <Price :show="showPrice" :price="dayPrice" :symbol="priceSymbol" />
       </div>
     </div>
     <BookingBullet
@@ -115,6 +115,10 @@ export default {
     options: {
       type: Object,
     },
+    priceSymbol: {
+      type: String,
+      required: true,
+    },
     screenSize: {
       type: String,
       default: '',
@@ -172,16 +176,15 @@ export default {
       return fecha.format(this.date, 'D')
     },
     dayPrice() {
-      let result = { price: '', symbol: '' }
-      const currentDate = this.sortedPeriodDates
-        .revert()
+      let result = ''
+      const currentDate = [...this.sortedPeriodDates]
+        .reverse()
         .find((d) => this.validateDateBetweenTwoDates(d.startAt, d.endAt, this.formatDate))
 
-      if (currentDate) {
+      if (currentDate && currentDate.price) {
         const nightly = currentDate.periodType === 'nightly'
 
-        result.price = (currentDate.price / (nightly ? 1 : 7)).toFixed(2)
-        result.symbol = currentDate.symbol || ''
+        result = (currentDate.price / (nightly ? 1 : 7)).toFixed(2)
       }
 
       return result
diff --git a/src/DatePicker/components/Month.vue b/src/DatePicker/components/Month.vue
index 728f1b2b..e736bdaf 100644
--- a/src/DatePicker/components/Month.vue
+++ b/src/DatePicker/components/Month.vue
@@ -124,6 +124,10 @@ export default {
     options: {
       type: Object,
     },
+    priceSymbol: {
+      type: String,
+      default: '',
+    },
     screenSize: {
       type: String,
       default: '',