@nixweb/nixloc-ui 1.14.0 → 1.16.0

package/src/components/modules/adm/store/Store.vue

@@ -0,0 +1,492 @@
+<template>
+    <div>
+        <div v-if="success">
+            <Success />
+        </div>
+        <div v-else>
+            <b-tabs>
+                <b-tab title="Loja">
+                    <div v-for="item in modulesFree" :key="item.ruleId">
+                        <div v-show="!loading" class="molded">
+                            <div class="text-center div-img">
+                                <img :src="item.urlLogo" />
+                            </div>
+                            <div class="text-center title div-title">
+                                {{ item.title }}
+                            </div>
+                            <div class="text-center title div-description">
+                                <span v-if="hasRule(item.name)">
+                                    {{ item.descriptionEnable }}
+                                </span>
+                                <span v-else>
+                                    {{ item.description }}
+                                </span>
+                            </div>
+                            <div v-if="hasRule(item.name)">
+                                <div class="text-center">
+                                    <div class="icon-check text-center">
+                                        <i class="fa-solid fa-circle-check"></i>
+                                    </div>
+                                    <br>
+                                    <Button :_key="item.name" :params="{ name: item.name, ruleId: item.ruleId }"
+                                        title="Desabilitar" backGroundColor="#FAB230" color="white"
+                                        :clicked="openConfirm" size="small" />
+                                </div>
+                            </div>
+                            <div v-else>
+                                <br>
+                                <div class="text-center title">
+                                    Grátis
+                                </div>
+                                <div class="text-center div-btn">
+                                    <Button _key="btnConfirm" :params="{ name: item.name, ruleId: item.ruleId }"
+                                        title="Habilitar" backGroundColor="#1864CB" color="white" :clicked="enableFree"
+                                        size="small" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div v-show="!loading" class="side-by-side" v-for="item in modules" :key="item.ruleId">
+                        <div class="molded">
+                            <div class="text-center div-icon">
+                                <i :class="item.icon"></i>
+                            </div>
+                            <div class="text-center title div-title">
+                                {{ item.title }}
+                            </div>
+                            <div class="text-center title div-description">
+                                {{ item.description }}
+                            </div>
+                            <div class="div-already-has" v-if="hasRule(item.name)">
+                                <div class="icon-check text-center">
+                                    <i class="fa-solid fa-circle-check"></i>
+                                </div>
+                                <br />
+                            </div>
+                            <div v-else>
+                                <div v-if="item.type == 'only'" class="div-quantity">
+                                    <IncrementDecrement :name="item.name" :triggerEvent="true" :min="1" :max="10"
+                                        v-model="item.quantity" />
+                                </div>
+                                <div v-else class="text-center">
+                                    <SelectStatic v-if="item.name != 'Audit'" fieldTarget="timeZone"
+                                        :data="item.options" :initialValue="item.valueOption"
+                                        v-model="item.valueOption" />
+                                    <div v-else>
+                                        {{ item.detail }}
+                                    </div>
+                                </div>
+                                <div class="text-center title div-value">
+                                    <span v-if="item.type == 'only'">
+                                        <span>{{ item.value | currency }}</span>
+                                        <span v-if="item.name == 'User'"> mensal</span>
+                                        <span v-else> único</span>
+                                    </span>
+                                    <span v-else>
+                                        {{ item.valueOption.id | currency }} mensal
+                                    </span>
+                                </div>
+                                <div class="text-center div-btn">
+                                    <Button :_key="item.name" :params="{
+                                        term: { name: item.name, ruleId: item.ruleId, quantity: item.quantity, description: item.description, monthly: item.monthly, quantity: item.quantity, value: item.value, valueOption: item.valueOption }
+                                    }" title="Contratar" :backGroundColor="item.btnColor" color="white"
+                                        :clicked="openTerm" size="small" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </b-tab>
+                <b-tab title="Histórico">
+                    <PurchaseHistory :items="purchaseHistory" />
+                </b-tab>
+            </b-tabs>
+        </div>
+        <Loading :center="true" v-show="loading" />
+
+        <Modal title="Termos e Condições" :width="950" :height="750" v-if="showModal('term')">
+            <Term :term="term" />
+        </Modal>
+
+        <Modal title="Tem certeza que deseja desabilitar?" :width="450" :height="750" v-if="showModal('google')">
+            <Alert type="warning">
+                <span class="title">
+                    Ao desabilitar, todos os calendários criados pelo Nixloc serão removidos. Deseja continuar?
+                </span>
+            </Alert>
+            <div class="text-center">
+                <br>
+                <Button _key="btnDisconnect" title="Sim, confirmar" backGroundColor="#EF294B" color="white" size="medim"
+                    :clicked="enableFree" />
+            </div>
+        </Modal>
+    </div>
+</template>
+
+<script>
+import PurchaseHistory from './PurchaseHistory.vue'
+
+import IncrementDecrement from "@nixweb/nixloc-ui/src/component/forms/IncrementDecrement.vue";
+import SelectStatic from "@nixweb/nixloc-ui/src/component/forms/SelectStatic";
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button.vue";
+import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
+import Loading from "@nixweb/nixloc-ui/src/component/shared/Loading.vue";
+import Alert from "@nixweb/nixloc-ui/src/component/layout/Alert";
+import Term from './Term.vue'
+import Success from './Success.vue'
+
+import { mapActions, mapMutations, mapGetters } from "vuex";
+
+export default {
+    name: "Store",
+    components: {
+        IncrementDecrement,
+        SelectStatic,
+        Modal,
+        Button,
+        Loading,
+        Term,
+        Alert,
+        Success,
+        PurchaseHistory
+    },
+    data() {
+        return {
+            urlGetPlan: "/api/v1/adm/company/get-plan",
+            urlCreate: "/api/v1/adm/store/contract-additive",
+            urlGetAllLog: "/api/v1/adm/store/get-all-log",
+            currentUser: 0,
+            currentPrice: 0,
+            loading: true,
+            success: false,
+            purchaseHistory: [],
+            prices: {
+                1: 250,
+                2: 390,
+                3: 490,
+                4: 570,
+                5: 630,
+                6: 680,
+                7: 730,
+                8: 780,
+                9: 830,
+                10: 880,
+                11: 930,
+                12: 980,
+                13: 1030,
+                14: 1130,
+                15: 1180,
+                16: 1230,
+                17: 1280,
+                18: 1330,
+                19: 1380,
+                20: 1430,
+            },
+            modulesFree: [
+                {
+                    name: "Google",
+                    ruleId: "2EAF5A84-2E7F-4731-9BD2-35E0FBB956C4",
+                    title: "Google",
+                    description: "Habilite a integração com o Google Agenda e permita que seus usuários conectem suas contas",
+                    descriptionEnable: "A integração com o Google Agenda está ativa. Para conectar uma conta, acesse o Calendário",
+                    urlLogo: "https://www.gstatic.com/images/branding/product/1x/calendar_48dp.png",
+                    type: "free",
+                }
+            ],
+            modules: [ // não mudar a sequencia do array, causa problema nos valores
+                {
+                    name: "Signature",
+                    ruleId: "6E3F2FA1-CC8E-4541-9CF9-2201D7ECF56D",
+                    title: "Assinatura Digital",
+                    description: "Módulo assinatura digital",
+                    icon: "fa-solid fa-signature",
+                    type: "options",
+                    monthly: true,
+                    quantity: 0,
+                    value: 60,
+                    valueOption: { content: '30 Assinaturas por mês', total: 30, id: '60' },
+                    options: [
+                        { content: '30 Assinaturas por mês', total: 30, id: '60' },
+                        { content: '60 Assinaturas por mês', total: 60, id: '102' },
+                        { content: '100 Assinaturas por mês', total: 100, id: '144.50' },
+                        { content: '300 Assinaturas por mês', total: 300, id: '405' },
+                    ],
+                    btnColor: "#38A169"
+                },
+                {
+                    name: "Billet",
+                    ruleId: "1E50120F-19D4-411C-A819-687DFB355560",
+                    title: "Boleto Bancário",
+                    description: "Módulo boleto",
+                    icon: "fa-solid fa-barcode",
+                    type: "options",
+                    monthly: true,
+                    quantity: 0,
+                    value: 30,
+                    valueOption: { content: '30 Boletos por mês', total: 30, id: '30' },
+                    options: [
+                        { content: '30 Boletos por mês', total: 30, id: '30' },
+                        { content: '60 Boletos por mês', total: 60, id: '50' },
+                        { content: '100 Boletos por mês', total: 100, id: '75' },
+                        { content: '200 Boletos por mês', total: 200, id: '125' },
+                        { content: '300 Boletos por mês', total: 300, id: '150' },
+                    ],
+                    btnColor: "#38A169"
+                },
+                {
+                    name: "Document",
+                    ruleId: "",
+                    title: "Documento",
+                    description: "Documento avulso",
+                    icon: "fa-light fa-file-invoice",
+                    type: "only",
+                    monthly: false,
+                    quantity: 1,
+                    value: 120,
+                    btnColor: "#6A86A2"
+                },
+               /* {
+                    name: "TaxDocument",
+                    ruleId: "F12D6F30-DBB5-427C-961C-712235A3AA37",
+                    title: "Nota Fiscal",
+                    description: "Módulo nota fiscal",
+                    icon: "fa-solid fa-receipt",
+                    type: "options",
+                    monthly: true,
+                    quantity: 1,
+                    value: 45,
+                    valueOption: { content: '30 Notas por mês', total: 30, id: '45' },
+                    options: [
+                        { content: '30 Notas por mês', total: 30, id: '45' },
+                        { content: '60 Notas por mês', total: 60, id: '67.50' },
+                        { content: '100 Notas por mês', total: 100, id: '84.38' },
+                        { content: '200 Notas por mês', total: 200, id: '126.56' },
+                        { content: '300 Notas por mês', total: 300, id: '150' },
+                    ],
+                    btnColor: "#38A169"
+                },*/
+                {
+                    name: "User",
+                    ruleId: "",
+                    title: "Usuário",
+                    description: "Usuário avulso",
+                    icon: "fa-solid fa-user",
+                    type: "only",
+                    monthly: false,
+                    quantity: 1,
+                    value: 0,
+                    btnColor: "#38A169"
+                },
+                {
+                    name: "Audit",
+                    ruleId: "9b48d939-29ce-4249-9149-2493ffa1e7cd",
+                    title: "Registro de Auditoria",
+                    description: "Módulo de auditoria",
+                    detail: "Registre ações dos usuários",
+                    icon: "fa-solid fa-clock-rotate-left",
+                    type: "options",
+                    monthly: true,
+                    quantity: 0,
+                    value: 60,
+                    valueOption: { content: 'Plano padrão', total: 0, id: '60' },
+                    options: [
+                        { content: 'Plano padrão', total: 0, id: '60' },
+                    ],
+                    btnColor: "#38A169"
+                },
+            ],
+            term: {
+                name: "",
+                ruleId: "",
+                description: "",
+                quantity: 0,
+                value: 0,
+                monthly: false
+            },
+            rules: [],
+            selectedName: "",
+            selectedRulerId: "",
+        }
+    },
+    mounted() {
+        this.getPlan();
+        this.getAllLog();
+    },
+    computed: {
+        ...mapGetters("generic", ["event", "showModal"]),
+    },
+    methods: {
+        ...mapActions("generic", ["getApi", "postApi"]),
+        ...mapMutations("generic", ["openModal", "hideModal", "addEvent", "removeLoading"]),
+        ...mapMutations("user", ["updateStatusGoogle"]),
+        // precisa pegar a quantidade de usuário através do get ao invés de um possível context para atualizar em tempo real
+        getPlan() {
+            let params = {
+                url: this.urlGetPlan,
+            };
+            this.getApi(params).then((response) => {
+                this.currentUser = response.content.plan.numberOfUsers;
+                this.rules = response.content.rules;
+                this.currentPrice = this.prices[this.currentUser] || 0;
+                this.calculateUser(this.currentUser + 1);
+                this.loading = false;
+            });
+        },
+        getAllLog() {
+            let params = {
+                url: this.urlGetAllLog,
+            };
+            this.getApi(params).then((response) => {
+                this.purchaseHistory = response.content;
+            });
+        },
+        calculateDocument(quantity) {
+            this.modules[2].value = quantity * 120;
+        },
+        calculateUser(quantity) {
+            this.modules[3].value = this.prices[quantity] - this.currentPrice;
+        },
+        openTerm(params) {
+            this.openModal("term");
+            const { term } = params;
+            const quantity = term.monthly ? term.valueOption.total : term.quantity;
+            const period = term.monthly ? "mês" : "";
+            const value = term.monthly ? term.valueOption.id : term.value;
+
+            var totalization = quantity > 0 ? `, totalizando ${quantity} ${period}` : '';
+
+            this.term = {
+                name: term.name,
+                ruleId: term.ruleId,
+                quantity: term.quantity,
+                description: `${term.description} ${totalization}.`,
+                monthly: term.monthly,
+                value: value
+            };
+
+            this.removeLoading([term.name]);
+        },
+        openConfirm(param) {
+            this.selectedName = param.name;
+            this.selectedRulerId = param.ruleId;
+            this.openModal("google");
+            this.removeLoading([param.name]);
+        },
+        hasRule(ruleName) {
+            const rule = this.rules.find(rule => rule.name === ruleName);
+            return rule ? true : false;
+        },
+        enableFree(param) {
+            if (param) {
+                this.selectedName = param.name;
+                this.selectedRulerId = param.ruleId;
+            }
+            let params = {
+                url: this.urlCreate,
+                obj: {
+                    name: this.selectedName,
+                    ruleId: this.selectedRulerId,
+                    quantity: 0,
+                    term: ""
+                },
+                notNotifyToast: true
+            };
+            this.postApi(params).then((response) => {
+                let self = this;
+                setTimeout(function () {
+                    self.getPlan();
+                    self.removeLoading(["btnDisconnect", "btnConfirm", self.selectedName]);
+                    self.hideModal();
+                    self.addEvent({ name: "renovateUserLogged" });
+                }, 500);
+            });
+        },
+    },
+    watch: {
+        event: {
+            handler(event) {
+                if (event.name == "updateIncrementDecrement") {
+
+                    if (event.data.name == "Document") {
+                        this.calculateDocument(event.data.value);
+                    }
+                    if (event.data.name == "User") {
+                        this.calculateUser(this.currentUser + event.data.value);
+                    }
+                }
+
+                if (event.name == "contractedPlan") {
+                    this.getPlan();
+                    this.success = true;
+                }
+
+                if (event.name == "backContractedPlan") {
+                    this.getPlan();
+                    this.success = false;
+                    this.modules[1].quantity = 1;
+                    this.modules[1].value = 120;
+                    this.modules[3].quantity = 1;
+                }
+            },
+            deep: true,
+        },
+    },
+}
+
+
+</script>
+
+<style scoped>
+.molded {
+    width: 270px;
+    border: 1px solid #e8eaed;
+    background-color: white;
+    border-radius: 8px !important;
+    padding: 10px;
+    padding-top: 15px;
+    padding-left: 30px;
+    padding-right: 30px;
+    padding-bottom: 10px;
+    margin: 20px;
+}
+
+.div-icon {
+    font-size: 25px;
+}
+
+.div-title {
+    font-size: 18px;
+}
+
+.div-description {
+    font-size: 12px;
+    color: rgb(121, 121, 121);
+}
+
+.div-quantity {
+    margin-left: 20px;
+    margin-right: 20px;
+    margin-top: 25px;
+    margin-bottom: 25px;
+}
+
+.div-null {
+    height: 85px;
+}
+
+.icon-check {
+    font-size: 25px;
+    color: #38A169;
+}
+
+.div-already-has {
+    padding-top: 85px;
+}
+
+.div-value {
+    font-size: 18px;
+}
+
+.div-btn {
+    margin-top: 10px;
+}
+</style>

