warning member

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -2520,6 +2520,21 @@ form#user-pass{
   }
 }
 
+#member-warning{
+	padding: 2em 4em;
+	text-align: center;
+	h2{
+
+	}
+	p{
+
+	}
+	a{
+		@include btn;
+		background-color: $color-webshowroom;
+		color: #fff;
+	}
+}
 //  ___         _
 // | __|__  ___| |_ ___ _ _
 // | _/ _ \/ _ \  _/ -_) '_|

web/themes/custom/materiotheme/vuejs/components/Content/Card.vue

@@ -95,13 +95,15 @@
 import { mapState, mapActions } from 'vuex'
 import cardMixins from 'vuejs/components/cardMixins'
 import ModalCard from 'vuejs/components/Content/ModalCard'
+import MemberWarning from 'vuejs/components/Content/MemberWarning'
 
 export default {
   name: "Card",
   props: ['item'],
   mixins: [cardMixins],
   components: {
-    ModalCard
+    ModalCard,
+    MemberWarning
   },
   data() {
     return {
@@ -215,6 +217,22 @@ export default {
             height: '95%'
           }
         )
+      } else {
+        this.$modal.show(
+          MemberWarning,
+          {},
+          {
+            // name: `modal-${this.item.id}`,
+            draggable: false,
+            // classes: "vm--modale-card",
+            // this does not work
+            // adaptative: true,
+            // maxWidth: 850,
+            // maxHeight: 610,
+            width: '400px',
+            height: '250px'
+          }
+        )
       }
     }
   }

web/themes/custom/materiotheme/vuejs/components/Content/MemberWarning.vue

@@ -0,0 +1,39 @@
+<template>
+  <div id="member-warning">
+    <h2>{{ $t('materio.Oops') }}</h2>
+    <!-- <router-link :to="{ name: 'pricing'}">Join us</router-link> -->
+    <p>{{ $t('materio.To be able to access to our 8000+ materials you need become a member') }}</p>
+    <a
+      href="/pricing"
+      @click.prevent="onclick"
+    >{{ $t('materio.Join us') }}</a>
+  </div>
+</template>
+
+<script>
+
+import router from 'vuejs/route'
+
+export default {
+  name: "MemberWarning",
+  router,
+  data: () => ({
+
+  }),
+  methods:{
+    onclick(){
+      console.log('clicked', )
+      this.$modal.hideAll()
+      this.$router.push({
+        name:`pricing`
+        // params: { alias:this.alias, id: this.item.nid }
+        // query: { nid: this.item.nid }
+        // meta: { uuid:this.item.uuid },
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>