@nixweb/nixloc-ui 0.0.271 → 0.0.273

package/src/components/modules/adm/register/Register.vue

@@ -0,0 +1,306 @@
+<template>
+  <div>
+    <Messages />
+    <div class="content">
+      <Molded>
+        <Wizard
+          v-if="!success"
+          :totalSteps="4"
+          :formName="[
+            'register.person',
+            'register.contact',
+            'register.address',
+            'register.user',
+          ]"
+          :showSteps="false"
+        >
+          <div slot="1">
+            <b-row>
+              <b-col sm="1">
+                <div class="step side-by-side"><span>1</span></div>
+              </b-col>
+              <b-col sm="10">
+                <div class="title side-by-side">
+                  Informe os dados da Empresa
+                </div></b-col
+              >
+            </b-row>
+            <br />
+            <Person
+              formName="register.person"
+              v-model="register.personRequest"
+              :required="true"
+            />
+          </div>
+          <div slot="2">
+            <b-row>
+              <b-col sm="1">
+                <div class="step side-by-side"><span>2</span></div>
+              </b-col>
+              <b-col sm="10">
+                <div class="title side-by-side">
+                  Informe os dados de contato
+                </div></b-col
+              >
+            </b-row>
+            <br />
+            <Contact
+              formName="register.contact"
+              v-model="register.contactRequest"
+              :required="true"
+            />
+          </div>
+          <div slot="3">
+            <b-row>
+              <b-col sm="1">
+                <div class="step side-by-side"><span>3</span></div>
+              </b-col>
+              <b-col sm="10">
+                <div class="title side-by-side">Informe o endereço</div>
+              </b-col>
+            </b-row>
+            <br />
+            <Address
+              formName="register.address"
+              v-model="register.addressRequest"
+              :required="true"
+            />
+          </div>
+          <div slot="4">
+            <b-row>
+              <b-col sm="1">
+                <div class="step side-by-side"><span>4</span></div>
+              </b-col>
+              <b-col sm="10">
+                <div class="title side-by-side">
+                  Informe o usuário administrador
+                </div></b-col
+              >
+            </b-row>
+            <br />
+            <b-row>
+              <b-col xs="12" sm="12" md="12" lg="4" xl="4">
+                <InputText
+                  title="Nome"
+                  field="name"
+                  :formName="formName"
+                  :required="true"
+                  :maxLength="50"
+                  v-model="user.name"
+                >
+                </InputText
+              ></b-col>
+              <b-col xs="12" sm="12" md="12" lg="5" xl="5">
+                <InputText
+                  title="E-mail"
+                  field="email"
+                  :formName="formName"
+                  :required="true"
+                  :maxLength="50"
+                  v-model="user.email"
+                >
+                </InputText
+              ></b-col>
+              <b-col xs="12" sm="12" md="12" lg="3" xl="3">
+                <InputWhatsApp
+                  title="Celular"
+                  field="mobile"
+                  :formName="formName"
+                  :required="false"
+                  :maxLength="50"
+                  v-model="user.mobile"
+                >
+                </InputWhatsApp>
+              </b-col>
+            </b-row>
+            <b-row>
+              <b-col xs="12" sm="12" md="12" lg="6" xl="6">
+                <InputText
+                  title="Login"
+                  field="userName"
+                  :formName="formName"
+                  :required="true"
+                  :maxLength="50"
+                  v-model="user.userName"
+                >
+                </InputText
+              ></b-col>
+              <b-col xs="12" sm="12" md="12" lg="6" xl="6">
+                <InputPassword
+                  title="Senha"
+                  field="password"
+                  :formName="formName"
+                  :required="true"
+                  :maxLength="50"
+                  v-model="user.password"
+                >
+                </InputPassword></b-col
+            ></b-row>
+          </div>
+          <div slot="finish">
+            <div class="text-center">
+              <Button
+                _key="create"
+                type="success"
+                title="Cadastrar"
+                size="medium"
+                :disabled="!isFormValid(formName)"
+                :clicked="create"
+              />
+            </div>
+          </div>
+        </Wizard>
+        <div v-else>
+          <b-row>
+            <b-col sm="12" class="text-center">
+              <div class="icon-success">
+                <i class="fas fa-check"></i>
+              </div>
+              <div class="company">Seu cadastro foi efetuado com sucesso!</div>
+              <div>
+                Enviamos mais informações em seu e-mail, para entrar no sistema
+                efetue o login <i class="fas fa-arrow-down"></i>
+              </div>
+              <br /><br />
+              <Button
+                _key="login"
+                type="primary"
+                title="Login"
+                size="medium"
+                :clicked="login"
+              />
+            </b-col>
+          </b-row>
+        </div>
+        <br />
+      </Molded>
+    </div>
+  </div>
+</template>
+
+<script>
+import Wizard from "@nixweb/nixloc-ui/src/component/layout/Wizard.vue";
+import Molded from "@nixweb/nixloc-ui/src/component/layout/Molded.vue";
+import Messages from "@nixweb/nixloc-ui/src/component/shared/Messages.vue";
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import InputText from "@nixweb/nixloc-ui/src/component/forms/InputText";
+import InputWhatsApp from "@nixweb/nixloc-ui/src/component/forms/InputWhatsApp";
+import InputPassword from "@nixweb/nixloc-ui/src/component/forms/InputPassword";
+
+import Person from "@nixweb/nixloc-ui/src/component/value-objects/Person.vue";
+import Contact from "@nixweb/nixloc-ui/src/component/value-objects/Contact.vue";
+import Address from "@nixweb/nixloc-ui/src/component/value-objects/Address.vue";
+
+import Register from "@/components/modules/adm/register/Register.js";
+
+import { mapGetters, mapActions, mapMutations } from "vuex";
+
+export default {
+  name: "Register",
+  components: {
+    Wizard,
+    Molded,
+    Messages,
+    Button,
+    InputText,
+    InputWhatsApp,
+    InputPassword,
+    Contact,
+    Person,
+    Address,
+  },
+  data() {
+    return {
+      formName: "register",
+      register: new Register(),
+      urlCreate: "/api/v1/adm/company/create",
+      user: {
+        name: "",
+        email: "",
+        mobile: "",
+        userName: "",
+        password: "",
+      },
+      success: false,
+    };
+  },
+  created() {
+    this.addUserLogged({});
+  },
+  computed: {
+    ...mapGetters("validation", ["isFormValid"]),
+  },
+  methods: {
+    ...mapActions("generic", ["postApi"]),
+    ...mapMutations("generic", ["removeLoading", "removeEvent"]),
+    ...mapMutations("user", ["addUserLogged"]),
+    create() {
+      let userRequest = {
+        name: this.user.name,
+        email: this.user.email,
+        mobile: this.user.mobile,
+        userName: this.user.userName,
+        password: this.user.password,
+      };
+      let addressRequest = {
+        zipCode: this.register.addressRequest.zipCode,
+        street: this.register.addressRequest.street,
+        number: this.register.addressRequest.number,
+        complement: this.register.addressRequest.complement,
+        province: this.register.addressRequest.province,
+        city: this.register.addressRequest.city,
+        state: this.register.addressRequest.state.content,
+      };
+      let planRequest = {
+        numberOfUsers: 1,
+        numberOfDocuments: 1,
+        monthlyValue: 180,
+      };
+      let registerRequest = {
+        personRequest: this.register.personRequest,
+        contactRequest: this.register.contactRequest,
+        addressRequest: addressRequest,
+        userRequest: userRequest,
+        planRequest: planRequest,
+      };
+      let params = { url: this.urlCreate, obj: registerRequest };
+      this.postApi(params).then((response) => {
+        if (response.success) this.success = true;
+        this.removeLoading(["create"]);
+      });
+    },
+    login() {
+      window.location.replace("/login");
+    },
+  },
+};
+</script>
+<style scoped>
+.step {
+  margin-top: 5px;
+  height: 48px;
+  width: 48px;
+  font-size: 20px;
+  display: grid;
+  place-items: center;
+  background-color: #fafafc;
+  border-radius: 100%;
+  border: 1px solid #dbdfe9;
+  position: relative;
+  color: #8ca1b7;
+}
+
+.title {
+  margin-top: 9px;
+  font-size: 18px;
+}
+
+.icon-success {
+  font-size: 50px;
+  color: #52c41a;
+}
+
+.company {
+  font-size: 20px;
+}
+</style>

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

