@burh/nuxt-core 1.0.404 → 1.0.405

package/components/burh-ds/Modals/AddCustomerModal.vue

@@ -1,527 +1,527 @@
-<template>
-	<el-dialog
-		:visible.sync="isActive"
-		width="55%"
-		custom-class="position-relative"
-		@close="$emit('close')"
-	>
-		<template v-if="isActive">
-			<div class="role">
-				<h3>{{ isEditing ? 'Editando Cliente' : 'Cadastrar Cliente' }}</h3>
-
-				<section>
-					<validation-observer ref="sendRole">
-						<validation-provider
-							tag="div"
-							name="Nome"
-							rules="required"
-							v-slot="{ errors }"
-						>
-							<label for="name">Nome da Empresa</label>
-							<base-input
-								type="text"
-								id="name"
-								v-model="name"
-								placeholder="Nome da Empresa"
-								:error="errors[0]"
-								:valid="errors.length ? true : false"
-							/>
-						</validation-provider>
-						<validation-provider
-							tag="div"
-							name="Descrição"
-							rules="required"
-							v-slot="{ errors }"
-						>
-							<label for="description">Descrição</label>
-							<base-input
-								type="text"
-								id="description"
-								v-model="description"
-								placeholder="Descrição"
-								:error="errors[0]"
-								:valid="errors.length ? true : false"
-							/>
-						</validation-provider>
-						<validation-provider
-							tag="div"
-							name="Razão Social"
-							rules="required"
-							v-slot="{ errors }"
-						>
-							<label for="social">Razão Social</label>
-							<base-input
-								type="text"
-								id="social"
-								v-model="social"
-								placeholder="Razão Social"
-								:error="errors[0]"
-								:valid="errors.length ? true : false"
-							/>
-						</validation-provider>
-						<validation-provider
-							tag="div"
-							name="CNPJ"
-							rules="required|min:14"
-							v-slot="{ errors }"
-							v-if="!isEditing"
-						>
-							<label for="cnpj">CNPJ</label>
-							<base-input
-								type="text"
-								id="cnpj"
-								v-model="cnpj"
-								placeholder="CNPJ"
-								:mask="['##.###.###/####-##']"
-								:error="errors[0]"
-								:valid="errors.length ? true : false"
-							/>
-						</validation-provider>
-
-						<validation-provider
-							tag="div"
-							name="CEP"
-							rules="required|min:9"
-							v-slot="{ errors }"
-						>
-							<label for="cep">CEP</label>
-							<base-input
-								type="text"
-								id="cep"
-								v-model="cep"
-								placeholder="CEP"
-								v-mask="['#####-###']"
-								:error="errors[0]"
-								:valid="errors.length ? true : false"
-							/>
-						</validation-provider>
-
-						<validation-provider
-							tag="div"
-							name="Cidade"
-							rules="required"
-							v-slot="{ errors }"
-						>
-							<label for="city" class="form-control-label">Cidade</label>
-							<div class="form-group">
-								<el-select
-									id="city"
-									v-model="city"
-									placeholder="Cidade"
-									filterable
-									remote
-									required
-									auto-complete="off"
-									:class="{'is-invalid': errors[0]}"
-									:remote-method="getCityListFiltered"
-									:loading="isSelectLoading"
-
-								>
-									<div class="text-center" slot="empty">
-										<p class="small mb-2 mt-3">Nenhuma cidade encontrada</p>
-									</div>
-
-									<el-option
-										v-for="city in cityListFiltered"
-										:key="city.value"
-										:value="city.value"
-										:label="city.value"
-									/>
-								</el-select>
-								<div
-									class="invalid-feedback"
-									style="display: block;">
-									{{ errors[0] }}
-								</div>
-							</div>
-						</validation-provider>
-
-						<validation-provider
-							tag="div"
-							name="Endereço"
-							rules="required"
-							v-slot="{ errors }"
-						>
-							<label for="address">Endereço</label>
-							<base-input
-								type="text"
-								id="address"
-								v-model="address"
-								placeholder="Endereço"
-								:error="errors[0]"
-								:valid="errors.length ? true : false"
-							/>
-						</validation-provider>
-
-						<h2>Contato</h2>
-
-						<div v-for="(contact, idx) in contacts" :key="idx">
-							<div class="border p-3 rounded">
-								<validation-provider
-									tag="div"
-									name="Responsável"
-									:vid="`send-responsible-${idx}`"
-									rules="required"
-									v-slot="{ errors }"
-								>
-									<label for="name">Responsável</label>
-									<base-input
-										type="text"
-										v-model="contact.name"
-										placeholder="Responsável"
-										:error="errors[0]"
-										:valid="errors.length ? true : false"
-									/>
-								</validation-provider>
-
-								<validation-provider
-									tag="div"
-									name="E-mail"
-									:vid="`send-email-${idx}`"
-									rules="required"
-									v-slot="{ errors }"
-								>
-									<label for="email">Email</label>
-									<base-input
-										type="email"
-										v-model="contact.email"
-										placeholder="Email"
-										:error="errors[0]"
-										:valid="errors.length ? true : false"
-									/>
-								</validation-provider>
-
-								<label for="phone">Telefone</label>
-								<base-input
-									type="text"
-									v-model="contact.phone_number"
-									:mask="['(##) ####-####']"
-									placeholder="Telefone com DDD"
-								/>
-
-								<label for="cellphone">Celular</label>
-								<base-input
-									type="text"
-									v-model="contact.cellphone_number"
-									:mask="['(##) ####-####', '(##) #####-####']"
-									placeholder="Celular com DDD"
-								/>
-
-								<label for="note">Observações</label>
-								<base-input
-									type="text"
-									v-model="contact.note"
-									placeholder="Observações"
-								/>
-
-								<div class="col-1 pt-2">
-									<i
-										v-if="idx !== contacts.length - 1"
-										class="fa fa-trash pointer"
-										@click="removeSlot(idx)"
-									></i>
-								</div>
-							</div>
-							<div class="col-1 pt-2">
-								<i v-if="idx === contacts.length - 1" class="fa fa-plus pointer" @click="addSlot"></i>
-							</div>
-						</div>
-					</validation-observer>
-					<button
-						type="button"
-						:class="{'invalid-form': !permissions}"
-						:disabled="!permissions"
-						@click="sendRequest"
-						class="btn ml-auto d-block btn-primary btn-md"
-					>
-						{{ isEditing ? 'Salvar' : 'Enviar' }}
-					</button>
-				</section>
-			</div>
-
-			<span class="tool tool-close" @click="$emit('close')">
-				Fechar
-				<font-awesome-icon
-					:icon="['fas', 'times']"
-					class="text-white ml-1"
-				/>
-			</span>
-		</template>
-	</el-dialog>
-</template>
-
-<script>
-import { Dialog, Select, Option } from 'element-ui';
-import { mask } from 'vue-the-mask';
-import swal from 'sweetalert2';
-import removeAccents from 'remove-accents';
-
-export default {
-	name: 'add-customer-modal',
-	directives:{
-		mask
-	},
-	components: {
-		[Dialog.name]: Dialog,
-		[Select.name]: Select,
-		[Option.name]: Option,
-
-	},
-	props: {
-		isActive: {
-			type: Boolean,
-			default: false,
-			description: 'Modal open verification'
-		},
-		userData: {
-			type: Object,
-			default: null
-		}
-	},
-	watch: {
-		name(to) {
-			if (to.length > 3) {
-				this.permissions = true;
-			}
-		},
-		isActive(to) {
-			if (!to) {
-				this.resetFields();
-				this.cityList = [];
-			}
-			if(!this.cityList.length && to){
-				this.getCityList();
-			}
-		},
-		userData(to) {
-			if (to !== null) {
-				this.id = to.id;
-				this.name = to.name;
-				this.social = to.razao_social;
-				this.description = to.description;
-
-				to.contact.length > 0 && (this.contacts = to.contact);
-
-				this.cnpj = to.cnpj;
-				this.cep = to.cep;
-				this.address = to.address;
-				this.city = to.city;
-				this.isEditing = true;
-			} else {
-				this.isEditing = false;
-			}
-		}
-	},
-	data() {
-		return {
-			name: '',
-			social: '',
-			description: '',
-			cnpj: '',
-			contacts: [],
-			cep: '',
-			address: '',
-			city: '',
-			isEditing: false,
-			isSelectLoading: false,
-			cityList: [],
-			cityListFiltered: [],
-			permissions: false,
-			permessionsData: [
-				{
-					id: 22845207,
-					name: 'Administrador'
-				},
-				{
-					id: 22890835,
-					name: 'Usuário Empresas'
-				},
-				{
-					id: 22913699,
-					name: 'Portal do RH'
-				},
-				{
-					id: 22959227,
-					name: 'Universidade Corporativa'
-				},
-			]
-		};
-	},
-	methods: {
-		resetFields() {
-			this.name = '';
-			this.social = '';
-			this.description = '';
-			this.cnpj = '';
-			this.contacts = [],
-			this.cep = '';
-			this.address = '';
-			this.city = '';
-
-			this.addSlot();
-
-			this.$refs.sendRole && this.$refs.sendRole.reset();
-		},
-		addSlot(){
-			const newContacts = {
-				name:'',
-				email:'',
-				phone_number:'',
-				cellphone_number:'',
-				note:'',
-			};
-
-			this.contacts = [...this.contacts, newContacts];
-		},
-		removeSlot(idx){
-			this.contacts.splice(idx, 1);
-		},
-		async showMessage(message, type = 'success') {
-			const Toast = swal.mixin({
-				toast: true,
-				position: 'top-end',
-				showConfirmButton: false,
-				timer: 3000,
-			});
-
-			Toast.fire({
-				type: type,
-				title: message,
-			});
-		},
-		async getCityList() {
-			this.cityList = await fetch('https://raw.githubusercontent.com/Skuth/cidades-com-estados-brasil/main/cidades.json')
-				.then(res => res.json())
-				.catch(() => {});
-		},
-		getCityListFiltered(query) {
-			if (query && query.length >= 2) {
-				this.cityListFiltered = this.cityList.filter(city => removeAccents(String(city.city)).toLowerCase().startsWith(removeAccents(query.toLowerCase())));
-				this.cityListFiltered = this.cityListFiltered.map(city => {
-					return {
-						value: `${city.city} / ${city.uf}`
-					};
-				});
-			} else {
-				this.cityListFiltered = [];
-			}
-		},
-		async checkZipcode() {
-			await this.$services.company
-				.checkZipCode(this.cep)
-				.then((response) => {
-					if (response.error || response.data.length == 0) {
-						response.error = true;
-					} else {
-						if (response.data) {
-							if (response.data.city_name && response.data.region_code) {
-								this.city = `${response.data.city_name} / ${response.data.region_code}`;
-							}
-						}
-					}
-				})
-				.catch(() => {});
-		},
-		async sendRequest() {
-			this.permissions = true;
-
-			const pass = await this.$refs.sendRole.validate();
-
-			if (!pass) {
-				return this.showMessage('Preencha todos os campos obrigatórios!', 'error');
-			}
-
-			await this.checkZipcode();
-
-			let payload = {
-				name: this.name,
-				razao_social: this.social,
-				description: this.description,
-				contact: this.contacts,
-				cnpj: this.cnpj,
-				cep: this.cep,
-				address: this.address,
-				city: this.city
-			};
-
-			const mode = this.isEditing ? 'update' : 'create';
-
-			this.$emit('customer-submit', payload, mode, this.id);
-			this.$emit('close');
-		}
-	},
-	mounted() {
-		this.getCityList();
-
-		!this.isEditing && this.addSlot();
-	}
-};
-</script>
-
-<style lang="scss">
-body.swal2-toast-shown .swal2-container.swal2-top-end, body.swal2-toast-shown .swal2-container.swal2-top-right {
-    z-index: 10000!important;
-}
-</style>
-
-<style lang="scss" scoped>
-@import '@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss';
-
-/deep/ .el-dialog__body {
-    padding: 0;
-}
-
-/deep/ .el-dialog__header {
-    display: none;
-}
-
-/deep/ .el-dialog {
-    overflow: hidden;
-    border-radius: 10px;
-    max-width: 47.5rem;
-}
-
-.role {
-    padding: 2rem 3rem;
-
-    section {
-        margin-top: 2rem;
-
-        .invalid-form {
-            opacity: 0.3;
-        }
-    }
-}
-
-.is-invalid {
-	/deep/ input {
-		border-color: #de214b!important;
-	}
-}
-
-.tool {
-    position: absolute;
-    top: 1rem;
-    z-index: 10;
-    color: $primary;
-    cursor: pointer;
-
-    &-close {
-        position: absolute;
-        width: 88px;
-        height: 27px;
-        right: 7px;
-        top: 7px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        font-size: 11px;
-
-        font-weight: 500;
-        background: rgba(0, 0, 0, 0.2);
-        border-radius: 17.5px;
-        color: #fff;
-    }
-}
-</style>
+<template>
+	<el-dialog
+		:visible.sync="isActive"
+		width="55%"
+		custom-class="position-relative"
+		@close="$emit('close')"
+	>
+		<template v-if="isActive">
+			<div class="role">
+				<h3>{{ isEditing ? 'Editando Cliente' : 'Cadastrar Cliente' }}</h3>
+
+				<section>
+					<validation-observer ref="sendRole">
+						<validation-provider
+							tag="div"
+							name="Nome"
+							rules="required"
+							v-slot="{ errors }"
+						>
+							<label for="name">Nome da Empresa</label>
+							<base-input
+								type="text"
+								id="name"
+								v-model="name"
+								placeholder="Nome da Empresa"
+								:error="errors[0]"
+								:valid="errors.length ? true : false"
+							/>
+						</validation-provider>
+						<validation-provider
+							tag="div"
+							name="Descrição"
+							rules="required"
+							v-slot="{ errors }"
+						>
+							<label for="description">Descrição</label>
+							<base-input
+								type="text"
+								id="description"
+								v-model="description"
+								placeholder="Descrição"
+								:error="errors[0]"
+								:valid="errors.length ? true : false"
+							/>
+						</validation-provider>
+						<validation-provider
+							tag="div"
+							name="Razão Social"
+							rules="required"
+							v-slot="{ errors }"
+						>
+							<label for="social">Razão Social</label>
+							<base-input
+								type="text"
+								id="social"
+								v-model="social"
+								placeholder="Razão Social"
+								:error="errors[0]"
+								:valid="errors.length ? true : false"
+							/>
+						</validation-provider>
+						<validation-provider
+							tag="div"
+							name="CNPJ"
+							rules="required|min:14"
+							v-slot="{ errors }"
+							v-if="!isEditing"
+						>
+							<label for="cnpj">CNPJ</label>
+							<base-input
+								type="text"
+								id="cnpj"
+								v-model="cnpj"
+								placeholder="CNPJ"
+								:mask="['##.###.###/####-##']"
+								:error="errors[0]"
+								:valid="errors.length ? true : false"
+							/>
+						</validation-provider>
+
+						<validation-provider
+							tag="div"
+							name="CEP"
+							rules="required|min:9"
+							v-slot="{ errors }"
+						>
+							<label for="cep">CEP</label>
+							<base-input
+								type="text"
+								id="cep"
+								v-model="cep"
+								placeholder="CEP"
+								v-mask="['#####-###']"
+								:error="errors[0]"
+								:valid="errors.length ? true : false"
+							/>
+						</validation-provider>
+
+						<validation-provider
+							tag="div"
+							name="Cidade"
+							rules="required"
+							v-slot="{ errors }"
+						>
+							<label for="city" class="form-control-label">Cidade</label>
+							<div class="form-group">
+								<el-select
+									id="city"
+									v-model="city"
+									placeholder="Cidade"
+									filterable
+									remote
+									required
+									auto-complete="off"
+									:class="{'is-invalid': errors[0]}"
+									:remote-method="getCityListFiltered"
+									:loading="isSelectLoading"
+
+								>
+									<div class="text-center" slot="empty">
+										<p class="small mb-2 mt-3">Nenhuma cidade encontrada</p>
+									</div>
+
+									<el-option
+										v-for="city in cityListFiltered"
+										:key="city.value"
+										:value="city.value"
+										:label="city.value"
+									/>
+								</el-select>
+								<div
+									class="invalid-feedback"
+									style="display: block;">
+									{{ errors[0] }}
+								</div>
+							</div>
+						</validation-provider>
+
+						<validation-provider
+							tag="div"
+							name="Endereço"
+							rules="required"
+							v-slot="{ errors }"
+						>
+							<label for="address">Endereço</label>
+							<base-input
+								type="text"
+								id="address"
+								v-model="address"
+								placeholder="Endereço"
+								:error="errors[0]"
+								:valid="errors.length ? true : false"
+							/>
+						</validation-provider>
+
+						<h2>Contato</h2>
+
+						<div v-for="(contact, idx) in contacts" :key="idx">
+							<div class="border p-3 rounded">
+								<validation-provider
+									tag="div"
+									name="Responsável"
+									:vid="`send-responsible-${idx}`"
+									rules="required"
+									v-slot="{ errors }"
+								>
+									<label for="name">Responsável</label>
+									<base-input
+										type="text"
+										v-model="contact.name"
+										placeholder="Responsável"
+										:error="errors[0]"
+										:valid="errors.length ? true : false"
+									/>
+								</validation-provider>
+
+								<validation-provider
+									tag="div"
+									name="E-mail"
+									:vid="`send-email-${idx}`"
+									rules="required"
+									v-slot="{ errors }"
+								>
+									<label for="email">Email</label>
+									<base-input
+										type="email"
+										v-model="contact.email"
+										placeholder="Email"
+										:error="errors[0]"
+										:valid="errors.length ? true : false"
+									/>
+								</validation-provider>
+
+								<label for="phone">Telefone</label>
+								<base-input
+									type="text"
+									v-model="contact.phone_number"
+									:mask="['(##) ####-####']"
+									placeholder="Telefone com DDD"
+								/>
+
+								<label for="cellphone">Celular</label>
+								<base-input
+									type="text"
+									v-model="contact.cellphone_number"
+									:mask="['(##) ####-####', '(##) #####-####']"
+									placeholder="Celular com DDD"
+								/>
+
+								<label for="note">Observações</label>
+								<base-input
+									type="text"
+									v-model="contact.note"
+									placeholder="Observações"
+								/>
+
+								<div class="col-1 pt-2">
+									<i
+										v-if="idx !== contacts.length - 1"
+										class="fa fa-trash pointer"
+										@click="removeSlot(idx)"
+									></i>
+								</div>
+							</div>
+							<div class="col-1 pt-2">
+								<i v-if="idx === contacts.length - 1" class="fa fa-plus pointer" @click="addSlot"></i>
+							</div>
+						</div>
+					</validation-observer>
+					<button
+						type="button"
+						:class="{'invalid-form': !permissions}"
+						:disabled="!permissions"
+						@click="sendRequest"
+						class="btn ml-auto d-block btn-primary btn-md"
+					>
+						{{ isEditing ? 'Salvar' : 'Enviar' }}
+					</button>
+				</section>
+			</div>
+
+			<span class="tool tool-close" @click="$emit('close')">
+				Fechar
+				<font-awesome-icon
+					:icon="['fas', 'times']"
+					class="text-white ml-1"
+				/>
+			</span>
+		</template>
+	</el-dialog>
+</template>
+
+<script>
+import { Dialog, Select, Option } from 'element-ui';
+import { mask } from 'vue-the-mask';
+import swal from 'sweetalert2';
+import removeAccents from 'remove-accents';
+
+export default {
+	name: 'add-customer-modal',
+	directives:{
+		mask
+	},
+	components: {
+		[Dialog.name]: Dialog,
+		[Select.name]: Select,
+		[Option.name]: Option,
+
+	},
+	props: {
+		isActive: {
+			type: Boolean,
+			default: false,
+			description: 'Modal open verification'
+		},
+		userData: {
+			type: Object,
+			default: null
+		}
+	},
+	watch: {
+		name(to) {
+			if (to.length > 3) {
+				this.permissions = true;
+			}
+		},
+		isActive(to) {
+			if (!to) {
+				this.resetFields();
+				this.cityList = [];
+			}
+			if(!this.cityList.length && to){
+				this.getCityList();
+			}
+		},
+		userData(to) {
+			if (to !== null) {
+				this.id = to.id;
+				this.name = to.name;
+				this.social = to.razao_social;
+				this.description = to.description;
+
+				to.contact.length > 0 && (this.contacts = to.contact);
+
+				this.cnpj = to.cnpj;
+				this.cep = to.cep;
+				this.address = to.address;
+				this.city = to.city;
+				this.isEditing = true;
+			} else {
+				this.isEditing = false;
+			}
+		}
+	},
+	data() {
+		return {
+			name: '',
+			social: '',
+			description: '',
+			cnpj: '',
+			contacts: [],
+			cep: '',
+			address: '',
+			city: '',
+			isEditing: false,
+			isSelectLoading: false,
+			cityList: [],
+			cityListFiltered: [],
+			permissions: false,
+			permessionsData: [
+				{
+					id: 22845207,
+					name: 'Administrador'
+				},
+				{
+					id: 22890835,
+					name: 'Usuário Empresas'
+				},
+				{
+					id: 22913699,
+					name: 'Portal do RH'
+				},
+				{
+					id: 22959227,
+					name: 'Universidade Corporativa'
+				},
+			]
+		};
+	},
+	methods: {
+		resetFields() {
+			this.name = '';
+			this.social = '';
+			this.description = '';
+			this.cnpj = '';
+			this.contacts = [],
+			this.cep = '';
+			this.address = '';
+			this.city = '';
+
+			this.addSlot();
+
+			this.$refs.sendRole && this.$refs.sendRole.reset();
+		},
+		addSlot(){
+			const newContacts = {
+				name:'',
+				email:'',
+				phone_number:'',
+				cellphone_number:'',
+				note:'',
+			};
+
+			this.contacts = [...this.contacts, newContacts];
+		},
+		removeSlot(idx){
+			this.contacts.splice(idx, 1);
+		},
+		async showMessage(message, type = 'success') {
+			const Toast = swal.mixin({
+				toast: true,
+				position: 'top-end',
+				showConfirmButton: false,
+				timer: 3000,
+			});
+
+			Toast.fire({
+				type: type,
+				title: message,
+			});
+		},
+		async getCityList() {
+			this.cityList = await fetch('https://raw.githubusercontent.com/Skuth/cidades-com-estados-brasil/main/cidades.json')
+				.then(res => res.json())
+				.catch(() => {});
+		},
+		getCityListFiltered(query) {
+			if (query && query.length >= 2) {
+				this.cityListFiltered = this.cityList.filter(city => removeAccents(String(city.city)).toLowerCase().startsWith(removeAccents(query.toLowerCase())));
+				this.cityListFiltered = this.cityListFiltered.map(city => {
+					return {
+						value: `${city.city} / ${city.uf}`
+					};
+				});
+			} else {
+				this.cityListFiltered = [];
+			}
+		},
+		async checkZipcode() {
+			await this.$services.company
+				.checkZipCode(this.cep)
+				.then((response) => {
+					if (response.error || response.data.length == 0) {
+						response.error = true;
+					} else {
+						if (response.data) {
+							if (response.data.city_name && response.data.region_code) {
+								this.city = `${response.data.city_name} / ${response.data.region_code}`;
+							}
+						}
+					}
+				})
+				.catch(() => {});
+		},
+		async sendRequest() {
+			this.permissions = true;
+
+			const pass = await this.$refs.sendRole.validate();
+
+			if (!pass) {
+				return this.showMessage('Preencha todos os campos obrigatórios!', 'error');
+			}
+
+			await this.checkZipcode();
+
+			let payload = {
+				name: this.name,
+				razao_social: this.social,
+				description: this.description,
+				contact: this.contacts,
+				cnpj: this.cnpj,
+				cep: this.cep,
+				address: this.address,
+				city: this.city
+			};
+
+			const mode = this.isEditing ? 'update' : 'create';
+
+			this.$emit('customer-submit', payload, mode, this.id);
+			this.$emit('close');
+		}
+	},
+	mounted() {
+		this.getCityList();
+
+		!this.isEditing && this.addSlot();
+	}
+};
+</script>
+
+<style lang="scss">
+body.swal2-toast-shown .swal2-container.swal2-top-end, body.swal2-toast-shown .swal2-container.swal2-top-right {
+    z-index: 10000!important;
+}
+</style>
+
+<style lang="scss" scoped>
+@import '@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss';
+
+/deep/ .el-dialog__body {
+    padding: 0;
+}
+
+/deep/ .el-dialog__header {
+    display: none;
+}
+
+/deep/ .el-dialog {
+    overflow: hidden;
+    border-radius: 10px;
+    max-width: 47.5rem;
+}
+
+.role {
+    padding: 2rem 3rem;
+
+    section {
+        margin-top: 2rem;
+
+        .invalid-form {
+            opacity: 0.3;
+        }
+    }
+}
+
+.is-invalid {
+	/deep/ input {
+		border-color: #de214b!important;
+	}
+}
+
+.tool {
+    position: absolute;
+    top: 1rem;
+    z-index: 10;
+    color: $primary;
+    cursor: pointer;
+
+    &-close {
+        position: absolute;
+        width: 88px;
+        height: 27px;
+        right: 7px;
+        top: 7px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        font-size: 11px;
+
+        font-weight: 500;
+        background: rgba(0, 0, 0, 0.2);
+        border-radius: 17.5px;
+        color: #fff;
+    }
+}
+</style>