INSR-7752: Formatting on contact-details
This commit is contained in:
parent
02281b3230
commit
d7f6ba1fc9
8 changed files with 108 additions and 89 deletions
|
|
@ -79,7 +79,7 @@
|
||||||
</fieldset>
|
</fieldset>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="!suppressError"
|
v-if="!suppressError && errorMessage"
|
||||||
class="row form-test-error mt-1">
|
class="row form-test-error mt-1">
|
||||||
<error-message :name="formatString(groupName)"></error-message>
|
<error-message :name="formatString(groupName)"></error-message>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,7 @@
|
||||||
:id="inputId"
|
:id="inputId"
|
||||||
:ref="inputId"
|
:ref="inputId"
|
||||||
v-model.trim="value"
|
v-model.trim="value"
|
||||||
class="form-control"
|
class="textarea-input"
|
||||||
:name="inputId"
|
:name="inputId"
|
||||||
:rows="[inputRows ?? 10]"
|
:rows="[inputRows ?? 10]"
|
||||||
:placeholder="placeholderText"
|
:placeholder="placeholderText"
|
||||||
|
|
@ -32,8 +32,15 @@
|
||||||
@drop="trimOnPaste">
|
@drop="trimOnPaste">
|
||||||
</textarea>
|
</textarea>
|
||||||
</div>
|
</div>
|
||||||
<p class="character-count margin-top-8">
|
<p
|
||||||
{{ maxLength - characterCount }}/{{ maxLength }} characters remaining
|
v-if="characterCount == 0"
|
||||||
|
class="character-count">
|
||||||
|
{{ maxLength }} characters allowed
|
||||||
|
</p>
|
||||||
|
<p
|
||||||
|
v-else
|
||||||
|
class="character-count">
|
||||||
|
{{ maxLength - characterCount }} characters left
|
||||||
</p>
|
</p>
|
||||||
<div
|
<div
|
||||||
v-show="errorMessage"
|
v-show="errorMessage"
|
||||||
|
|
@ -103,7 +110,7 @@ export default {
|
||||||
computed: {
|
computed: {
|
||||||
/**
|
/**
|
||||||
* @summary Returns the number of characters in the textarea field.
|
* @summary Returns the number of characters in the textarea field.
|
||||||
* @returns {number}
|
* @returns {number} the number of characters.
|
||||||
*/
|
*/
|
||||||
characterCount() {
|
characterCount() {
|
||||||
return this?.modelValue?.length ?? 0;
|
return this?.modelValue?.length ?? 0;
|
||||||
|
|
@ -155,19 +162,18 @@ export default {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-control {
|
.textarea-input {
|
||||||
max-height: 30rem;
|
padding: .625rem;
|
||||||
border: $border-input;
|
resize: none;
|
||||||
border-radius: $border-radius;
|
margin-bottom: .625rem;
|
||||||
padding: 12px 16px;
|
width: 100%;
|
||||||
letter-spacing: inherit;
|
letter-spacing: inherit;
|
||||||
box-shadow: $box-shadow-input;
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
line-height: 1.375rem;
|
||||||
&::placeholder {
|
&::placeholder {
|
||||||
color: $gray-500;
|
color: $gray-500;
|
||||||
}
|
}
|
||||||
&:focus {
|
|
||||||
border: $border-input-focus;
|
|
||||||
}
|
|
||||||
&:disabled,
|
&:disabled,
|
||||||
&.disabled {
|
&.disabled {
|
||||||
background-color: $gray-100;
|
background-color: $gray-100;
|
||||||
|
|
@ -181,12 +187,8 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.character-count {
|
.character-count {
|
||||||
color: $gray-600;
|
color: #4d4e53;
|
||||||
font-size: 12px;
|
font-size: 1rem;
|
||||||
margin-bottom: 0px;
|
line-height: 1.375rem;
|
||||||
}
|
|
||||||
|
|
||||||
.margin-top-8 {
|
|
||||||
margin-top: 8px;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -15,6 +15,7 @@
|
||||||
<siteSubHeader
|
<siteSubHeader
|
||||||
id="sub-header"
|
id="sub-header"
|
||||||
ref="siteSubHeader"
|
ref="siteSubHeader"
|
||||||
|
class="subheader"
|
||||||
:cmsWidgetName="widget.siteSubHeader" />
|
:cmsWidgetName="widget.siteSubHeader" />
|
||||||
<!-- TO DO: Use MSR appointment information for MSR -->
|
<!-- TO DO: Use MSR appointment information for MSR -->
|
||||||
<alert
|
<alert
|
||||||
|
|
@ -28,11 +29,13 @@
|
||||||
v-model="isSameAsPolicyAddress"
|
v-model="isSameAsPolicyAddress"
|
||||||
checkboxName="sameAsPolicyAddress"
|
checkboxName="sameAsPolicyAddress"
|
||||||
buttonID="sameAsPolicyAddress"
|
buttonID="sameAsPolicyAddress"
|
||||||
|
class="form-group same-address-checkbox"
|
||||||
:checkboxLabel="sameAsPolicyAddressQuestionText" />
|
:checkboxLabel="sameAsPolicyAddressQuestionText" />
|
||||||
<textboxQuestion
|
<textboxQuestion
|
||||||
ref="addressQuestion"
|
ref="addressQuestion"
|
||||||
v-model="address"
|
v-model="address"
|
||||||
inputId="address"
|
inputId="address"
|
||||||
|
class="form-group"
|
||||||
:cmsWidgetName="widget.streetAddressQuestion"
|
:cmsWidgetName="widget.streetAddressQuestion"
|
||||||
isRequired
|
isRequired
|
||||||
:validationRules="'street-address-required'" />
|
:validationRules="'street-address-required'" />
|
||||||
|
|
@ -40,11 +43,13 @@
|
||||||
ref="address2Question"
|
ref="address2Question"
|
||||||
v-model="address2"
|
v-model="address2"
|
||||||
inputId="address2"
|
inputId="address2"
|
||||||
|
class="form-group"
|
||||||
:cmsWidgetName="widget.apartmentQuestion" />
|
:cmsWidgetName="widget.apartmentQuestion" />
|
||||||
<textboxQuestion
|
<textboxQuestion
|
||||||
ref="cityQuestion"
|
ref="cityQuestion"
|
||||||
v-model="city"
|
v-model="city"
|
||||||
inputId="city"
|
inputId="city"
|
||||||
|
class="form-group"
|
||||||
:cmsWidgetName="widget.cityQuestion"
|
:cmsWidgetName="widget.cityQuestion"
|
||||||
isRequired
|
isRequired
|
||||||
:validationRules="'city-required'" />
|
:validationRules="'city-required'" />
|
||||||
|
|
@ -52,6 +57,7 @@
|
||||||
ref="stateQuestion"
|
ref="stateQuestion"
|
||||||
v-model="state"
|
v-model="state"
|
||||||
inputId="state"
|
inputId="state"
|
||||||
|
class="form-group"
|
||||||
:cmsWidgetName="widget.stateQuestion"
|
:cmsWidgetName="widget.stateQuestion"
|
||||||
:options="states"
|
:options="states"
|
||||||
isDisabled />
|
isDisabled />
|
||||||
|
|
@ -59,6 +65,7 @@
|
||||||
ref="zipCodeQuestion"
|
ref="zipCodeQuestion"
|
||||||
v-model="zipCode"
|
v-model="zipCode"
|
||||||
inputId="zipCode"
|
inputId="zipCode"
|
||||||
|
class="form-group"
|
||||||
:cmsWidgetName="widget.zipCodeQuestion"
|
:cmsWidgetName="widget.zipCodeQuestion"
|
||||||
isDisabled />
|
isDisabled />
|
||||||
<alert
|
<alert
|
||||||
|
|
@ -72,19 +79,21 @@
|
||||||
ref="vehicleProtectedQuestion"
|
ref="vehicleProtectedQuestion"
|
||||||
v-model="isVehicleProtected"
|
v-model="isVehicleProtected"
|
||||||
inputId="vehicleProtected"
|
inputId="vehicleProtected"
|
||||||
|
class="form-group"
|
||||||
isRequired
|
isRequired
|
||||||
groupName="vehicleProtectedQuestion"
|
groupName="vehicleProtectedQuestion"
|
||||||
:questionText="vehicleProtectedQuestionText"
|
:questionText="vehicleProtectedQuestionText"
|
||||||
:answers="vehicleProtectedQuestionAnswers"
|
:answers="vehicleProtectedQuestionAnswers"
|
||||||
:validationRules="'option-required'"
|
|
||||||
:buttonTypeString="'listButtonHorizontal'" />
|
:buttonTypeString="'listButtonHorizontal'" />
|
||||||
<textBlock
|
<textBlock
|
||||||
ref="clearanceText"
|
ref="clearanceText"
|
||||||
|
class="clearance-text"
|
||||||
:cmsWidgetName="widget.clearanceText" />
|
:cmsWidgetName="widget.clearanceText" />
|
||||||
<textareaQuestion
|
<textareaQuestion
|
||||||
ref="notesQuestion"
|
ref="notesQuestion"
|
||||||
v-model="notesForTechnician"
|
v-model="notesForTechnician"
|
||||||
inputId="technicianNotes"
|
inputId="technicianNotes"
|
||||||
|
class="form-group"
|
||||||
:isDisabled="false"
|
:isDisabled="false"
|
||||||
:isRequired="false"
|
:isRequired="false"
|
||||||
:cmsWidgetName="widget.notesQuestion"
|
:cmsWidgetName="widget.notesQuestion"
|
||||||
|
|
@ -112,6 +121,7 @@ import textareaQuestion from '@/digital-components/textarea-question/textarea-qu
|
||||||
import alert from '@/ux-components/alert/alert.vue';
|
import alert from '@/ux-components/alert/alert.vue';
|
||||||
import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue';
|
import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue';
|
||||||
import textBlock from '@/digital-components/text-block/text-block.vue';
|
import textBlock from '@/digital-components/text-block/text-block.vue';
|
||||||
|
import buttonQuestion from '@/digital-components/button-question/button-question.vue';
|
||||||
|
|
||||||
// Supporting files
|
// Supporting files
|
||||||
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper.js';
|
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper.js';
|
||||||
|
|
@ -121,7 +131,6 @@ import { useMainStore } from '@/store/index.js';
|
||||||
import MaskaFormattedMasks from '@/constants/maska-masks';
|
import MaskaFormattedMasks from '@/constants/maska-masks';
|
||||||
import errorMessages from '@/constants/error-messages';
|
import errorMessages from '@/constants/error-messages';
|
||||||
import { required } from '@/helpers/validation-rules';
|
import { required } from '@/helpers/validation-rules';
|
||||||
import buttonQuestion from '@/digital-components/button-question/button-question.vue';
|
|
||||||
import widgetFields from '@/constants/cms-widget-fields';
|
import widgetFields from '@/constants/cms-widget-fields';
|
||||||
import states from '@/constants/states';
|
import states from '@/constants/states';
|
||||||
|
|
||||||
|
|
@ -239,7 +248,7 @@ export default {
|
||||||
address: this.address,
|
address: this.address,
|
||||||
address2: this.address2,
|
address2: this.address2,
|
||||||
city: this.city,
|
city: this.city,
|
||||||
isVehicleProtected: this.isVehicleProtected
|
isVehicleProtected: this.isVehicleProtected || 'false'
|
||||||
});
|
});
|
||||||
|
|
||||||
if (this.requestTextUpdates) {
|
if (this.requestTextUpdates) {
|
||||||
|
|
@ -302,4 +311,26 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.subheader {
|
||||||
|
margin: 1.25rem 0;
|
||||||
|
}
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
}
|
||||||
|
.same-address-checkbox {
|
||||||
|
:deep(.form-check-input) {
|
||||||
|
&:checked + label p,
|
||||||
|
& + label p {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: $font-weight-normal;
|
||||||
|
color: $darker-gray;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.clearance-text {
|
||||||
|
font-size: .875rem;
|
||||||
|
line-height: 1.25rem;
|
||||||
|
margin-top: 0rem;
|
||||||
|
margin-bottom: .3125rem;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -414,7 +414,6 @@ export default {
|
||||||
));
|
));
|
||||||
this.navigateWithScenario(navigationScenarios.PRICING_LOOKUP_ERROR);
|
this.navigateWithScenario(navigationScenarios.PRICING_LOOKUP_ERROR);
|
||||||
});
|
});
|
||||||
console.log('ITAC Pricing Results:', pricingResults);
|
|
||||||
this.setBaseServiceLineItems(pricingResults);
|
this.setBaseServiceLineItems(pricingResults);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -176,7 +176,6 @@ export default {
|
||||||
&& vehicle.model
|
&& vehicle.model
|
||||||
&& vehicle.style
|
&& vehicle.style
|
||||||
);
|
);
|
||||||
console.log('vehicleReqs:', vehicleReqs);
|
|
||||||
|
|
||||||
// Damage
|
// Damage
|
||||||
const { isRepair, numberOfChips, glassToReplace } =
|
const { isRepair, numberOfChips, glassToReplace } =
|
||||||
|
|
@ -185,7 +184,6 @@ export default {
|
||||||
(isRepair && numberOfChips)
|
(isRepair && numberOfChips)
|
||||||
|| (!isRepair && glassToReplace?.length)
|
|| (!isRepair && glassToReplace?.length)
|
||||||
);
|
);
|
||||||
console.log('damageReqs:', damageReqs);
|
|
||||||
|
|
||||||
// Service Package
|
// Service Package
|
||||||
const { lineItems } = useMainStore().order;
|
const { lineItems } = useMainStore().order;
|
||||||
|
|
@ -193,18 +191,15 @@ export default {
|
||||||
(isRepair || lineItems.glassParts)
|
(isRepair || lineItems.glassParts)
|
||||||
&& lineItems.supportingItems
|
&& lineItems.supportingItems
|
||||||
);
|
);
|
||||||
console.log('packageReqs:', packageReqs);
|
|
||||||
|
|
||||||
// Service Location
|
// Service Location
|
||||||
const { serviceLocation } = useMainStore().order;
|
const { serviceLocation } = useMainStore().order;
|
||||||
console.log('serviceLocation:', serviceLocation);
|
|
||||||
const mobileReqs = !!(
|
const mobileReqs = !!(
|
||||||
serviceLocation.address
|
serviceLocation.address
|
||||||
&& serviceLocation.city
|
&& serviceLocation.city
|
||||||
&& serviceLocation.state
|
&& serviceLocation.state
|
||||||
&& serviceLocation.zipCode
|
&& serviceLocation.zipCode
|
||||||
);
|
);
|
||||||
console.log('mobileReqs:', mobileReqs);
|
|
||||||
|
|
||||||
const providerLocation = serviceLocation.provider.address;
|
const providerLocation = serviceLocation.provider.address;
|
||||||
const dropOffInshopReqs = !!(
|
const dropOffInshopReqs = !!(
|
||||||
|
|
@ -213,13 +208,11 @@ export default {
|
||||||
&& providerLocation.state
|
&& providerLocation.state
|
||||||
&& providerLocation.zipCode
|
&& providerLocation.zipCode
|
||||||
);
|
);
|
||||||
console.log('dropOffInshopReqs:', dropOffInshopReqs);
|
|
||||||
|
|
||||||
const isMobile = serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE
|
const isMobile = serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE
|
||||||
|| serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP;
|
|| serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP;
|
||||||
const serviceLocationReqs =
|
const serviceLocationReqs =
|
||||||
(isMobile && mobileReqs) || (!isMobile && dropOffInshopReqs);
|
(isMobile && mobileReqs) || (!isMobile && dropOffInshopReqs);
|
||||||
console.log('serviceLocationReqs:', serviceLocationReqs);
|
|
||||||
|
|
||||||
// Schedule
|
// Schedule
|
||||||
const { date, startTime, endTime, jobMaxMinutes, jobMinMinutes } =
|
const { date, startTime, endTime, jobMaxMinutes, jobMinMinutes } =
|
||||||
|
|
@ -231,23 +224,19 @@ export default {
|
||||||
&& jobMaxMinutes
|
&& jobMaxMinutes
|
||||||
&& jobMinMinutes
|
&& jobMinMinutes
|
||||||
);
|
);
|
||||||
console.log('scheduleReqs:', scheduleReqs);
|
|
||||||
|
|
||||||
// Customer
|
// Customer
|
||||||
const { firstName, lastName, emailAddress } = useMainStore().order.customer;
|
const { firstName, lastName, emailAddress } = useMainStore().order.customer;
|
||||||
const customerReqs = !!(firstName && lastName && emailAddress);
|
const customerReqs = !!(firstName && lastName && emailAddress);
|
||||||
console.log('customerReqs:', customerReqs);
|
|
||||||
|
|
||||||
// Contact Info
|
// Contact Info
|
||||||
const { contactInfo } = useMainStore();
|
const { contactInfo } = useMainStore();
|
||||||
console.log('contactInfo:', contactInfo);
|
|
||||||
const contactInfoReqs = !!(
|
const contactInfoReqs = !!(
|
||||||
contactInfo.firstName
|
contactInfo.firstName
|
||||||
&& contactInfo.lastName
|
&& contactInfo.lastName
|
||||||
&& contactInfo.servicePhone
|
&& contactInfo.servicePhone
|
||||||
&& contactInfo.emailAddress
|
&& contactInfo.emailAddress
|
||||||
);
|
);
|
||||||
console.log('contactInfoReqs:', contactInfoReqs);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
vehicleReqs
|
vehicleReqs
|
||||||
|
|
|
||||||
|
|
@ -112,12 +112,6 @@ export default {
|
||||||
|
|
||||||
const { feeItems } = store.order.lineItems;
|
const { feeItems } = store.order.lineItems;
|
||||||
|
|
||||||
console.log('Service Packages - Fetched Line Items:', {
|
|
||||||
rainDefense: resultMap?.rainDefense,
|
|
||||||
wipers: resultMap?.wipers,
|
|
||||||
feeItems
|
|
||||||
});
|
|
||||||
|
|
||||||
const availableLineItems = [];
|
const availableLineItems = [];
|
||||||
|
|
||||||
if (resultMap?.rainDefense) {
|
if (resultMap?.rainDefense) {
|
||||||
|
|
|
||||||
|
|
@ -1825,18 +1825,20 @@ export const useMainStore = defineStore({
|
||||||
this.order.serviceLocation.appointmentType = serviceLocationInfo.appointmentType ?? this.order.serviceLocation.appointmentType;
|
this.order.serviceLocation.appointmentType = serviceLocationInfo.appointmentType ?? this.order.serviceLocation.appointmentType;
|
||||||
this.order.serviceLocation.isVehicleProtected = serviceLocationInfo.isVehicleProtected ?? this.order.serviceLocation.isVehicleProtected;
|
this.order.serviceLocation.isVehicleProtected = serviceLocationInfo.isVehicleProtected ?? this.order.serviceLocation.isVehicleProtected;
|
||||||
|
|
||||||
this.order.serviceLocation.provider = {
|
if (serviceLocationInfo.provider) {
|
||||||
providerNumber: serviceLocationInfo.provider?.providerNumber,
|
this.order.serviceLocation.provider = {
|
||||||
address: {
|
providerNumber: serviceLocationInfo.provider?.providerNumber,
|
||||||
streetAddress: serviceLocationInfo.provider?.address?.streetAddress,
|
address: {
|
||||||
city: serviceLocationInfo.provider?.address?.city,
|
streetAddress: serviceLocationInfo.provider?.address?.streetAddress,
|
||||||
state: serviceLocationInfo.provider?.address?.state,
|
city: serviceLocationInfo.provider?.address?.city,
|
||||||
zipCode: serviceLocationInfo.provider?.address?.zipCode,
|
state: serviceLocationInfo.provider?.address?.state,
|
||||||
zipCodeCtu: serviceLocationInfo.provider?.address?.zipCodeCtu
|
zipCode: serviceLocationInfo.provider?.address?.zipCode,
|
||||||
},
|
zipCodeCtu: serviceLocationInfo.provider?.address?.zipCodeCtu
|
||||||
companyName: serviceLocationInfo.provider?.companyName,
|
},
|
||||||
phoneNumber: serviceLocationInfo.provider?.phoneNumber
|
companyName: serviceLocationInfo.provider?.companyName,
|
||||||
};
|
phoneNumber: serviceLocationInfo.provider?.phoneNumber
|
||||||
|
};
|
||||||
|
}
|
||||||
this.order.serviceLocation.searchFilter = serviceLocationInfo.searchFilter;
|
this.order.serviceLocation.searchFilter = serviceLocationInfo.searchFilter;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -26,41 +26,43 @@
|
||||||
<span class="m-0 alert-header-text">
|
<span class="m-0 alert-header-text">
|
||||||
{{ alertHeadline }}
|
{{ alertHeadline }}
|
||||||
</span>
|
</span>
|
||||||
<button
|
<div class="alert-icon-container">
|
||||||
v-if="isCollapsible"
|
<button
|
||||||
class="btn-collapse"
|
v-if="isCollapsible"
|
||||||
type="button"
|
class="btn-collapse"
|
||||||
@click="toggleCollapse">
|
type="button"
|
||||||
<svg
|
@click="toggleCollapse">
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
<svg
|
||||||
width="15"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
height="9"
|
width="15"
|
||||||
viewBox="0 0 15 9"
|
height="9"
|
||||||
class="btn-collapse-icon"
|
viewBox="0 0 15 9"
|
||||||
:class="{ 'rotated': !collapsed }">
|
class="btn-collapse-icon"
|
||||||
<path
|
:class="{ 'rotated': !collapsed }">
|
||||||
fill-rule="nonzero"
|
<path
|
||||||
d="M7.5 0a.806.806 0 0 0-.593.265L.246 7.455a.957.957 0 0 0 0 1.28.796.796 0 0 0
|
fill-rule="nonzero"
|
||||||
1.185 0l6.07-6.55 6.068 6.55a.796.796 0 0 0 1.186 0 .957.957 0 0 0 0-1.28L8.093.265A.806.806
|
d="M7.5 0a.806.806 0 0 0-.593.265L.246 7.455a.957.957 0 0 0 0 1.28.796.796 0 0 0
|
||||||
0 0 0 7.5 0" />
|
1.185 0l6.07-6.55 6.068 6.55a.796.796 0 0 0 1.186 0 .957.957 0 0 0 0-1.28L8.093.265A.806.806
|
||||||
</svg>
|
0 0 0 7.5 0" />
|
||||||
</button>
|
</svg>
|
||||||
<button
|
</button>
|
||||||
v-if="isDismissible"
|
<button
|
||||||
type="button"
|
v-if="isDismissible"
|
||||||
class="btn-close p-2"
|
type="button"
|
||||||
data-bs-dismiss="alert"
|
class="btn-close p-2"
|
||||||
aria-label="Close">
|
data-bs-dismiss="alert"
|
||||||
<svg
|
aria-label="Close">
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
<svg
|
||||||
viewBox="0 0 23.7 23.7"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
xml:space="preserve">
|
viewBox="0 0 23.7 23.7"
|
||||||
<path
|
xml:space="preserve">
|
||||||
d="m23.24 2.7-9.15 9.15L23.24 21a1.581 1.581 0 0 1-1.12 2.7c-.42 0-.82-.16-1.12-.46l-9.15-9.15-9.15 9.15c-.3.3-.7.46-1.12.46A1.581
|
<path
|
||||||
1.581 0 0 1 .46 21l8.47-8.47.68-.68L.46 2.7c-.62-.62-.62-1.62 0-2.24.62-.62 1.62-.62 2.24 0l8.47 8.47.68.68L21
|
d="m23.24 2.7-9.15 9.15L23.24 21a1.581 1.581 0 0 1-1.12 2.7c-.42 0-.82-.16-1.12-.46l-9.15-9.15-9.15 9.15c-.3.3-.7.46-1.12.46A1.581
|
||||||
.46a1.57 1.57 0 0 1 2.23 0c.63.62.63 1.62.01 2.24z" />
|
1.581 0 0 1 .46 21l8.47-8.47.68-.68L.46 2.7c-.62-.62-.62-1.62 0-2.24.62-.62 1.62-.62 2.24 0l8.47 8.47.68.68L21
|
||||||
</svg>
|
.46a1.57 1.57 0 0 1 2.23 0c.63.62.63 1.62.01 2.24z" />
|
||||||
</button>
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-show="alertCopy"
|
v-show="alertCopy"
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue