feat: added locks to extra destinations on unsubscribed users

Author: mwargan

src/components/CardElement.vue

@@ -46,7 +46,7 @@ defineProps({
     :is="to ? 'router-link' : 'vue:template'"
     :to="to ? to : undefined"
   >
-    <article>
+    <article v-bind="$attrs">
       <div class="images overflow-auto" v-if="images" tabindex="0">
         <img
           v-for="image in images"
@@ -78,7 +78,7 @@ defineProps({
       </footer>
     </article>
   </component>
-  <article v-else>
+  <article v-else v-bind="$attrs">
     <div class="images" v-if="images?.length">
       <div class="gl-animate-skeleton-loader" style="height: 100%"></div>
     </div>

src/components/QR/QRAnalytics.vue

@@ -33,7 +33,7 @@ defineProps({
     required: false,
     default: null,
   },
-  hasBillableRedirects: {
+  subscribed: {
     type: Boolean,
     required: false,
     default: false,
@@ -62,7 +62,7 @@ defineProps({
       </hgroup>
     </card-element>
   </div>
-  <template v-if="hasBillableRedirects">
+  <template v-if="subscribed">
     <card-element v-if="bestEndpoint">
       <hgroup>
         <h3 class="gl-animate-skeleton-loader" v-if="isLoading"></h3>

src/components/QR/QRDestinations.vue

@@ -6,6 +6,7 @@ import BaseButton from "@/components/BaseButton.vue";
 import type { PropType } from "vue";
 import type { Endpoint } from "@/types/redirect";
 import { parseRuleGroup } from "@/useRules";
+import ConfirmsSubscriptionStart from "@/components/modals/ConfirmsSubscriptionStart.vue";
 
 defineProps({
   redirectId: {
@@ -17,7 +18,7 @@ defineProps({
     required: false,
     default: () => [],
   },
-  hasBillableRedirects: {
+  subscribed: {
     type: Boolean,
     required: false,
     default: false,
@@ -43,22 +44,27 @@ defineProps({
         <h3>{{ $t("No destinations yet") }}</h3>
         <p>
           {{
-            hasBillableRedirects
+            subscribed
               ? $t("Add free destinations")
               : $t("Add more destinations to same code")
           }}
         </p>
       </hgroup>
     </card-element>
   </template>
-  <template v-else v-for="endpoint in endpoints" :key="endpoint.id">
+  <template v-else v-for="(endpoint, index) in endpoints" :key="endpoint.id">
     <edit-endpoint
       v-if="endpoint.id && endpoint.redirect_uuid"
       :redirectId="endpoint.redirect_uuid"
       :endpointId="endpoint.id"
       :currentUrl="endpoint.endpoint"
     >
-      <card-element :loading="isLoading">
+      <card-element
+        :loading="isLoading"
+        :class="{
+          disabled: !subscribed && index > 0,
+        }"
+      >
         <hgroup>
           <h3>{{ removeProtocol(endpoint.endpoint) }}</h3>
           <p v-if="endpoint.rule_groups?.[0]">
@@ -70,6 +76,18 @@ defineProps({
         </hgroup>
       </card-element>
     </edit-endpoint>
+
+    <!-- IF we have more than 1 endpoint, and the others are locked due to unsub, show subsctibe button -->
+    <confirms-subscription-start
+      v-if="redirectId && !subscribed && index === 0 && endpoints.length > 1"
+      :redirectId="redirectId"
+      :title="$t('Activate other destinations')"
+      :submitText="$t('Activate other destinations')"
+    >
+      <base-button class="full-width">{{
+        $t("Activate other destinations")
+      }}</base-button>
+    </confirms-subscription-start>
   </template>
   <base-button
     v-if="redirectId"
@@ -79,7 +97,7 @@ defineProps({
     }"
     :loading="isLoading"
     >{{
-      hasBillableRedirects
+      subscribed
         ? $t("Add more free destinations")
         : $t("Add more destinations to same code")
     }}</base-button

src/components/screens/SingleQR.vue

@@ -304,7 +304,7 @@ const QRDestinations = defineAsyncComponent(
         :clicksAllTime="clicksAllTime"
         :bestEndpoint="bestEndpoint"
         :isLoading="isLoading || loading"
-        :hasBillableRedirects="subscribed"
+        :subscribed="subscribed"
       />
     </div>
 
@@ -313,6 +313,7 @@ const QRDestinations = defineAsyncComponent(
         :redirectId="redirectId"
         :endpoints="endpoints"
         :isLoading="isLoading || loading"
+        :subscribed="subscribed"
       />
     </div>
 

src/locales/en.json

@@ -277,5 +277,6 @@
     "Edit destination": "Edit destination",
     "No data available": "No data available",
     "No destinations yet": "No destinations yet",
-    "You have been unsubscribed.": "You have been unsubscribed."
+    "You have been unsubscribed.": "You have been unsubscribed.",
+    "Activate other destinations": "Activate other destinations"
 }

src/locales/fr.json

@@ -277,5 +277,6 @@
     "Edit destination": "Modifier la destination",
     "No data available": "Pas de données disponibles",
     "No destinations yet": "Pas encore de destinations",
-    "You have been unsubscribed.": "Vous avez été désabonné."
+    "You have been unsubscribed.": "Vous avez été désabonné.",
+    "Activate other destinations": "Activer d'autres destinations"
 }