karlomikus · karlomikus · Dec 10, 2023 · Nov 27, 2023 · Nov 29, 2023 · Dec 3, 2023
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,15 @@
+# v2.3.0
+## New
+- Importing recipes from URL now shows more data
+    - Show ingredient source string
+    - Now imports ingredient notes
+
+## Changes
+- Dates are now shown in short form
+
+## Fixes
+- Added missing translations
+
 # v2.2.1
 ## Fixes
 - Fixed missing settings for moderators

diff --git a/index.html b/index.html
@@ -10,6 +10,7 @@
     <link rel="mask-icon" href="/favicon.svg" color="#FFFFFF">
     <meta name="theme-color" content="#584b75" />
     <script src="/config.js"></script>
+    <script src="https://cdn.paddle.com/paddle/v2/paddle.js"></script>
   </head>
   <body>
     <div id="app"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
   "dependencies": {
     "@floating-ui/vue": "^1.0.2",
     "@meilisearch/instant-meilisearch": "^0.12.0",
+    "@paddle/paddle-js": "^0.5.2",
     "dayjs": "^1.11.7",
     "html-to-image": "^1.11.11",
     "lodash": "^4.17.21",

diff --git a/src/ApiRequests.js b/src/ApiRequests.js
@@ -819,6 +819,24 @@ class ApiRequests
 
         return this.parseResponse(jsonResp)
     }
+
+    /**
+     * =============================
+     * Billing
+     * =============================
+     */
+
+    static async fetchSubscription() {
+        let jsonResp = await this.getRequest('/api/billing/subscription')
+
+        return this.parseResponse(jsonResp)
+    }
+
+    static async updateSubscription(data) {
+        const jsonResp = await this.postRequest('/api/billing/subscription', data)
+
+        return this.parseResponse(jsonResp)
+    }
 }
 
 export default ApiRequests
diff --git a/src/AppState.js b/src/AppState.js
@@ -91,6 +91,14 @@ class AppState {
         return this.bar.access.role_id == 4
     }
 
