CASH-2751 - separate component for scheduling zip search
This commit is contained in:
Minojhini Valaiyapathi
parent
e7b0629294
commit
451b9a2747
4 changed files with 315 additions and 171 deletions
|
|
@ -0,0 +1,110 @@
|
|||
import { shallowMount } from "@vue/test-utils";
|
||||
import schedulingZipSearch from "./scheduling-zip-search";
|
||||
import store from "@/store";
|
||||
import {
|
||||
getBillToAccountNumber,
|
||||
getZipCodeData,
|
||||
} from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
|
||||
|
||||
jest.mock("@/store", () => ({
|
||||
dispatch: jest.fn().mockResolvedValue(null),
|
||||
}));
|
||||
|
||||
jest.mock(
|
||||
"@/layouts/service-location/helpers/service-location-helper/service-location-helper",
|
||||
() => ({
|
||||
getZipCodeData: jest.fn().mockResolvedValue({
|
||||
state: "OH",
|
||||
zipCodeCtu: "03357",
|
||||
}),
|
||||
getBillToAccountNumber: jest.fn().mockResolvedValue("87291"),
|
||||
})
|
||||
);
|
||||
|
||||
function mountComponent(props = {}) {
|
||||
return shallowMount(schedulingZipSearch, {
|
||||
props: {
|
||||
modelValue: "43235",
|
||||
pageNameToLog: "scheduling",
|
||||
...props,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
describe("scheduling-zip-search.vue", () => {
|
||||
test("renders serviceZipQuestion with search icon", () => {
|
||||
const wrapper = mountComponent();
|
||||
const zipQuestion = wrapper.find("service-zip-question-stub");
|
||||
expect(zipQuestion.exists()).toBe(true);
|
||||
expect(zipQuestion.attributes("includesearchicon")).toBeDefined();
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
test("validates zip on search when field is blank", async () => {
|
||||
const validate = jest.fn().mockResolvedValue({ valid: false });
|
||||
const wrapper = mountComponent({ modelValue: "" });
|
||||
Object.defineProperty(wrapper.vm.$refs, "zipCodeSearch", {
|
||||
configurable: true,
|
||||
value: {
|
||||
$refs: {
|
||||
zipInputTextQuestion: { validate },
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
await wrapper.vm.onZipSearch({ preventDefault: jest.fn() });
|
||||
|
||||
expect(validate).toHaveBeenCalled();
|
||||
expect(getZipCodeData).not.toHaveBeenCalled();
|
||||
expect(wrapper.emitted("zip-searched")).toBeUndefined();
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
test("does not search when disabled", async () => {
|
||||
const validate = jest.fn().mockResolvedValue({ valid: true });
|
||||
const wrapper = mountComponent({ disabled: true });
|
||||
Object.defineProperty(wrapper.vm.$refs, "zipCodeSearch", {
|
||||
configurable: true,
|
||||
value: {
|
||||
$refs: {
|
||||
zipInputTextQuestion: { validate },
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
await wrapper.vm.onZipSearch({ preventDefault: jest.fn() });
|
||||
|
||||
expect(validate).toHaveBeenCalled();
|
||||
expect(getZipCodeData).not.toHaveBeenCalled();
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
test("saves zip info and emits billToAccountNumber when a valid zip is searched", async () => {
|
||||
store.dispatch.mockClear();
|
||||
const wrapper = mountComponent({ modelValue: "44101" });
|
||||
Object.defineProperty(wrapper.vm.$refs, "zipCodeSearch", {
|
||||
configurable: true,
|
||||
value: {
|
||||
$refs: {
|
||||
zipInputTextQuestion: {
|
||||
validate: jest.fn().mockResolvedValue({ valid: true }),
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
await wrapper.vm.onZipSearch({ preventDefault: jest.fn() });
|
||||
|
||||
expect(getZipCodeData).toHaveBeenCalledWith("44101", "scheduling");
|
||||
expect(getBillToAccountNumber).toHaveBeenCalledWith("03357", "scheduling");
|
||||
expect(store.dispatch).toHaveBeenCalledWith("saveServiceZipCodeInfo", {
|
||||
zipCode: "44101",
|
||||
state: "OH",
|
||||
zipCodeCtu: "03357",
|
||||
});
|
||||
expect(wrapper.emitted("zip-searched")).toEqual([
|
||||
[{ zipCode: "44101", billToAccountNumber: "87291" }],
|
||||
]);
|
||||
wrapper.unmount();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,181 @@
|
|||
<template>
|
||||
<form class="scheduling-zip-search mt-4" @submit.prevent="onZipSearch">
|
||||
<serviceZipQuestion
|
||||
ref="zipCodeSearch"
|
||||
v-model="localZipCode"
|
||||
cmsWidgetName="ServiceZipQuestionWidget"
|
||||
includeSearchIcon
|
||||
isRequired
|
||||
@search-icon-click="onZipSearch"
|
||||
@keydown.enter="onZipSearch" />
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import serviceZipQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-question/service-zip-question";
|
||||
import store from "@/store";
|
||||
import { storeActions } from "@/constants/store-actions";
|
||||
import {
|
||||
getBillToAccountNumber,
|
||||
getZipCodeData,
|
||||
} from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
|
||||
|
||||
export default {
|
||||
name: "schedulingZipSearch",
|
||||
emits: ["update:modelValue", "zip-searched"],
|
||||
props: {
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
pageNameToLog: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
localZipCode: {
|
||||
get() {
|
||||
return this.modelValue;
|
||||
},
|
||||
set(value) {
|
||||
this.$emit("update:modelValue", value);
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async onZipSearch(event) {
|
||||
event?.preventDefault?.();
|
||||
|
||||
const zipInput = this.$refs.zipCodeSearch?.$refs?.zipInputTextQuestion;
|
||||
if (!zipInput) {
|
||||
return;
|
||||
}
|
||||
|
||||
const validationResult = await zipInput.validate();
|
||||
if (!validationResult.valid || this.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
const zipCodeData = await getZipCodeData(this.localZipCode, this.pageNameToLog);
|
||||
await store.dispatch(storeActions.SAVE_SERVICE_ZIP_CODE_INFO, {
|
||||
zipCode: this.localZipCode,
|
||||
state: zipCodeData.state,
|
||||
zipCodeCtu: zipCodeData.zipCodeCtu,
|
||||
});
|
||||
const billToAccountNumber = await getBillToAccountNumber(
|
||||
zipCodeData.zipCodeCtu,
|
||||
this.pageNameToLog
|
||||
);
|
||||
console.log("inside zip search ", this.localZipCode, billToAccountNumber);
|
||||
this.$emit("zip-searched", {
|
||||
zipCode: this.localZipCode,
|
||||
billToAccountNumber,
|
||||
});
|
||||
},
|
||||
},
|
||||
components: {
|
||||
serviceZipQuestion,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.scheduling-zip-search {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
border-radius: 48px;
|
||||
padding-left: 16px;
|
||||
border: 1px solid $gray-500;
|
||||
background: $white;
|
||||
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
|
||||
|
||||
&:has(:deep(.textbox-question.has-error)) {
|
||||
border-color: $red;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
height: auto;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
:deep(.textbox-question) {
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
:deep(.input-wrapper.has-search-icon) {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
flex: 1 1 0;
|
||||
height: 100%;
|
||||
margin-bottom: 0;
|
||||
|
||||
input,
|
||||
.form-control {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
min-height: 48px;
|
||||
max-height: 48px;
|
||||
border: none;
|
||||
padding: 0 1.5rem;
|
||||
outline: none;
|
||||
font-size: 1rem;
|
||||
background: transparent;
|
||||
box-sizing: border-box;
|
||||
border-radius: 2.5rem 0 0 2.5rem;
|
||||
box-shadow: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.search-icon-button) {
|
||||
position: static;
|
||||
transform: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
background-color: $blue-150 !important;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.7817 14.7328L11.8252 10.7762C12.8833 9.45005 13.3936 7.76911 13.2513 6.07849C13.1091 4.38788 12.325 2.81587 11.0601 1.6852C9.79515 0.554524 8.14538 -0.0490261 6.44946 -0.00154744C4.75353 0.0459312 3.14012 0.740836 1.94045 1.94051C0.740775 3.14018 0.0458701 4.75359 -0.00160848 6.44952C-0.0490871 8.14545 0.554463 9.79521 1.68514 11.0601C2.81581 12.325 4.38782 13.1091 6.07843 13.2514C7.76905 13.3937 9.44999 12.8834 10.7762 11.8252L14.7349 15.7839C14.8044 15.8527 14.8869 15.907 14.9774 15.9439C15.068 15.9808 15.165 15.9995 15.2628 15.9989C15.3606 15.9983 15.4573 15.9784 15.5475 15.9405C15.6376 15.9025 15.7194 15.8471 15.7881 15.7776C15.8568 15.708 15.9112 15.6256 15.9481 15.535C15.985 15.4444 16.0036 15.3474 16.0031 15.2496C16.0025 15.1518 15.9826 15.0551 15.9446 14.965C15.9067 14.8748 15.8513 14.7931 15.7817 14.7243V14.7328ZM6.63737 11.7913C5.61803 11.7913 4.62157 11.4891 3.77402 10.9228C2.92646 10.3564 2.26587 9.5515 1.87578 8.60975C1.4857 7.668 1.38363 6.63172 1.5825 5.63196C1.78136 4.6322 2.27222 3.71386 2.99301 2.99307C3.7138 2.27229 4.63214 1.78142 5.6319 1.58256C6.63166 1.38369 7.66793 1.48576 8.60969 1.87585C9.55144 2.26593 10.3564 2.92652 10.9227 3.77408C11.489 4.62163 11.7913 5.61809 11.7913 6.63743C11.7896 8.00382 11.2461 9.31376 10.2799 10.2799C9.3137 11.2461 8.00376 11.7897 6.63737 11.7913Z' fill='%230070d1'/%3E%3C/svg%3E%0A");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
width: 2.5rem;
|
||||
height: 48px;
|
||||
min-height: 48px;
|
||||
max-height: 48px;
|
||||
border: none;
|
||||
border-radius: 0 2.5rem 2.5rem 0;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border: 1px solid $gray-500;
|
||||
box-shadow: 0 0 0 4px $blue-300;
|
||||
background-color: $blue-150 !important;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.form-test-error) {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -9,7 +9,11 @@ jest.mock("@/store", () => ({
|
|||
getters: {
|
||||
order: {
|
||||
serviceLocation: { zipCode: "43235", appointmentType: null },
|
||||
payment: { isInsurance: false, insuranceCoverage: { isVerified: false } },
|
||||
payment: {
|
||||
isInsurance: false,
|
||||
insuranceCoverage: { isVerified: false },
|
||||
billToAccountNumber: "12345",
|
||||
},
|
||||
referralNumber: "",
|
||||
damage: { isRepair: false },
|
||||
lineItems: { glassParts: [] },
|
||||
|
|
@ -181,43 +185,20 @@ describe("scheduling.vue", () => {
|
|||
});
|
||||
|
||||
describe("service zip", () => {
|
||||
test("prefills zipSearchCode from store on mount", () => {
|
||||
test("prefills zipSearchCode and billToAccountNumber from store on mount", () => {
|
||||
const { wrapper } = setupMocks();
|
||||
expect(wrapper.vm.zipSearchCode).toBe("43235");
|
||||
expect(wrapper.vm.billToAccountNumber).toBe("12345");
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
test("renders serviceZipQuestion with search icon", () => {
|
||||
test("renders schedulingZipSearch", () => {
|
||||
const { wrapper } = setupMocks();
|
||||
const zipQuestion = wrapper.find("service-zip-question-stub");
|
||||
expect(zipQuestion.exists()).toBe(true);
|
||||
expect(zipQuestion.attributes("includesearchicon")).toBeDefined();
|
||||
expect(wrapper.find("scheduling-zip-search-stub").exists()).toBe(true);
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
test("validates zip on search when field is blank", async () => {
|
||||
const validate = jest.fn().mockResolvedValue({ valid: false });
|
||||
const loadSchedulingData = jest.spyOn(scheduling.methods, "loadSchedulingData");
|
||||
const { wrapper } = setupMocks();
|
||||
Object.defineProperty(wrapper.vm.$refs, "zipCodeSearch", {
|
||||
configurable: true,
|
||||
value: {
|
||||
$refs: {
|
||||
zipInputTextQuestion: { validate },
|
||||
},
|
||||
},
|
||||
});
|
||||
wrapper.vm.zipSearchCode = "";
|
||||
|
||||
await wrapper.vm.onZipSearch({ preventDefault: jest.fn() });
|
||||
|
||||
expect(validate).toHaveBeenCalled();
|
||||
expect(loadSchedulingData).not.toHaveBeenCalled();
|
||||
loadSchedulingData.mockRestore();
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
test("reloads providers and timeslots when a valid zip is searched", async () => {
|
||||
test("reloads providers and timeslots when zip-searched is emitted", async () => {
|
||||
store.dispatch.mockClear();
|
||||
store.dispatch.mockImplementation((action) => {
|
||||
if (action === "getProviders") {
|
||||
|
|
@ -228,9 +209,6 @@ describe("scheduling.vue", () => {
|
|||
},
|
||||
});
|
||||
}
|
||||
if (action === "saveServiceZipCodeInfo") {
|
||||
return Promise.resolve();
|
||||
}
|
||||
return Promise.resolve(null);
|
||||
});
|
||||
settleAllPromises.mockResolvedValueOnce({
|
||||
|
|
@ -244,22 +222,11 @@ describe("scheduling.vue", () => {
|
|||
|
||||
const { wrapper } = setupMocks();
|
||||
await wrapper.setData({ isLoadingDates: false });
|
||||
Object.defineProperty(wrapper.vm.$refs, "zipCodeSearch", {
|
||||
configurable: true,
|
||||
value: {
|
||||
$refs: {
|
||||
zipInputTextQuestion: {
|
||||
validate: jest.fn().mockResolvedValue({ valid: true }),
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
wrapper.vm.zipSearchCode = "44101";
|
||||
wrapper.vm.datePickerEndDate = "2026-08-15";
|
||||
wrapper.vm.selectedScheduling = { appointmentType: "Mobile" };
|
||||
const initialDatePickerKey = wrapper.vm.datePickerKey;
|
||||
|
||||
await wrapper.vm.onZipSearch({ preventDefault: jest.fn() });
|
||||
await wrapper.vm.onZipSearched({ zipCode: "44101", billToAccountNumber: "87291" });
|
||||
|
||||
const getProvidersDispatch = store.dispatch.mock.calls.find(
|
||||
([actionName]) => actionName === "getProviders"
|
||||
|
|
@ -271,10 +238,7 @@ describe("scheduling.vue", () => {
|
|||
pageNameToLog: undefined,
|
||||
},
|
||||
]);
|
||||
const saveZipDispatch = store.dispatch.mock.calls.find(
|
||||
([actionName]) => actionName === "saveServiceZipCodeInfo"
|
||||
);
|
||||
expect(saveZipDispatch).toEqual(["saveServiceZipCodeInfo", { zipCode: "44101" }]);
|
||||
expect(wrapper.vm.billToAccountNumber).toBe("87291");
|
||||
expect(settleAllPromises).toHaveBeenCalled();
|
||||
expect(wrapper.vm.datePickerKey).toBe(initialDatePickerKey + 1);
|
||||
expect(wrapper.vm.selectedDate).toBeNull();
|
||||
|
|
|
|||
|
|
@ -11,16 +11,11 @@
|
|||
</span>
|
||||
</h5>
|
||||
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" alignLeft />
|
||||
<form class="scheduling-zip-search mt-4" @submit.prevent="onZipSearch">
|
||||
<serviceZipQuestion
|
||||
ref="zipCodeSearch"
|
||||
v-model="zipSearchCode"
|
||||
cmsWidgetName="ServiceZipQuestionWidget"
|
||||
includeSearchIcon
|
||||
isRequired
|
||||
@search-icon-click="onZipSearch"
|
||||
@keydown.enter="onZipSearch" />
|
||||
</form>
|
||||
<schedulingZipSearch
|
||||
v-model="zipSearchCode"
|
||||
:disabled="isLoadingDates"
|
||||
:pageNameToLog="pageName"
|
||||
@zip-searched="onZipSearched" />
|
||||
<datePicker
|
||||
:key="datePickerKey"
|
||||
class="mt-5"
|
||||
|
|
@ -103,7 +98,7 @@ import mobileSchedulingCard from "@/layouts/scheduling/mobile-scheduling-card/mo
|
|||
import inshopSchedulingCard from "@/layouts/scheduling/inshop-scheduling-card/inshop-scheduling-card";
|
||||
import interceptOverlay from "@/ux-components/intercept-overlay/intercept-overlay";
|
||||
import waitlistQuestion from "@/layouts/scheduling/waitlist-question/waitlist-question";
|
||||
import serviceZipQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-question/service-zip-question";
|
||||
import schedulingZipSearch from "@/layouts/scheduling/scheduling-zip-search/scheduling-zip-search";
|
||||
import textLink from "@/ux-components/text-link/text-link";
|
||||
import store from "@/store";
|
||||
import { storeActions } from "@/constants/store-actions";
|
||||
|
|
@ -372,6 +367,7 @@ export default {
|
|||
isLoadingMoreShops: false,
|
||||
zipSearchCode: store.getters.order.serviceLocation.zipCode ?? "",
|
||||
datePickerKey: 0,
|
||||
billToAccountNumber: store.getters.order.payment?.billToAccountNumber ?? null,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -440,24 +436,11 @@ export default {
|
|||
onMobileZipCodeClicked() {
|
||||
// TODO: open service zip modal when zip edit is implemented for scheduling page
|
||||
},
|
||||
async onZipSearch(event) {
|
||||
event?.preventDefault?.();
|
||||
|
||||
const zipInput = this.$refs.zipCodeSearch?.$refs?.zipInputTextQuestion;
|
||||
if (!zipInput) {
|
||||
return;
|
||||
}
|
||||
|
||||
const validationResult = await zipInput.validate();
|
||||
if (!validationResult.valid || this.isLoadingDates) {
|
||||
return;
|
||||
}
|
||||
|
||||
async onZipSearched({ zipCode, billToAccountNumber }) {
|
||||
console.log("onZipSearched", zipCode, billToAccountNumber);
|
||||
this.billToAccountNumber = billToAccountNumber;
|
||||
this.isLoadingDates = true;
|
||||
try {
|
||||
await store.dispatch(storeActions.SAVE_SERVICE_ZIP_CODE_INFO, {
|
||||
zipCode: this.zipSearchCode,
|
||||
});
|
||||
this.selectedDate = null;
|
||||
this.selectedScheduling = null;
|
||||
this.isWaitlistRequested = false;
|
||||
|
|
@ -466,7 +449,7 @@ export default {
|
|||
this.datePickerKey += 1;
|
||||
this.datePickerStartDate = toDateString(0);
|
||||
this.datePickerEndDate = toDateString(SCHEDULE_FETCH_DAYS - 1);
|
||||
await this.loadSchedulingData(this.zipSearchCode);
|
||||
await this.loadSchedulingData(zipCode);
|
||||
} finally {
|
||||
this.isLoadingDates = false;
|
||||
}
|
||||
|
|
@ -596,7 +579,7 @@ export default {
|
|||
inshopSchedulingCard,
|
||||
interceptOverlay,
|
||||
waitlistQuestion,
|
||||
serviceZipQuestion,
|
||||
schedulingZipSearch,
|
||||
textLink,
|
||||
},
|
||||
};
|
||||
|
|
@ -640,98 +623,4 @@ h5 {
|
|||
:deep(.text-link) {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.scheduling-zip-search {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
border-radius: 48px;
|
||||
padding-left: 16px;
|
||||
border: 1px solid $gray-500;
|
||||
background: $white;
|
||||
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
|
||||
|
||||
&:has(:deep(.textbox-question.has-error)) {
|
||||
border-color: $red;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
height: auto;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
:deep(.textbox-question) {
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
:deep(.input-wrapper.has-search-icon) {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
flex: 1 1 0;
|
||||
height: 100%;
|
||||
margin-bottom: 0;
|
||||
|
||||
input,
|
||||
.form-control {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
min-height: 48px;
|
||||
max-height: 48px;
|
||||
border: none;
|
||||
padding: 0 1.5rem;
|
||||
outline: none;
|
||||
font-size: 1rem;
|
||||
background: transparent;
|
||||
box-sizing: border-box;
|
||||
border-radius: 2.5rem 0 0 2.5rem;
|
||||
box-shadow: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.search-icon-button) {
|
||||
position: static;
|
||||
transform: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
background-color: $blue-150 !important;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.7817 14.7328L11.8252 10.7762C12.8833 9.45005 13.3936 7.76911 13.2513 6.07849C13.1091 4.38788 12.325 2.81587 11.0601 1.6852C9.79515 0.554524 8.14538 -0.0490261 6.44946 -0.00154744C4.75353 0.0459312 3.14012 0.740836 1.94045 1.94051C0.740775 3.14018 0.0458701 4.75359 -0.00160848 6.44952C-0.0490871 8.14545 0.554463 9.79521 1.68514 11.0601C2.81581 12.325 4.38782 13.1091 6.07843 13.2514C7.76905 13.3937 9.44999 12.8834 10.7762 11.8252L14.7349 15.7839C14.8044 15.8527 14.8869 15.907 14.9774 15.9439C15.068 15.9808 15.165 15.9995 15.2628 15.9989C15.3606 15.9983 15.4573 15.9784 15.5475 15.9405C15.6376 15.9025 15.7194 15.8471 15.7881 15.7776C15.8568 15.708 15.9112 15.6256 15.9481 15.535C15.985 15.4444 16.0036 15.3474 16.0031 15.2496C16.0025 15.1518 15.9826 15.0551 15.9446 14.965C15.9067 14.8748 15.8513 14.7931 15.7817 14.7243V14.7328ZM6.63737 11.7913C5.61803 11.7913 4.62157 11.4891 3.77402 10.9228C2.92646 10.3564 2.26587 9.5515 1.87578 8.60975C1.4857 7.668 1.38363 6.63172 1.5825 5.63196C1.78136 4.6322 2.27222 3.71386 2.99301 2.99307C3.7138 2.27229 4.63214 1.78142 5.6319 1.58256C6.63166 1.38369 7.66793 1.48576 8.60969 1.87585C9.55144 2.26593 10.3564 2.92652 10.9227 3.77408C11.489 4.62163 11.7913 5.61809 11.7913 6.63743C11.7896 8.00382 11.2461 9.31376 10.2799 10.2799C9.3137 11.2461 8.00376 11.7897 6.63737 11.7913Z' fill='%230070d1'/%3E%3C/svg%3E%0A");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
width: 2.5rem;
|
||||
height: 48px;
|
||||
min-height: 48px;
|
||||
max-height: 48px;
|
||||
border: none;
|
||||
border-radius: 0 2.5rem 2.5rem 0;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border: 1px solid $gray-500;
|
||||
box-shadow: 0 0 0 4px $blue-300;
|
||||
background-color: $blue-150 !important;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.form-test-error) {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue