Introduce original price (#905)

* Introduce original price

* Rebase and styling

* Widget

src/pretix/static/pretixpresale/js/widget/widget.js

@@ -185,7 +185,10 @@ Vue.component('availbox', {
 });
 Vue.component('pricebox', {
     template: ('<div class="pretix-widget-pricebox">'
-        + '<span v-if="!free_price">{{ priceline }}</span>'
+        + '<span v-if="!free_price && !original_price">{{ priceline }}</span>'
+        + '<span v-if="!free_price && original_price">'
+        + '<del class="pretix-widget-pricebox-original-price">{{ original_line }}</del> '
+        + '<ins class="pretix-widget-pricebox-new-price">{{ priceline }}</ins></span>'
         + '<div v-if="free_price">'
         + '{{ $root.currency }} '
         + '<input type="number" class="pretix-widget-pricebox-price-input" placeholder="0" '
@@ -199,7 +202,8 @@ Vue.component('pricebox', {
     props: {
         price: Object,
         free_price: Boolean,
-        field_name: String
+        field_name: String,
+        original_price: String
     },
     computed: {
         display_price: function () {
@@ -209,6 +213,9 @@ Vue.component('pricebox', {
                 return roundTo(parseFloat(this.price.gross), 2).toFixed(2);
             }
         },
+        original_line: function () {
+            return this.$root.currency + " " + roundTo(parseFloat(this.original_price), 2).toFixed(2);
+        },
         priceline: function () {
             if (this.price.gross === "0.00") {
                 return strings.free;
@@ -247,7 +254,7 @@ Vue.component('variation', {
         + '</div>'
 
         + '<div class="pretix-widget-item-price-col">'
-        + '<pricebox :price="variation.price" :free_price="item.free_price"'
+        + '<pricebox :price="variation.price" :free_price="item.free_price" :original_price="item.original_price"'
         + '          :field_name="\'price_\' + item.id + \'_\' + variation.id">'
         + '</pricebox>'
         + '</div>'
@@ -293,7 +300,7 @@ Vue.component('item', {
 
         + '<div class="pretix-widget-item-price-col">'
         + '<pricebox :price="item.price" :free_price="item.free_price" v-if="!item.has_variations"'
-        + '          :field_name="\'price_\' + item.id">'
+        + '          :field_name="\'price_\' + item.id" :original_price="item.original_price">'
         + '</pricebox>'
         + '<div class="pretix-widget-pricebox" v-if="item.has_variations">{{ pricerange }}</div>'
         + '</div>'

src/pretix/static/pretixpresale/scss/_event.scss

@@ -64,6 +64,15 @@
         margin: 0;
         line-height: inherit;
     }
+    .price del {
+        color: $text-muted;
+    }
+    .price ins {
+        color: $brand-success;
+        font-size: 18px;
+        font-weight: bold;
+        text-decoration: none;
+    }
 }
 
 .radio .variation-description {

src/pretix/static/pretixpresale/scss/widget.scss

@@ -200,6 +200,16 @@
     text-align: right;
   }
 
+  del.pretix-widget-pricebox-original-price {
+    color: $text-muted;
+  }
+
+  ins.pretix-widget-pricebox-new-price {
+    font-size: 120%;
+    font-weight: bold;
+    text-decoration: none;
+  }
+
   .pretix-widget-clear {
     clear: both;
   }