+    isSubscribed() {
+        if (window.srConfig.BILLING_ENABLED === true) {
+            return this.user.is_subscribed;
+        }
+
+        return true;
+    }
+
     _getStorage() {
         const val = localStorage.getItem('sr_remember_login')
         const rememberMe = val === null || val === 'true' ? true : false

diff --git a/src/assets/base.css b/src/assets/base.css
@@ -100,7 +100,6 @@
     --default-scheme: light;
 
     --font-primary: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-    --font-accent: 'Bitter', serif;
     --font-heading: 'Alice', serif;
     --font-mono: 'Space Mono', monospace;
     --fw-bold: 700;

diff --git a/src/components/Auth/AuthLogin.vue b/src/components/Auth/AuthLogin.vue
@@ -69,7 +69,7 @@ export default {
             return window.srConfig.ENV === 'demo'
         },
         showForgotPassword() {
-            return window.srConfig.MAILS_ENABLED === true;
+            return window.srConfig.MAILS_ENABLED === true
         }
     },
     watch: {

diff --git a/src/components/Bar/BarIndex.vue b/src/components/Bar/BarIndex.vue
@@ -15,6 +15,7 @@
     </PageHeader>
     <div class="bars">
         <OverlayLoader v-if="isLoading"></OverlayLoader>
+        <SubscriptionCheck v-if="bars.length >= 1">Subscribe to "Mixologist" plan to create and manage up to 10 bars!</SubscriptionCheck>
         <div v-if="bars.length > 0" class="bars__grid">
             <div v-for="bar in bars" :key="bar.id" class="bar block-container block-container--hover">
                 <span class="bar__role">{{ getRoleName(bar.access.role_id) }}</span>
@@ -69,6 +70,7 @@ import AppState from './../../AppState.js'
 import DateFormatter from './../DateFormatter.vue'
 import Utils from './../../Utils.js'
 import EmptyState from './../EmptyState.vue'
+import SubscriptionCheck from '../SubscriptionCheck.vue'
 
 export default {
     components: {
@@ -78,6 +80,7 @@ export default {
         BarJoinDialog,
         DateFormatter,
         EmptyState,
+        SubscriptionCheck,
     },
     data() {
         return {

diff --git a/src/components/Cocktail/CocktailDetails.vue b/src/components/Cocktail/CocktailDetails.vue
@@ -4,9 +4,9 @@
         <OverlayLoader v-if="isLoading" />
         <div class="cocktail-details__title">
             <h2>{{ cocktail.name }}</h2>
-            <p>
-                {{ $t('added-on-by', { date: createdDate, name: cocktail.created_user.name }) }}
-                <template v-if="cocktail.updated_user"> &middot; {{ $t('updated-on-by', { date: updatedDate, name: cocktail.updated_user.name }) }}</template>
+            <p :title="$t('added-on-by', { date: createdDate, name: cocktail.created_user.name })">
+                <template v-if="cocktail.updated_user">{{ $t('updated-on-by', { date: updatedDate, name: cocktail.updated_user.name }) }}</template>
+                <template v-else>{{ $t('added-on-by', { date: createdDate, name: cocktail.created_user.name }) }}</template>
             </p>
         </div>
         <div v-if="cocktail.id" class="cocktail-details__graphic">
@@ -387,12 +387,12 @@ export default {
         createdDate() {
             const date = dayjs(this.cocktail.created_at).toDate()
 
-            return this.$d(date, 'long')
+            return this.$d(date, 'short')
         },
         updatedDate() {
             const date = dayjs(this.cocktail.updated_at).toDate()
 
-            return this.$d(date, 'long')
+            return this.$d(date, 'short')
         },
         // totalLiquid() {
         //     const amount = this.cocktail.ingredients.filter(ing => ['ml', 'cl', 'oz'].includes(ing.units)).reduce((acc, ing) => {

diff --git a/src/components/Cocktail/CocktailForm.vue b/src/components/Cocktail/CocktailForm.vue
@@ -22,7 +22,7 @@
             </div>
         </div>
         <h3 class="form-section-title">{{ $t('media') }}</h3>
-        <ImageUpload ref="imagesUpload" :value="cocktail.images" />
+        <ImageUpload ref="imagesUpload" :value="cocktail.images" :max-images="maxImages" />
         <h3 class="form-section-title">{{ $t('ingredients.title') }}</h3>
         <ul v-show="cocktail.ingredients.length > 0" class="cocktail-form__ingredients" style="margin-bottom: 20px;">
             <li v-for="ing in cocktail.ingredients" :key="ing.ingredient_id" class="block-container" :data-id="ing.ingredient_id">
@@ -155,6 +155,7 @@ export default {
             cocktailIngredientForEdit: {},
             cocktailIngredientForEditOriginal: {},
             cocktailIngredientForSubstitutes: {},
+            maxImages: 10,
             isLoading: false,
             cocktail: {
                 id: null,
@@ -239,6 +240,11 @@ export default {
             ghostClass: 'block-container--placeholder',
             animation: 150
         })
+
+        const state = new AppState();
+        if (!state.isSubscribed()) {
+            this.maxImages = 1;
+        }
     },
     methods: {
         checkForImportData() {

diff --git a/src/components/Cocktail/CocktailImport.vue b/src/components/Cocktail/CocktailImport.vue
@@ -6,6 +6,7 @@
         </PageHeader>
         <h3 class="form-section-title">{{ $t('import.type') }}</h3>
         <div class="block-container block-container--padded">
+            <SubscriptionCheck>Subscribe to "Mixologist" plan to remove limit of two import actions per minute!</SubscriptionCheck>
             <div class="form-group">
                 <label class="form-label form-label--required">{{ $t('type') }}:</label>
                 <div class="import-types">
@@ -48,63 +49,68 @@
             <h3 class="form-section-title">{{ $t('recipe-information') }}</h3>
             <div class="block-container block-container--padded">
                 <div class="form-group">
-                    <label for="name">{{ $t('name') }}</label>
+                    <label class="form-label" for="name">{{ $t('name') }}</label>
                     <input id="name" v-model="result.name" type="text" class="form-input">
                 </div>
                 <div class="form-group">
-                    <label for="description">{{ $t('description') }}</label>
+                    <label class="form-label" for="description">{{ $t('description') }}</label>
                     <textarea id="description" v-model="result.description" class="form-input" rows="4"></textarea>
                 </div>
                 <div class="form-group">
-                    <label for="source">{{ $t('source') }}</label>
+                    <label class="form-label" for="source">{{ $t('source') }}</label>
                     <input id="source" v-model="result.source" type="text" class="form-input">
                 </div>
                 <div class="form-group">
-                    <label for="glass">{{ $t('glass-type.title') }}</label>
+                    <label class="form-label" for="glass">{{ $t('glass-type.title') }}</label>
                     <input id="glass" v-model="result.glass" type="text" class="form-input">
                 </div>
                 <div class="form-group">
-                    <label for="instructions">{{ $t('instructions') }}</label>
+                    <label class="form-label" for="instructions">{{ $t('instructions') }}</label>
                     <textarea id="instructions" v-model="result.instructions" class="form-input" rows="4"></textarea>
                 </div>
                 <div class="form-group">
-                    <label for="garnish">{{ $t('garnish') }}</label>
+                    <label class="form-label" for="garnish">{{ $t('garnish') }}</label>
                     <textarea id="garnish" v-model="result.garnish" class="form-input" rows="3"></textarea>
                 </div>
                 <div class="form-group">
-                    <label for="method">{{ $t('method.title') }}</label>
+                    <label class="form-label" for="method">{{ $t('method.title') }}</label>
                     <input id="method" v-model="result.method" type="text" class="form-input">
                 </div>
                 <template v-for="image in result.images" :key="image.url">
                     <div class="form-group">
-                        <label for="image_url">{{ $t('image-url') }}</label>
+                        <label class="form-label" for="image_url">{{ $t('image-url') }}</label>
                         <input id="image_url" v-model="image.url" type="text" class="form-input">
                     </div>
                     <div class="form-group">
-                        <label for="image_copyrigh">{{ $t('image-copyright') }}</label>
+                        <label class="form-label" for="image_copyrigh">{{ $t('image-copyright') }}</label>
                         <input id="image_copyrigh" v-model="image.copyright" type="text" class="form-input">
                     </div>
                 </template>
                 <div class="form-group">
-                    <label for="tags">{{ $t('tag.tags') }}</label>
+                    <label class="form-label" for="tags">{{ $t('tag.tags') }}</label>
                     <input id="tags" v-model="cocktailTags" type="text" class="form-input">
                 </div>
             </div>
             <h3 class="form-section-title">{{ $t('ingredients.title') }}</h3>
             <div v-for="(ingredient, idx) in result.ingredients" :key="idx" class="block-container block-container--padded scraper-ingredients__ingredient">
+                <p><strong>{{ $t('source') }}:</strong> {{ ingredient.source }}</p>
                 <div class="scraper-ingredients__ingredient__inputs">
                     <div class="form-group">
-                        <label :for="'ingredient_name_' + idx">{{ $t('name') }}</label>
+                        <label class="form-label" :for="'ingredient_name_' + idx">{{ $t('name') }}</label>
                         <input :id="'ingredient_name_' + idx" v-model="ingredient.name" type="text" class="form-input" :disabled="ingredient.existingIngredient != null">
                     </div>
                     <div class="form-group">
-                        <label :for="'ingredient_amount_' + idx">{{ $t('amount') }}</label>
+                        <label class="form-label" :for="'ingredient_amount_' + idx">{{ $t('amount') }}</label>
                         <input :id="'ingredient_amount_' + idx" v-model="ingredient.amount" type="text" class="form-input">
                     </div>
                     <div class="form-group">
-                        <label :for="'ingredient_units_' + idx">{{ $t('units') }}</label>
+                        <label class="form-label" :for="'ingredient_units_' + idx">{{ $t('units') }}</label>
                         <input :id="'ingredient_units_' + idx" v-model="ingredient.units" type="text" class="form-input">
                     </div>
+                    <div class="form-group">
+                        <label class="form-label" :for="'ingredient_note_' + idx">{{ $t('note.title') }}</label>
+                        <input :id="'ingredient_note_' + idx" v-model="ingredient.note" type="text" class="form-input">
+                    </div>
                 </div>
                 <div v-if="ingredient.existingIngredient" class="scraper-ingredients__ingredient__existing"><span style="letter-spacing: -4px;">&boxur;&rtrif;</span> {{ $t('save-as') }} "{{ ingredient.existingIngredient.name }}" &middot; <a href="#" @click.prevent="resetIngredientMatch(ingredient)">{{ $t('cancel') }}</a></div>
                 <div class="scraper-ingredients__ingredient__actions">
@@ -139,14 +145,16 @@ import PageHeader from './../PageHeader.vue'
 import SaltRimRadio from '../SaltRimRadio.vue'
 import IngredientFinder from './../IngredientFinder.vue'
 import SaltRimDialog from '../Dialog/SaltRimDialog.vue'
+import SubscriptionCheck from '../SubscriptionCheck.vue'
 
 export default {
     components: {
         OverlayLoader,
         PageHeader,
         SaltRimRadio,
         IngredientFinder,
-        SaltRimDialog
+        SaltRimDialog,
+        SubscriptionCheck
     },
     data() {
         return {
@@ -364,9 +372,14 @@ export default {
     margin-bottom: 1rem;
 }
 
+.scraper-ingredients__ingredient p {
+    color: var(--clr-accent-800);
+    margin-bottom: var(--gap-size-3);
+}
+
 .scraper-ingredients__ingredient__inputs {
     display: flex;
-    flex-wrap: wrap;
+    /* flex-wrap: wrap; */
     align-items: center;
     gap: var(--gap-size-2);
 }
@@ -375,6 +388,11 @@ export default {
     margin-bottom: 0;
 }
 
+.scraper-ingredients__ingredient .form-group label,
+.scraper-ingredients__ingredient .form-group :is(input, select, textarea) {
+    width: 100%;
+}
+
 .scraper-ingredients__ingredient__existing {
     font-weight: bold;
 }
@@ -386,6 +404,9 @@ export default {
 }
 
 @media (max-width: 450px) {
+    .scraper-ingredients__ingredient__inputs {
+        flex-wrap: wrap;
+    }
     .import-types {
         grid-template-columns: 1fr;
     }

diff --git a/src/components/Cocktail/CocktailPublicDetails.vue b/src/components/Cocktail/CocktailPublicDetails.vue
@@ -27,25 +27,25 @@ export default {
             cocktail: {},
         }
     },
-    watch: {
-        cocktail(val) {
-            document.title = `${val.name} \u22C5 ${this.site_title}`
-        }
-    },
     computed: {
         barName() {
             if (this.cocktail.bar) {
-                return this.cocktail.bar.name;
+                return this.cocktail.bar.name
             }
 
-            return null;
+            return null
         },
         barSubtitle() {
             if (this.cocktail.bar) {
-                return this.cocktail.bar.subtitle;
+                return this.cocktail.bar.subtitle
             }
 
-            return null;
+            return null
+        }
+    },
+    watch: {
+        cocktail(val) {
+            document.title = `${val.name} \u22C5 ${this.site_title}`
         }
     },
     created() {

diff --git a/src/components/Cocktail/PublicLinkDialog.vue b/src/components/Cocktail/PublicLinkDialog.vue
@@ -2,6 +2,7 @@
     <div>
         <OverlayLoader v-if="isLoading" />
         <div class="dialog-title">{{ $t('public-dialog.title') }}</div>
+        <SubscriptionCheck>Subscribe to "Mixologist" plan to share your cocktail recipes!</SubscriptionCheck>
         <p class="public-url">{{ publicUrl }}</p>
         <p v-show="publicData.public_at != null">{{ $t('public-dialog.public_at', { date: createdDate }) }}</p>
         <div class="dialog-actions" style="margin-top: 1rem;">
@@ -17,10 +18,12 @@
 import ApiRequests from './../../ApiRequests.js'
 import OverlayLoader from './../OverlayLoader.vue'
 import dayjs from 'dayjs'
+import SubscriptionCheck from '../SubscriptionCheck.vue'
 
 export default {
     components: {
         OverlayLoader,
+        SubscriptionCheck,
     },
     props: {
         cocktail: {

diff --git a/src/components/Collections/CollectionDialog.vue b/src/components/Collections/CollectionDialog.vue
@@ -3,6 +3,7 @@
         <OverlayLoader v-if="isLoading" />
         <div class="dialog-title">{{ $t(title) }}</div>
         <div class="dialog-content">
+            <SubscriptionCheck v-if="collections.length >= 3">Subscribe to "Mixologist" plan to create unlimited collections!</SubscriptionCheck>
             <form action="">
                 <div class="form-group">
                     <label class="form-label" for="dialog-collection-id">{{ $t('collections.collection') }}:</label>
@@ -42,10 +43,12 @@
 <script>
 import ApiRequests from './../../ApiRequests.js'
 import OverlayLoader from './../OverlayLoader.vue'
+import SubscriptionCheck from '../SubscriptionCheck.vue'
 
 export default {
     components: {
         OverlayLoader,
+        SubscriptionCheck,
     },
     props: {
         cocktails: {