package/src/components/modules/adm/store/Success.vue

@@ -0,0 +1,79 @@
+<template>
+    <div>
+        <br />
+        <div v-if="loading">
+            <Loading type="line" :center="true" />
+            <div class="title">Aguarde, estamos liberando os serviços contratados...</div>
+        </div>
+        <div v-else class="div-success">
+            <Molded>
+                <div class="text-center">
+                    <div class="msg-success">Serviço contratado com sucesso!</div>
+                    <div class="icon-success">
+                        <i class="fa-light fa-circle-check"></i>
+                    </div>
+                    <div>
+                        <Button _key="btnBack" type="info" title="Voltar" classIcon="fa-solid fa-arrow-left"
+                            size="small" :clicked="back" />
+                    </div>
+                </div>
+                <br />
+            </Molded>
+        </div>
+        <div v-show="false">
+            <Timer :initialTimer="4" :endTime="success" />
+        </div>
+    </div>
+</template>
+
+<script>
+
+import { mapMutations } from "vuex";
+
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import Loading from "@nixweb/nixloc-ui/src/component/shared/Loading.vue";
+import Molded from "@nixweb/nixloc-ui/src/component/layout/Molded";
+import Timer from "@nixweb/nixloc-ui/src/component/shared/Timer";
+
+
+export default {
+    name: "Success",
+    components: {
+        Loading, Molded, Button, Timer
+    },
+    data() {
+        return {
+            loading: true,
+        }
+    },
+    methods: {
+        ...mapMutations("generic", ["addEvent", "removeLoading"]),
+        success() {
+            this.loading = false;
+        },
+        back() {
+            this.removeLoading(["btnBack"]);
+            this.addEvent({ name: "backContractedPlan" });
+        }
+    }
+}
+
+</script>
+
+<style scoped>
+.div-success {
+    width: 550px;
+    margin: auto;
+}
+
+.msg-success {
+    font-size: 18px;
+}
+
+.icon-success {
+    font-size: 55px;
+    color: #38a169;
+    margin-top: 10px;
+    margin-bottom: 15px;
+}
+</style>