@@ -0,0 +1,340 @@
+<template>
+    <div>
+        <div v-if="success">
+            <Success />
+        </div>
+        <div v-else>
+            <div v-show="!loading" class="side-by-side" v-for="item in modules ">
+                <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 fieldTarget="timeZone" :data="item.options" :initialValue="item.valueOption"
+                                v-model="item.valueOption" />
+                        </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>
+        </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>
+    </div>
+</template>
+
+<script>
+
+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
+    },
+    data() {
+        return {
+            urlGetPlan: "/api/v1/adm/company/get-plan",
+            currentUser: 0,
+            currentPrice: 0,
+            loading: true,
+            success: false,
+            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,
+            },
+            modules: [
+                {
+                    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"
+                },
+            ],
+            term: {
+                name: "",
+                ruleId: "",
+                description: "",
+                quantity: 0,
+                value: 0,
+                monthly: false
+            },
+            rules: [],
+        }
+    },
+    mounted() {
+        this.getPlan();
+    },
+    computed: {
+        ...mapGetters("generic", ["event", "showModal"]),
+    },
+    methods: {
+        ...mapActions("generic", ["getApi"]),
+        ...mapMutations("generic", ["openModal", "removeLoading"]),
+        // 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;
+
+            });
+        },
+        calculateDocument(quantity) {
+            this.modules[2].value = quantity * 120;
+        },
+        calculateUser(quantity) {
+            this.modules[4].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;
+
+            this.term = {
+                name: term.name,
+                ruleId: term.ruleId,
+                quantity: term.quantity,
+                description: `${term.description}, totalizando ${quantity} ${period}.`,
+                monthly: term.monthly,
+                value: value
+            };
+
+            this.removeLoading([term.name]);
+        },
+        hasRule(ruleName) {
+            const rule = this.rules.find(rule => rule.name === ruleName);
+            return rule ? true : false;
+        }
+    },
+    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[2].quantity = 1;
+                    this.modules[2].value = 120;
+                    this.modules[4].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;
+}
+
+.icon-check {
+    font-size: 25px;
+    color: #38A169;
+}
+
+.div-already-has {
+    padding-top: 85px;
+}
+
+.div-value {
+    font-size: 18px;
+}
+
+.div-btn {
+    margin-top: 10px;
+}
+</style>