Последняя версия с сервера прошлого разработчика

resources/js/Pages/Settings/SettingsTarif.vue

@@ -0,0 +1,115 @@
+<template>
+  <meta-head title="Тарифы"></meta-head>
+
+  <div class="xl:container xl:mx-auto px-2 md:px-3">
+    <div class="mt-16 shadow-classic rounded-md bg-indigo-200">
+      <div class="flex flex-col md:grid grid-cols-6 lg:grid-cols-5">
+        <settings-menu />
+
+        <div class="col-span-4">
+          <div class="mx-4 2xl:mx-28 my-8">
+            <h2 class="text-xl lg:text-2xl xl:text-4xl text-white font-semibold">
+              Выберите тариф, который подходит именно вам
+            </h2>
+            <p class="mt-4 lg:text-xl xl:text-2xl text-white">
+              Более 1 млн фотографий, видео и музыки в постоянном доступе для вас!
+            </p>
+            <p v-if="lastSubscription" class="mt-4 xl:text-xl text-green">
+              Дата окончания подписки:
+              <span class="block md:inline-block">{{ lastSubscription.endDateTime }} ({{ lastSubscription.package.name }})</span>
+              <span v-if="!is_active_sub" class="text-pink"> (Подписка закончилась)</span>
+            </p>
+            <div class="rounded-xl bg-indigo-300 px-3 py-4 mt-5">
+              <toggle
+                :user_id="user_id"
+                :enabled="user_autosubscription"
+                textin="Автоматическое списание отключено"
+                textout="Автоматическое списание включно" @clicked="makeAutoSubs"
+              />
+            </div>
+
+            <div v-for="plan in plans" :key="plan.id"
+                 :class="[is_active_sub && lastSubscription?.package.id === plan.id ? 'border-l-4 lg:border-l-8 border-orange' : '' ,'mt-7 p-7 xl:mt-14 xl:p-14 shadow-classic rounded-md bg-indigo-100']"
+            >
+              <div class="flex flex-col lg:grid grid-cols-6 gap-3 items-center">
+                <div class="col-start-1 col-end-4 flex flex-col items-center  lg:items-start text-center lg:text-left">
+                  <span class="text-xl md:text-2xl lg:text-3xl xl:text-4xl text-white font-medium">{{ plan.name }}</span>
+                </div>
+
+                <div class="col-start-5 col-end-7 flex flex-col items-center">
+                  <span class="text-3xl lg:text-4xl xl:text-6xl text-white font-bold">{{ plan.price }}</span>
+                  <button :disabled="offerCheck == false" type="button"
+                          :class="[is_active_sub && lastSubscription?.package.id === plan.id ? 'bg-white border border-green text-green' : 'text-white bg-green' , 'mt-4 my-1 transition shadow-none  inline-flex items-center px-8 py-3 justify-center  text-base rounded-3xl  focus:outline-none disabled:bg-gray-light disabled:cursor-not-allowed']"
+                          @click="subsPlan(plan.id)"
+                  >
+                    <span v-if="is_active_sub && lastSubscription?.package.id === plan.id">
+                      активен
+                    </span>
+                    <span v-else>
+                      купить тариф
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            <div class="mt-5 flex items-center">
+              <input id="offer_check" v-model="offerCheck"
+                     type="checkbox" class="h-5 w-5 text-orange border-gray-light focus:ring-transparent focus:ring-offset-transparent"
+              >
+              <label for="offer_check" class="select-none ml-3 text-gray text-lg md:text-xl">Согласен с условиями
+                <a href="/docs/offer_paid_subscription.pdf" class="underline"
+                   target="_blank"
+                   rel="noopener noreferrer nofollow"
+                >оферты</a></label>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Inertia } from '@inertiajs/inertia'
+
+import Toggle from '@/Shared/Form/Toggle.vue'
+import Layout from '@/Shared/Layout.vue'
+import SettingsMenu from '@/Shared/LayoutParts/SettingsMenu.vue'
+import MetaHead from '@/Shared/MetaHead.vue'
+
+export default {
+    components: {
+        MetaHead,
+        SettingsMenu,
+        Toggle,
+    },
+    layout: Layout,
+    props: {
+        plans: Array,
+        is_active_sub: Boolean,
+        user_autosubscription: Boolean,
+        user_id: Number,
+        lastSubscription: Object,
+    },
+    data: function() {
+        return {
+            offerCheck: true
+        }
+    },
+    methods: {
+        makeAutoSubs(id){
+            Inertia.patch(route('users.settingsAutoSubs', id), {
+                preserveScroll: true,
+                preserveState: true,
+            })
+        },
+        subsPlan(id) {
+            Inertia.post(route('users.plan', id), {
+                preserveScroll: true,
+                preserveState: true,
+            })
+        },
+    },
+}
+</script>