Merge remote-tracking branch 'origin/CASH-631' into CASH-768
This commit is contained in:
commit
e94246a871
50 changed files with 965 additions and 340 deletions
|
|
@ -14,8 +14,5 @@ RUN npm install
|
||||||
# Install Playwright browsers
|
# Install Playwright browsers
|
||||||
RUN npx playwright install chromium --with-deps
|
RUN npx playwright install chromium --with-deps
|
||||||
|
|
||||||
# Install jq
|
|
||||||
RUN apt-get install -y jq
|
|
||||||
|
|
||||||
# Copy the rest of the application code
|
# Copy the rest of the application code
|
||||||
COPY . .
|
COPY . .
|
||||||
|
|
|
||||||
|
|
@ -44,6 +44,28 @@ stages:
|
||||||
shardNumber: 4
|
shardNumber: 4
|
||||||
|
|
||||||
steps:
|
steps:
|
||||||
|
- script: |
|
||||||
|
echo "Starting Docker cleanup to free space..."
|
||||||
|
|
||||||
|
# Remove all stopped containers
|
||||||
|
echo "Removing stopped containers..."
|
||||||
|
docker container prune -f
|
||||||
|
|
||||||
|
# Remove dangling images (untagged)
|
||||||
|
echo "Removing dangling images..."
|
||||||
|
docker image prune -f
|
||||||
|
|
||||||
|
# Remove unused volumes
|
||||||
|
echo "Removing unused volumes..."
|
||||||
|
docker volume prune -f
|
||||||
|
|
||||||
|
# Show disk usage after cleanup
|
||||||
|
echo "Docker system usage after cleanup:"
|
||||||
|
docker system df
|
||||||
|
|
||||||
|
echo "Docker cleanup completed!"
|
||||||
|
displayName: "Docker Cleanup"
|
||||||
|
|
||||||
- task: Docker@2
|
- task: Docker@2
|
||||||
displayName: "Build Docker Image"
|
displayName: "Build Docker Image"
|
||||||
inputs:
|
inputs:
|
||||||
|
|
|
||||||
|
|
@ -97,7 +97,6 @@ export function getDefaultTestData(): Partial<ITestData> {
|
||||||
isPolicyDriver: false,
|
isPolicyDriver: false,
|
||||||
isPolicyFound: false,
|
isPolicyFound: false,
|
||||||
isUseVehicleOnPolicy: true,
|
isUseVehicleOnPolicy: true,
|
||||||
isRecalNotification: false,
|
|
||||||
hasOemEndorsement: false,
|
hasOemEndorsement: false,
|
||||||
skipEstimatePage: false,
|
skipEstimatePage: false,
|
||||||
isRecalVehicle: false,
|
isRecalVehicle: false,
|
||||||
|
|
|
||||||
|
|
@ -61,7 +61,7 @@ export interface IPaymentDetails {
|
||||||
export interface IClaimDetails {
|
export interface IClaimDetails {
|
||||||
client: string,
|
client: string,
|
||||||
policyNumber: string,
|
policyNumber: string,
|
||||||
policyDeductible: number,
|
policyDeductible: any,
|
||||||
policyZip?: string
|
policyZip?: string
|
||||||
damageDate: string,
|
damageDate: string,
|
||||||
damageCause: DamageCause
|
damageCause: DamageCause
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
export default interface IAlertFlags {
|
export default interface IAlertFlags {
|
||||||
isHeavyTruckVehicle?: boolean,
|
isHeavyTruckVehicleAlert?: boolean,
|
||||||
isRepairReplace?: boolean,
|
isRepairReplace?: boolean,
|
||||||
isSplitWindshield?: boolean,
|
isSplitWindshield?: boolean,
|
||||||
isRepairOnly?: boolean,
|
isRepairOnly?: boolean,
|
||||||
|
|
|
||||||
|
|
@ -25,12 +25,14 @@ export interface ITestData {
|
||||||
isPolicyFound: boolean,
|
isPolicyFound: boolean,
|
||||||
otherVehiclesOnPolicy: IVehicleDetails[], // IF defined, we validate that the vehicles are present.
|
otherVehiclesOnPolicy: IVehicleDetails[], // IF defined, we validate that the vehicles are present.
|
||||||
isUseVehicleOnPolicy: boolean, // Should we use the vehicle on the policy?
|
isUseVehicleOnPolicy: boolean, // Should we use the vehicle on the policy?
|
||||||
isRecalNotification: boolean, // Does Recalibration Information page show up?
|
|
||||||
endorsements: IEndorsementDetails[],
|
endorsements: IEndorsementDetails[],
|
||||||
hasOemEndorsement: boolean, // OEM Endorsement does not appear on endorsements page, so it has a separate flag.s
|
hasOemEndorsement: boolean, // OEM Endorsement does not appear on endorsements page, so it has a separate flag.s
|
||||||
skipEstimatePage: boolean,
|
skipEstimatePage: boolean,
|
||||||
|
isHeavyTruck: boolean,
|
||||||
isRecalVehicle: boolean,
|
isRecalVehicle: boolean,
|
||||||
canNotRecal: boolean,
|
canNotRecal: boolean,
|
||||||
dynamicRecal: boolean,
|
dynamicRecal: boolean,
|
||||||
promoCode: string
|
promoCode: string,
|
||||||
|
policyZip: string,
|
||||||
|
isPolicyUnverified: boolean
|
||||||
}
|
}
|
||||||
|
|
@ -23,7 +23,7 @@ const reportConfig: OrtoniReportConfig = {
|
||||||
logo: 'playwright-tests/business-logic/data/logo.png',
|
logo: 'playwright-tests/business-logic/data/logo.png',
|
||||||
title: "Test Report",
|
title: "Test Report",
|
||||||
showProject: false,
|
showProject: false,
|
||||||
projectName: "ISS-Nextgen-Playwright-Report",
|
projectName: "FMG-Nextgen-Playwright-Report",
|
||||||
testType: `E2E- Environment: ${process.env.NODE_ENV} `,
|
testType: `E2E- Environment: ${process.env.NODE_ENV} `,
|
||||||
preferredTheme: "light",
|
preferredTheme: "light",
|
||||||
base64Image: true,
|
base64Image: true,
|
||||||
|
|
|
||||||
|
|
@ -140,11 +140,18 @@ export class BasePage {
|
||||||
let loaderElements = await this.page.locator('button .loader, .buy-loader, timeout, .modal-loader').all();
|
let loaderElements = await this.page.locator('button .loader, .buy-loader, timeout, .modal-loader').all();
|
||||||
return !(await Promise.any(loaderElements.map(el => el.isVisible())).catch(() => false));
|
return !(await Promise.any(loaderElements.map(el => el.isVisible())).catch(() => false));
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Take a screenshot of the page before validating the progress bar
|
||||||
|
await this.page.screenshot({ path: `test-results\\ortoni-data\\progress-bar-${Date.now()}.png`, fullPage: true });
|
||||||
|
// Wait until the progress bar element is attached and visible
|
||||||
|
|
||||||
const actualProgressPercentage = await this.progressBar.evaluate(
|
const actualProgressPercentage = await this.progressBar.evaluate(
|
||||||
(element) => element.style.width || "Not Found"
|
async (element) => {
|
||||||
|
await new Promise(resolve => setTimeout(resolve, 200));
|
||||||
|
return element.style.width || "Not Found";
|
||||||
|
}
|
||||||
);
|
);
|
||||||
Soft.expect(actualProgressPercentage).toBe(progressPercentage);
|
Soft.expect(actualProgressPercentage).toBe(progressPercentage);
|
||||||
console.log(`Progress Bar Percentage: Actual - ${actualProgressPercentage} vs Expected - ${progressPercentage}`);
|
console.log(`Progress Bar Percentage: Actual - ${actualProgressPercentage} vs Expected - ${progressPercentage}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
@ -9,7 +9,7 @@ export class CoverageStatementPage extends InsuranceBasePage {
|
||||||
readonly scheduleOnlineButton: Locator;
|
readonly scheduleOnlineButton: Locator;
|
||||||
readonly cancelMyClaimButton: Locator;
|
readonly cancelMyClaimButton: Locator;
|
||||||
readonly deductibleAmount: Locator;
|
readonly deductibleAmount: Locator;
|
||||||
readonly verfiyingCoverageText: Locator;
|
readonly verifyingCoverageText: Locator;
|
||||||
readonly continueButton: Locator; // For ITAC/NoComp
|
readonly continueButton: Locator; // For ITAC/NoComp
|
||||||
url = process.env['BASE_URL']! + '/FixMyGlass/CoverageStatement.aspx';
|
url = process.env['BASE_URL']! + '/FixMyGlass/CoverageStatement.aspx';
|
||||||
|
|
||||||
|
|
@ -19,7 +19,7 @@ export class CoverageStatementPage extends InsuranceBasePage {
|
||||||
this.scheduleOnlineButton = this.page.getByText('Continue to schedule online');
|
this.scheduleOnlineButton = this.page.getByText('Continue to schedule online');
|
||||||
this.cancelMyClaimButton = this.page.getByText('Cancel my claim');
|
this.cancelMyClaimButton = this.page.getByText('Cancel my claim');
|
||||||
this.deductibleAmount = this.page.getByRole('heading', { name: '$' }).locator('span');
|
this.deductibleAmount = this.page.getByRole('heading', { name: '$' }).locator('span');
|
||||||
this.verfiyingCoverageText = this.page.getByRole('heading', { name: 'We’re verifying your coverage' });
|
this.verifyingCoverageText = this.page.getByRole('heading', { name: 'We\'re verifying your coverage' });
|
||||||
this.continueButton = page.getByRole('button', { name: 'Continue' });
|
this.continueButton = page.getByRole('button', { name: 'Continue' });
|
||||||
// this.validateURL(this.url);
|
// this.validateURL(this.url);
|
||||||
}
|
}
|
||||||
|
|
@ -46,16 +46,20 @@ export class CoverageStatementPage extends InsuranceBasePage {
|
||||||
"span.deductible-text-black[data-bind='text: deductibleFormatted']"
|
"span.deductible-text-black[data-bind='text: deductibleFormatted']"
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const unverifiedDeductibleElement = this.verifyingCoverageText;
|
||||||
|
|
||||||
// Check if the locator is visible before running the expectation
|
// Check if the locator is visible before running the expectation
|
||||||
if (await deductibleElement.isVisible()) {
|
if (await deductibleElement.isVisible()) {
|
||||||
// Check if the page contains the properly formatted deductible amount
|
// Check if the page contains the properly formatted deductible amount
|
||||||
await expect(deductibleElement).toContainText(`$${expectedDeductibleRegex}`);
|
await expect(deductibleElement).toContainText(`$${expectedDeductibleRegex}`);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
async validateUnverifiedText(){
|
if (await unverifiedDeductibleElement.isVisible()) {
|
||||||
await expect(this.verfiyingCoverageText).toBeEnabled();
|
// Click on continue button if unverified header is visible
|
||||||
|
await this.continueButton.click();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@step("CoverageStatementPage >> Next page: ")
|
@step("CoverageStatementPage >> Next page: ")
|
||||||
async handleCoverageStatementPage(testData: Partial<ITestData>) {
|
async handleCoverageStatementPage(testData: Partial<ITestData>) {
|
||||||
|
|
|
||||||
|
|
@ -33,7 +33,7 @@ export class OrderConfirmationPage extends BasePage {
|
||||||
this.apptDateText = this.page.locator('[class="scheduleText"]');
|
this.apptDateText = this.page.locator('[class="scheduleText"]');
|
||||||
this.amountDueText = this.page.getByLabel('expand cart');
|
this.amountDueText = this.page.getByLabel('expand cart');
|
||||||
this.viewCartButton = this.page.locator('#cart-dropdown-head');
|
this.viewCartButton = this.page.locator('#cart-dropdown-head');
|
||||||
this.deductibleText = this.page.locator('#deductible-value');
|
this.deductibleText = this.page.locator('.deductible');
|
||||||
this.subtotalText = this.page.locator('.sub-total');
|
this.subtotalText = this.page.locator('.sub-total');
|
||||||
this.finalAmountDue = this.page.locator('div.amount-due');
|
this.finalAmountDue = this.page.locator('div.amount-due');
|
||||||
this.cartServicePackageText = this.cartServicePackageText = this.page.locator('.cart-panel');
|
this.cartServicePackageText = this.cartServicePackageText = this.page.locator('.cart-panel');
|
||||||
|
|
@ -44,7 +44,7 @@ export class OrderConfirmationPage extends BasePage {
|
||||||
async validateOrderConfirmationPage(testData: Partial<ITestData>) {
|
async validateOrderConfirmationPage(testData: Partial<ITestData>) {
|
||||||
// Destructure data we use
|
// Destructure data we use
|
||||||
const { vehicleDetails, customerDetails, servicePackage, promoCode,
|
const { vehicleDetails, customerDetails, servicePackage, promoCode,
|
||||||
isPolicyFound, claimDetails, paymentDetails, isUseVehicleOnPolicy, paymentMethod } = testData;
|
isPolicyFound, claimDetails, paymentDetails, isUseVehicleOnPolicy, paymentMethod, isPolicyUnverified } = testData;
|
||||||
await this.serviceText.waitFor({ state: "visible" });
|
await this.serviceText.waitFor({ state: "visible" });
|
||||||
|
|
||||||
expect.soft((await this.getActualAppointmentSummary()).map(item => item.toLowerCase())).toEqual((await this.getExpectedAppointmentSummary(testData)).map(item => item.toLowerCase()));
|
expect.soft((await this.getActualAppointmentSummary()).map(item => item.toLowerCase())).toEqual((await this.getExpectedAppointmentSummary(testData)).map(item => item.toLowerCase()));
|
||||||
|
|
@ -69,7 +69,7 @@ export class OrderConfirmationPage extends BasePage {
|
||||||
expect.soft(servicePackageValue).toContain('New wiper blades');
|
expect.soft(servicePackageValue).toContain('New wiper blades');
|
||||||
}
|
}
|
||||||
if (servicePackage === ServicePackage.Premium) {
|
if (servicePackage === ServicePackage.Premium) {
|
||||||
expect.soft(servicePackageValue).toContain('Rain Defense™');
|
expect.soft(servicePackageValue).toContain('Rain Repel Treatment');
|
||||||
}
|
}
|
||||||
|
|
||||||
// Promo Code Validation
|
// Promo Code Validation
|
||||||
|
|
@ -87,6 +87,7 @@ export class OrderConfirmationPage extends BasePage {
|
||||||
const finalAmountDueAmt = Number.parseFloat(finalAmountDueValue!.split('$')[1].replaceAll(',', ''));
|
const finalAmountDueAmt = Number.parseFloat(finalAmountDueValue!.split('$')[1].replaceAll(',', ''));
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
expect.soft(subtotalAmt).toBeGreaterThan(0);
|
expect.soft(subtotalAmt).toBeGreaterThan(0);
|
||||||
// expect.soft(deductibleAmt).toEqual(0);
|
// expect.soft(deductibleAmt).toEqual(0);
|
||||||
|
|
||||||
|
|
@ -94,36 +95,17 @@ export class OrderConfirmationPage extends BasePage {
|
||||||
// Verify amount due > 0
|
// Verify amount due > 0
|
||||||
expect.soft(amountDueAmt).toBeGreaterThan(0);
|
expect.soft(amountDueAmt).toBeGreaterThan(0);
|
||||||
expect.soft(finalAmountDueAmt).toBeGreaterThan(0);
|
expect.soft(finalAmountDueAmt).toBeGreaterThan(0);
|
||||||
|
|
||||||
|
if (isPolicyUnverified && PaymentType.PayWithInsurance){
|
||||||
|
expect.soft(finalAmountDueAmt).toContain('Verifying coverage')
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
// Verify amount due 0
|
// Verify amount due 0
|
||||||
expect.soft(amountDueAmt).toEqual(0);
|
expect.soft(amountDueAmt).toEqual(0);
|
||||||
expect.soft(finalAmountDueAmt).toEqual(0);
|
expect.soft(finalAmountDueAmt).toEqual(0);
|
||||||
}
|
}
|
||||||
} else {
|
|
||||||
// Price validations for insurance users
|
|
||||||
if (servicePackage === ServicePackage.GlassOnly) {
|
|
||||||
expect.soft(servicePackageAmt).toEqual(0);
|
|
||||||
} else {
|
|
||||||
expect.soft(servicePackageAmt).toBeGreaterThan(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check for either "Verifying coverage" or "0.00" in price fields
|
|
||||||
expect.soft(
|
|
||||||
amountDueValue?.includes('Verifying coverage') ||
|
|
||||||
amountDueValue?.includes('0.00')
|
|
||||||
).toBeTruthy();
|
|
||||||
|
|
||||||
expect.soft(
|
|
||||||
subtotalTextValue?.includes('Verifying coverage') ||
|
|
||||||
subtotalTextValue?.includes('0.00')
|
|
||||||
).toBeTruthy();
|
|
||||||
|
|
||||||
expect.soft(
|
|
||||||
finalAmountDueValue?.includes('Verifying coverage') ||
|
|
||||||
finalAmountDueValue?.includes('0.00')
|
|
||||||
).toBeTruthy();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
async getFormattedAppointmentDate(appointmentDate: string) {
|
async getFormattedAppointmentDate(appointmentDate: string) {
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -148,7 +148,7 @@ export class PaymentMethodPage extends BasePage {
|
||||||
expect.soft(servicePackageValue).toContain('New wiper blades');
|
expect.soft(servicePackageValue).toContain('New wiper blades');
|
||||||
}
|
}
|
||||||
if (servicePackage === ServicePackage.Premium) {
|
if (servicePackage === ServicePackage.Premium) {
|
||||||
expect.soft(servicePackageValue).toContain('Rain repel treatment');
|
expect.soft(servicePackageValue).toContain('Rain Repel Treatment');
|
||||||
}
|
}
|
||||||
|
|
||||||
// Promo Code Validation
|
// Promo Code Validation
|
||||||
|
|
@ -357,10 +357,12 @@ l
|
||||||
}
|
}
|
||||||
let isCaliforniaState = localStorage.order.serviceLocation.state as string == 'CA' ? true : false;
|
let isCaliforniaState = localStorage.order.serviceLocation.state as string == 'CA' ? true : false;
|
||||||
let hasRecalPart: boolean = false;
|
let hasRecalPart: boolean = false;
|
||||||
|
let canSafeliteRecalibrate: boolean = false;
|
||||||
if (!isRepair) {
|
if (!isRepair) {
|
||||||
hasRecalPart = localStorage.order.lineItems.glassParts.find((item: any) => item.requiresRecalibration === true) ? true : false;
|
hasRecalPart = localStorage.order.lineItems.glassParts.find((item: any) => item.requiresRecalibration === true) ? true : false;
|
||||||
|
canSafeliteRecalibrate = localStorage.order.lineItems.glassParts.find((item: any) => item.canSafeliteRecalibrate === true) ? true : false;
|
||||||
}
|
}
|
||||||
let recalRequired = !isRepair && (isInsurance || isCaliforniaState) && hasRecalPart
|
let recalRequired = !isRepair && (isInsurance || isCaliforniaState) && hasRecalPart && canSafeliteRecalibrate
|
||||||
let stringForRepair: string[] = ["Expert windshield repair", "Exclusive resin sealant", "Nationwide lifetime guarantee"];
|
let stringForRepair: string[] = ["Expert windshield repair", "Exclusive resin sealant", "Nationwide lifetime guarantee"];
|
||||||
let stringIfRecal = isRepair
|
let stringIfRecal = isRepair
|
||||||
? ""
|
? ""
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,7 @@ export class PaypalPage extends BasePage {
|
||||||
readonly passwordTextBox: Locator;
|
readonly passwordTextBox: Locator;
|
||||||
readonly paypalLoginButton: Locator;
|
readonly paypalLoginButton: Locator;
|
||||||
readonly completePurchaseButton: Locator;
|
readonly completePurchaseButton: Locator;
|
||||||
|
readonly payWithRadioButton: Locator;
|
||||||
readonly payButton: Locator;
|
readonly payButton: Locator;
|
||||||
|
|
||||||
constructor(page: Page) {
|
constructor(page: Page) {
|
||||||
|
|
@ -23,6 +24,7 @@ export class PaypalPage extends BasePage {
|
||||||
this.passwordTextBox = page.getByPlaceholder('Password');
|
this.passwordTextBox = page.getByPlaceholder('Password');
|
||||||
this.paypalLoginButton = page.getByRole('button', { name: 'Log In', exact: true });
|
this.paypalLoginButton = page.getByRole('button', { name: 'Log In', exact: true });
|
||||||
this.completePurchaseButton = page.getByTestId('submit-button-initial')
|
this.completePurchaseButton = page.getByTestId('submit-button-initial')
|
||||||
|
this.payWithRadioButton = page.locator('.py-4').first();
|
||||||
this.payButton = page.getByRole('button', { name: 'Pay $' });
|
this.payButton = page.getByRole('button', { name: 'Pay $' });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -42,6 +44,7 @@ export class PaypalPage extends BasePage {
|
||||||
await this.usePasswordInsteadButton.click();
|
await this.usePasswordInsteadButton.click();
|
||||||
await this.passwordTextBox.fill(paymentDetails.password!);
|
await this.passwordTextBox.fill(paymentDetails.password!);
|
||||||
await this.paypalLoginButton.click();
|
await this.paypalLoginButton.click();
|
||||||
|
await this.payWithRadioButton.click();
|
||||||
await this.payButton.click();
|
await this.payButton.click();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,7 @@ export class VehicleSelectionPage extends BasePage {
|
||||||
readonly makeDropdown: Locator;
|
readonly makeDropdown: Locator;
|
||||||
readonly modelDropdown: Locator;
|
readonly modelDropdown: Locator;
|
||||||
readonly styleDropdown: Locator;
|
readonly styleDropdown: Locator;
|
||||||
|
readonly zipCodeTextBox: Locator;
|
||||||
readonly discontinuedServiceAlert: Locator;
|
readonly discontinuedServiceAlert: Locator;
|
||||||
|
|
||||||
url = process.env['BASE_URL']! + '/fmg/?fmgPage=vehicle';
|
url = process.env['BASE_URL']! + '/fmg/?fmgPage=vehicle';
|
||||||
|
|
@ -23,6 +24,7 @@ export class VehicleSelectionPage extends BasePage {
|
||||||
this.makeDropdown = this.page.locator('#makeQuestionField');
|
this.makeDropdown = this.page.locator('#makeQuestionField');
|
||||||
this.modelDropdown = this.page.locator('#modelQuestionField');
|
this.modelDropdown = this.page.locator('#modelQuestionField');
|
||||||
this.styleDropdown = this.page.locator('#styleQuestionField');
|
this.styleDropdown = this.page.locator('#styleQuestionField');
|
||||||
|
this.zipCodeTextBox = this.page.getByRole('textbox', { name: 'Zip code' });
|
||||||
this.discontinuedServiceAlert = this.page.locator('.alert-danger.widget-name-AlertNoServiceWidget');
|
this.discontinuedServiceAlert = this.page.locator('.alert-danger.widget-name-AlertNoServiceWidget');
|
||||||
// this.validateURL(this.url);
|
// this.validateURL(this.url);
|
||||||
}
|
}
|
||||||
|
|
@ -49,13 +51,17 @@ export class VehicleSelectionPage extends BasePage {
|
||||||
@step("VehicleSelectionPage >> Select Vehicle: ")
|
@step("VehicleSelectionPage >> Select Vehicle: ")
|
||||||
async handleVehicleSelectionPage(testData: Partial<ITestData>) {
|
async handleVehicleSelectionPage(testData: Partial<ITestData>) {
|
||||||
await this.validateProgressBar(ProgressBarPercentages.VehicleSelectionPage);
|
await this.validateProgressBar(ProgressBarPercentages.VehicleSelectionPage);
|
||||||
const { vehicleDetails } = testData;
|
const { vehicleDetails, isHeavyTruck, customerDetails } = testData;
|
||||||
const { isHeavyTruckVehicle, isSplitWindshield } = testData.alertFlags || {};
|
const { isHeavyTruckVehicleAlert, isSplitWindshield } = testData.alertFlags || {};
|
||||||
|
|
||||||
await this.selectVehicle(vehicleDetails!);
|
await this.selectVehicle(vehicleDetails!);
|
||||||
|
|
||||||
|
if (isHeavyTruck) {
|
||||||
|
await this.zipCodeTextBox.fill(customerDetails?.address.postalCode!);
|
||||||
|
}
|
||||||
|
|
||||||
// Handle alert conditions for vehicle selection
|
// Handle alert conditions for vehicle selection
|
||||||
if (isHeavyTruckVehicle || isSplitWindshield) {
|
if (isHeavyTruckVehicleAlert || isSplitWindshield) {
|
||||||
await this.checkForAlertMessages();
|
await this.checkForAlertMessages();
|
||||||
throw new TestSuccessAlert('Both assertions are met successfully.');
|
throw new TestSuccessAlert('Both assertions are met successfully.');
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -43,8 +43,8 @@ export class AddressForm extends BasePage {
|
||||||
// await this.forceAddressFormToAppear();
|
// await this.forceAddressFormToAppear();
|
||||||
await this.streetAddressTextBox.click();
|
await this.streetAddressTextBox.click();
|
||||||
await this.streetAddressTextBox.pressSequentially(`${customerDetails.address.street}, ${customerDetails.address.city}, ${customerDetails.address.state} ${customerDetails.address.postalCode}`).then( async() => {
|
await this.streetAddressTextBox.pressSequentially(`${customerDetails.address.street}, ${customerDetails.address.city}, ${customerDetails.address.state} ${customerDetails.address.postalCode}`).then( async() => {
|
||||||
await this.streetAddressTextBox.dispatchEvent('keydown', { key: 'ArrowDown' });
|
await this.streetAddressTextBox.dispatchEvent('keydown', { key: 'ArrowLeft' } );
|
||||||
await this.streetAddressTextBox.dispatchEvent('keyup', { key: 'ArrowDown' });
|
await this.streetAddressTextBox.dispatchEvent('keyup', { key: 'ArrowLeft' });
|
||||||
});
|
});
|
||||||
|
|
||||||
await waitUntil(async () => {
|
await waitUntil(async () => {
|
||||||
|
|
@ -56,10 +56,20 @@ export class AddressForm extends BasePage {
|
||||||
text.includes(customerDetails.address!.state)
|
text.includes(customerDetails.address!.state)
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
await this.addressSuggestionList.dispatchEvent('mouseover');
|
|
||||||
await this.addressSuggestionList.click();
|
await this.page.hover(".pac-container .pac-item");
|
||||||
|
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||||
|
await this.addressSuggestionList.click(); // Select the first suggestion
|
||||||
|
//await this.streetAddressTextBox.press('Tab'); // Move focus to ZIP code field
|
||||||
|
|
||||||
// Fill address
|
// Fill address
|
||||||
|
await this.stateDrpDwn.waitFor({ state: 'visible', timeout: 5000 }).then(async () => {
|
||||||
|
const selectedState = await this.stateDrpDwn.inputValue();
|
||||||
|
if (selectedState !== customerDetails.address!.state) {
|
||||||
|
await this.stateDrpDwn.selectOption(customerDetails.address!.state);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
await this.fillAndValidate(this.streetAddressTextBox, customerDetails.address.street);
|
await this.fillAndValidate(this.streetAddressTextBox, customerDetails.address.street);
|
||||||
await this.fillAndValidate(this.zipCodeTextBox, customerDetails.address.postalCode)
|
await this.fillAndValidate(this.zipCodeTextBox, customerDetails.address.postalCode)
|
||||||
await this.fillAndValidate(this.cityTextBox, customerDetails.address.city);
|
await this.fillAndValidate(this.cityTextBox, customerDetails.address.city);
|
||||||
|
|
|
||||||
|
|
@ -64,7 +64,7 @@ export default defineConfig({
|
||||||
['junit'],
|
['junit'],
|
||||||
['list']
|
['list']
|
||||||
],
|
],
|
||||||
timeout: 180_000,
|
timeout: 300_000,
|
||||||
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
|
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
|
||||||
use: {
|
use: {
|
||||||
/* Base URL to use in actions like `await page.goto('/')`. */
|
/* Base URL to use in actions like `await page.goto('/')`. */
|
||||||
|
|
|
||||||
|
|
@ -31,7 +31,10 @@ import cashRepairInShopAfterPayTests from "./CashRepairInShopAfterPay";
|
||||||
import cashRepairInShopPayPalTests from "./CashRepairInShopPayPal";
|
import cashRepairInShopPayPalTests from "./CashRepairInShopPayPal";
|
||||||
import cashReplaceMultiSlidingGlassDropoffTests from "./CashReplaceMultiSlidingGlassDropoff";
|
import cashReplaceMultiSlidingGlassDropoffTests from "./CashReplaceMultiSlidingGlassDropoff";
|
||||||
import cashReplaceMultiGlassMobileTests from "./CashReplaceMultiGlassMobile";
|
import cashReplaceMultiGlassMobileTests from "./CashReplaceMultiGlassMobile";
|
||||||
import cashReplaceSwitchToInsuranceProgressiveNoCompTests from "./CashReplaceSwitchToInsuranceProgressiveNoComp"
|
import cashReplaceSwitchToInsuranceProgressiveNoCompTests from "./CashReplaceSwitchToInsuranceProgressiveNoComp";
|
||||||
|
import insuranceBigTruckVerifiedTests from "./InsuranceBigTruckVerified";
|
||||||
|
import insuranceUnverifiedTests from "./InsuranceUnverified";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Master Test Runner
|
* Master Test Runner
|
||||||
*
|
*
|
||||||
|
|
@ -68,6 +71,8 @@ const allStandardTests = [
|
||||||
{name: "InsuranceAcuityPaypal", tests: insuranceAcuityPaypalTests},
|
{name: "InsuranceAcuityPaypal", tests: insuranceAcuityPaypalTests},
|
||||||
{name: "InsuranceITAC21stCentury", tests: insuranceITAC21stCenturyTests},
|
{name: "InsuranceITAC21stCentury", tests: insuranceITAC21stCenturyTests},
|
||||||
{name: "CashReplaceSwitchToInsuranceProgressiveNoComp", tests: cashReplaceSwitchToInsuranceProgressiveNoCompTests},
|
{name: "CashReplaceSwitchToInsuranceProgressiveNoComp", tests: cashReplaceSwitchToInsuranceProgressiveNoCompTests},
|
||||||
|
{name: "InsuranceBigTruckVerified", tests: insuranceBigTruckVerifiedTests},
|
||||||
|
{name: "InsuranceUnverified", tests: insuranceUnverifiedTests},
|
||||||
// {name: "InsuranceGeico", tests: insuranceGeicoTests},
|
// {name: "InsuranceGeico", tests: insuranceGeicoTests},
|
||||||
// {name: "InsuranceITACOptimizedPriceValidationAllState", tests: insuranceITACOptimizedPriceValidationAllStateTests}
|
// {name: "InsuranceITACOptimizedPriceValidationAllState", tests: insuranceITACOptimizedPriceValidationAllStateTests}
|
||||||
|
|
||||||
|
|
@ -297,7 +302,7 @@ async function runWorkflow(page: Page, testCase: TestCase) {
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function handleInsuranceFlow(testCase: TestCase) {
|
export async function handleInsuranceFlow(testCase: TestCase) {
|
||||||
const { isPolicyFound, isPolicyDriver, endorsements, isRecalNotification } = testCase.testData;
|
const { isPolicyFound, isPolicyDriver, endorsements, isRecalVehicle } = testCase.testData;
|
||||||
|
|
||||||
// Check if the insurance policy has endorsements
|
// Check if the insurance policy has endorsements
|
||||||
const hasEndorsements = endorsements && endorsements.length > 0;
|
const hasEndorsements = endorsements && endorsements.length > 0;
|
||||||
|
|
@ -341,7 +346,7 @@ export async function handleInsuranceFlow(testCase: TestCase) {
|
||||||
let policyInfoSubmittedPage = testCase.pages.policyInfoSubmittedPage;
|
let policyInfoSubmittedPage = testCase.pages.policyInfoSubmittedPage;
|
||||||
await policyInfoSubmittedPage.handlePolicyInfoSubmittedPage();
|
await policyInfoSubmittedPage.handlePolicyInfoSubmittedPage();
|
||||||
|
|
||||||
if(isRecalNotification)
|
if(isRecalVehicle)
|
||||||
{
|
{
|
||||||
let recalibrationInfoPage = testCase.pages.recalibrationInfoPage;
|
let recalibrationInfoPage = testCase.pages.recalibrationInfoPage;
|
||||||
await recalibrationInfoPage.handleRecalibrationInfoPage();
|
await recalibrationInfoPage.handleRecalibrationInfoPage();
|
||||||
|
|
|
||||||
81
playwright-tests/tests/InsuranceBigTruckVerified.ts
Normal file
81
playwright-tests/tests/InsuranceBigTruckVerified.ts
Normal file
|
|
@ -0,0 +1,81 @@
|
||||||
|
//Imports here
|
||||||
|
import { ITestData } from "@business-logic/types/ITestData"
|
||||||
|
import { PaymentMethod, AppointmentType, DamageType, PaymentType } from "@business-logic/types/Enums";
|
||||||
|
import TestCase from "@business-logic/types/TestCase";
|
||||||
|
import { VehicleLookupType } from "@business-logic/types/Enums";
|
||||||
|
import { getDefaultTestData, setFakerSeedFromTestName } from "@business-logic/constants/DefaultTestData";
|
||||||
|
|
||||||
|
// Set the seed based on test name for consistent but unique data
|
||||||
|
setFakerSeedFromTestName("InsuranceBigTruckVerified");
|
||||||
|
|
||||||
|
// Now get the test data with the seeded faker
|
||||||
|
const insuranceBigTruckVerifiedData: Partial<ITestData> = {
|
||||||
|
...getDefaultTestData(), // Get default data with current seed
|
||||||
|
|
||||||
|
// Key feature: Insurance flow with GEICO
|
||||||
|
paymentMethod: PaymentMethod.Insurance,
|
||||||
|
|
||||||
|
// Insurance claim flags
|
||||||
|
isDuplicateClaim: true,
|
||||||
|
isPolicyFound: true,
|
||||||
|
isUseVehicleOnPolicy: true,
|
||||||
|
isHeavyTruck: true,
|
||||||
|
|
||||||
|
// Override customer details with specific name and California location
|
||||||
|
customerDetails: {
|
||||||
|
...getDefaultTestData().customerDetails!,
|
||||||
|
firstName: 'Big',
|
||||||
|
lastName: 'Truck',
|
||||||
|
address: {
|
||||||
|
...getDefaultTestData().customerDetails!.address,
|
||||||
|
city: 'Ontario',
|
||||||
|
state: 'California',
|
||||||
|
postalCode: '43085'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
// Insurance claim details
|
||||||
|
claimDetails: {
|
||||||
|
client: 'USAA',
|
||||||
|
policyNumber: 'Mock900040BigTruck',
|
||||||
|
policyDeductible: 2000.00,
|
||||||
|
policyZip: '55414',
|
||||||
|
damageDate: new Date(new Date().setDate(new Date().getDate() - 1)).toLocaleDateString('en-US', {month: '2-digit', day: '2-digit', year: 'numeric'}),
|
||||||
|
damageCause: DamageType.Rock
|
||||||
|
},
|
||||||
|
|
||||||
|
// Hyundai vehicle details with VIN lookup
|
||||||
|
vehicleDetails: {
|
||||||
|
...getDefaultTestData().vehicleDetails!,
|
||||||
|
year: '2025',
|
||||||
|
make: 'Peterbilt',
|
||||||
|
model: '579',
|
||||||
|
style: 'conventional cab',
|
||||||
|
vin: '1XPBDP9X6SD693446',
|
||||||
|
vehicleLookupType: VehicleLookupType.Vin,
|
||||||
|
},
|
||||||
|
|
||||||
|
// No need to override vehicleDamage as it already defaults to WindshieldCrack
|
||||||
|
|
||||||
|
// Override for in-shop appointment
|
||||||
|
appointmentDetails: {
|
||||||
|
serviceLocation: AppointmentType.InShop,
|
||||||
|
shopAddress: '5719 Brandt Pike, Dayton, OH 45424',
|
||||||
|
appointmentDate: getDefaultTestData().appointmentDetails?.appointmentDate
|
||||||
|
},
|
||||||
|
|
||||||
|
// Override payment details (empty because we skip payment method page in insurance flow)
|
||||||
|
paymentDetails: {}
|
||||||
|
}
|
||||||
|
|
||||||
|
const insuranceBigTruckVerifiedTests: TestCase[] = [];
|
||||||
|
|
||||||
|
const tc = new TestCase({
|
||||||
|
name: `InsuranceBigTruckVerified`,
|
||||||
|
tags: ['@E2E','@InsuranceBigTruckVerified', '@test_report', '@Insurance'],
|
||||||
|
testData: insuranceBigTruckVerifiedData
|
||||||
|
}, undefined, 'InsuranceBigTruckVerified');
|
||||||
|
insuranceBigTruckVerifiedTests.push(tc);
|
||||||
|
|
||||||
|
export default insuranceBigTruckVerifiedTests;
|
||||||
|
|
@ -19,7 +19,7 @@ const insuranceITAC21stCenturyData: Partial<ITestData> = {
|
||||||
isDuplicateClaim: true,
|
isDuplicateClaim: true,
|
||||||
isPolicyFound: true,
|
isPolicyFound: true,
|
||||||
isUseVehicleOnPolicy: true,
|
isUseVehicleOnPolicy: true,
|
||||||
isRecalNotification: true, // Special flag for recalibration notification
|
isRecalVehicle: true, // Special flag for recalibration notification
|
||||||
|
|
||||||
// Override customer details for California location
|
// Override customer details for California location
|
||||||
customerDetails: {
|
customerDetails: {
|
||||||
|
|
|
||||||
86
playwright-tests/tests/InsuranceUnverified.ts
Normal file
86
playwright-tests/tests/InsuranceUnverified.ts
Normal file
|
|
@ -0,0 +1,86 @@
|
||||||
|
//Imports here
|
||||||
|
import { ITestData } from "@business-logic/types/ITestData"
|
||||||
|
import { PaymentMethod, AppointmentType, DamageType, PartQuestionType } from "@business-logic/types/Enums";
|
||||||
|
import TestCase from "@business-logic/types/TestCase";
|
||||||
|
import { VehicleLookupType } from "@business-logic/types/Enums";
|
||||||
|
import { getDefaultTestData, setFakerSeedFromTestName } from "@business-logic/constants/DefaultTestData";
|
||||||
|
|
||||||
|
// Set the seed based on test name for consistent but unique data
|
||||||
|
setFakerSeedFromTestName("InsuranceUnverified");
|
||||||
|
|
||||||
|
// Now get the test data with the seeded faker
|
||||||
|
const insuranceUnverifiedData: Partial<ITestData> = {
|
||||||
|
...getDefaultTestData(), // Get default data with current seed
|
||||||
|
|
||||||
|
// Key feature: Insurance flow with GEICO
|
||||||
|
paymentMethod: PaymentMethod.Insurance,
|
||||||
|
|
||||||
|
// Insurance claim flags
|
||||||
|
isPolicyFound: false,
|
||||||
|
isPolicyUnverified: true,
|
||||||
|
isRecalNotification: true,
|
||||||
|
|
||||||
|
// Override customer details with specific name and California location
|
||||||
|
customerDetails: {
|
||||||
|
...getDefaultTestData().customerDetails!,
|
||||||
|
firstName: 'Jane',
|
||||||
|
lastName: 'Unverified',
|
||||||
|
address: {
|
||||||
|
...getDefaultTestData().customerDetails!.address,
|
||||||
|
city: 'Richmond',
|
||||||
|
state: 'Virginia',
|
||||||
|
postalCode: '23219'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
// Insurance claim details
|
||||||
|
claimDetails: {
|
||||||
|
client: '21st Century',
|
||||||
|
policyNumber: 'UnverifiedMock',
|
||||||
|
policyDeductible: "Unverified",
|
||||||
|
policyZip: '43123',
|
||||||
|
damageDate: new Date(new Date().setDate(new Date().getDate() - 1)).toLocaleDateString('en-US', {month: '2-digit', day: '2-digit', year: 'numeric'}),
|
||||||
|
damageCause: DamageType.Rock
|
||||||
|
},
|
||||||
|
|
||||||
|
// Hyundai vehicle details with VIN lookup
|
||||||
|
vehicleDetails: {
|
||||||
|
...getDefaultTestData().vehicleDetails!,
|
||||||
|
year: '2014',
|
||||||
|
make: 'Honda',
|
||||||
|
model: 'Accord',
|
||||||
|
style: '4 door sedan',
|
||||||
|
vehicleLookupType: VehicleLookupType.Zip,
|
||||||
|
},
|
||||||
|
|
||||||
|
// Part questions related to recalibration
|
||||||
|
partQuestions: [
|
||||||
|
{
|
||||||
|
partQuestionType: PartQuestionType.GeneralQuestion1,
|
||||||
|
isOnPage: true,
|
||||||
|
optionToSelect: 'Yes'
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
|
// Override for in-shop appointment
|
||||||
|
appointmentDetails: {
|
||||||
|
serviceLocation: AppointmentType.InShop,
|
||||||
|
shopAddress: '5719 Brandt Pike, Dayton, OH 45424',
|
||||||
|
appointmentDate: getDefaultTestData().appointmentDetails?.appointmentDate
|
||||||
|
},
|
||||||
|
|
||||||
|
// Override payment details (empty because we skip payment method page in insurance flow)
|
||||||
|
paymentDetails: {}
|
||||||
|
}
|
||||||
|
|
||||||
|
const insuranceUnverifiedTests: TestCase[] = [];
|
||||||
|
|
||||||
|
const tc = new TestCase({
|
||||||
|
name: `InsuranceUnverified`,
|
||||||
|
tags: ['@E2E','@InsuranceUnverified', '@test_report', '@Insurance'],
|
||||||
|
testData: insuranceUnverifiedData
|
||||||
|
}, undefined, 'InsuranceUnverified');
|
||||||
|
insuranceUnverifiedTests.push(tc);
|
||||||
|
|
||||||
|
export default insuranceUnverifiedTests;
|
||||||
|
|
@ -18,7 +18,7 @@ const heavyTruckData: Partial<ITestData> = {
|
||||||
style: 'conventional cab'
|
style: 'conventional cab'
|
||||||
},
|
},
|
||||||
alertFlags: {
|
alertFlags: {
|
||||||
isHeavyTruckVehicle: true
|
isHeavyTruckVehicleAlert: true
|
||||||
},
|
},
|
||||||
vehicleDamage: [
|
vehicleDamage: [
|
||||||
VehicleDamage.WindshieldOneChip,
|
VehicleDamage.WindshieldOneChip,
|
||||||
|
|
|
||||||
|
|
@ -75,9 +75,9 @@ const lookupTypesToTest: LookupTestCase[] = [
|
||||||
},
|
},
|
||||||
customerDetails: {
|
customerDetails: {
|
||||||
address: {
|
address: {
|
||||||
street: '4076 Spectacle Dr',
|
street: '4076 Spectacle Drive',
|
||||||
city: 'Columbus',
|
city: 'Columbus',
|
||||||
state: 'Ohio',
|
state: 'OH',
|
||||||
postalCode: '59261',
|
postalCode: '59261',
|
||||||
country: 'United States'
|
country: 'United States'
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -8,6 +8,7 @@
|
||||||
<funnelFooter />
|
<funnelFooter />
|
||||||
<loadingModal :showLoader="shouldShowLoader" :showTextCarousel="shouldShowTextCarousel" />
|
<loadingModal :showLoader="shouldShowLoader" :showTextCarousel="shouldShowTextCarousel" />
|
||||||
<salesforceWebchat />
|
<salesforceWebchat />
|
||||||
|
<sierra-webchat />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -16,6 +17,7 @@ import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
|
||||||
import { showFmgLoadingModal } from "@/helpers/loading-modal-helper";
|
import { showFmgLoadingModal } from "@/helpers/loading-modal-helper";
|
||||||
import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer.vue";
|
import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer.vue";
|
||||||
import salesforceWebchat from "./digital-components/salesforce-webchat/salesforce-webchat.vue";
|
import salesforceWebchat from "./digital-components/salesforce-webchat/salesforce-webchat.vue";
|
||||||
|
import sierraWebchat from "./digital-components/sierra-webchat/sierra-webchat.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "app",
|
name: "app",
|
||||||
|
|
@ -38,6 +40,7 @@ export default {
|
||||||
loadingModal,
|
loadingModal,
|
||||||
funnelFooter,
|
funnelFooter,
|
||||||
salesforceWebchat,
|
salesforceWebchat,
|
||||||
|
sierraWebchat,
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
showFmgLoadingModal(true);
|
showFmgLoadingModal(true);
|
||||||
|
|
|
||||||
|
|
@ -1081,7 +1081,7 @@ export default {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: $black;
|
background-color: $black;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 1.875rem;
|
top: 1.75rem;
|
||||||
}
|
}
|
||||||
.first-day {
|
.first-day {
|
||||||
color: $blue;
|
color: $blue;
|
||||||
|
|
@ -1090,13 +1090,6 @@ export default {
|
||||||
input[type="radio"]:checked + label:after {
|
input[type="radio"]:checked + label:after {
|
||||||
background-color: $black;
|
background-color: $black;
|
||||||
}
|
}
|
||||||
&.selectable-day {
|
|
||||||
label {
|
|
||||||
&:after {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1285,6 +1278,13 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
&.selectable-day.current-day {
|
||||||
|
label {
|
||||||
|
&:after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -9,9 +9,11 @@ import { initializeSalesforceWebchatForQa } from "./salesforce-helper-qa";
|
||||||
import { initializeSalesforceWebchatForProd } from "./salesforce-helper-prod";
|
import { initializeSalesforceWebchatForProd } from "./salesforce-helper-prod";
|
||||||
import { applicationConfig } from "@/constants/application-config";
|
import { applicationConfig } from "@/constants/application-config";
|
||||||
import { webchatHelper } from "@/helpers/webchat-helper";
|
import { webchatHelper } from "@/helpers/webchat-helper";
|
||||||
|
import analyticsMixin from "@/mixins/analytics-mixin";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "salesforceWebchat",
|
name: "salesforceWebchat",
|
||||||
|
mixins: [analyticsMixin],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
isAgentAvailable: false,
|
isAgentAvailable: false,
|
||||||
|
|
@ -34,6 +36,29 @@ export default {
|
||||||
script.src = "https://service.force.com/embeddedservice/5.0/esw.min.js";
|
script.src = "https://service.force.com/embeddedservice/5.0/esw.min.js";
|
||||||
script.onload = this.initializeSalesforceWebchat;
|
script.onload = this.initializeSalesforceWebchat;
|
||||||
document.body.appendChild(script);
|
document.body.appendChild(script);
|
||||||
|
|
||||||
|
// Notify funnel-header about Salesforce chat open/close state
|
||||||
|
this._salesforceChatOpenObserver = new MutationObserver(() => {
|
||||||
|
const isOpen = !!document.querySelector(".embeddedServiceSidebar");
|
||||||
|
window.dispatchEvent(
|
||||||
|
new CustomEvent("salesforce-chat-visibility", { detail: { open: isOpen } })
|
||||||
|
);
|
||||||
|
});
|
||||||
|
this._salesforceChatOpenObserver.observe(document.body, {
|
||||||
|
childList: true,
|
||||||
|
subtree: true,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
beforeUnmount() {
|
||||||
|
// Clean up event listeners and observers
|
||||||
|
window.removeEventListener(
|
||||||
|
"salesforce-chat-visibility",
|
||||||
|
this._handleSalesforceChatVisibility
|
||||||
|
);
|
||||||
|
window.removeEventListener("sierra-chat-transfer", this._handleSierraToSalesforceTransfer);
|
||||||
|
if (this._salesforceChatOpenObserver) {
|
||||||
|
this._salesforceChatOpenObserver.disconnect();
|
||||||
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
initializeSalesforceWebchat() {
|
initializeSalesforceWebchat() {
|
||||||
|
|
@ -71,6 +96,9 @@ export default {
|
||||||
window.embedded_svc.settings.prechatBackgroundImgURL = require("@/assets/img/salesforce-webchat/safelite_logo_webchat.png");
|
window.embedded_svc.settings.prechatBackgroundImgURL = require("@/assets/img/salesforce-webchat/safelite_logo_webchat.png");
|
||||||
window.embedded_svc.settings.smallCompanyLogoImgURL = require("@/assets/img/salesforce-webchat/minimized_chat_bubble_webchat.png");
|
window.embedded_svc.settings.smallCompanyLogoImgURL = require("@/assets/img/salesforce-webchat/minimized_chat_bubble_webchat.png");
|
||||||
window.embedded_svc.settings.displayHelpButton = false;
|
window.embedded_svc.settings.displayHelpButton = false;
|
||||||
|
window.embedded_svc.addEventHandler("onChatEstablished", () => {
|
||||||
|
this.pushEventForChatsToGA("support_chat", "chat_opened", "Live Agent", true);
|
||||||
|
});
|
||||||
},
|
},
|
||||||
finishedLoadingCallback(data) {
|
finishedLoadingCallback(data) {
|
||||||
this.isAgentAvailable = data.isAgentAvailable;
|
this.isAgentAvailable = data.isAgentAvailable;
|
||||||
|
|
|
||||||
101
src/digital-components/sierra-webchat/sierra-webchat.spec.js
Normal file
101
src/digital-components/sierra-webchat/sierra-webchat.spec.js
Normal file
|
|
@ -0,0 +1,101 @@
|
||||||
|
import { shallowMount } from "@vue/test-utils";
|
||||||
|
import sierraWebchat from "./sierra-webchat.vue";
|
||||||
|
|
||||||
|
jest.mock("@/mixins/analytics-mixin");
|
||||||
|
// Mock router for analytics-mixin
|
||||||
|
jest.mock("@/router", () => ({
|
||||||
|
currentRoute: {
|
||||||
|
value: {
|
||||||
|
name: "mockedPageName",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
default: {
|
||||||
|
currentRoute: {
|
||||||
|
value: {
|
||||||
|
name: "mockedPageName",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
|
describe("sierraWebchat.vue", () => {
|
||||||
|
let wrapper;
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
wrapper = shallowMount(sierraWebchat);
|
||||||
|
// Mock global window properties
|
||||||
|
window.sierraChat = { openChatModal: jest.fn(), closeChatModal: jest.fn() };
|
||||||
|
window.sierra = undefined;
|
||||||
|
window.SierraChat = undefined;
|
||||||
|
window.embedded_svc = {
|
||||||
|
bootstrapEmbeddedService: jest.fn(),
|
||||||
|
liveAgentAPI: { startChat: jest.fn() },
|
||||||
|
settings: {},
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
afterEach(() => {
|
||||||
|
wrapper.unmount();
|
||||||
|
jest.clearAllMocks();
|
||||||
|
delete window.sierraChat;
|
||||||
|
delete window.embedded_svc;
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should mount the component", () => {
|
||||||
|
expect(wrapper.exists()).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("calls openSierraChatModal when launchSierraChat is called and script is loaded", () => {
|
||||||
|
const spy = jest.spyOn(wrapper.vm, "openSierraChatModal");
|
||||||
|
// Simulate script already loaded
|
||||||
|
document.body.appendChild(document.createElement("script")).id = "sierra-chat-embed";
|
||||||
|
wrapper.vm.launchSierraChat();
|
||||||
|
expect(spy).toHaveBeenCalled();
|
||||||
|
document.getElementById("sierra-chat-embed").remove();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("calls closeSierraChat when invoked", () => {
|
||||||
|
wrapper.vm.closeSierraChat();
|
||||||
|
expect(window.sierraChat.closeChatModal).toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("dispatches sierra-chat-closed on handleSierraOnClose", () => {
|
||||||
|
const eventSpy = jest.spyOn(window, "dispatchEvent");
|
||||||
|
wrapper.vm.createSierraConfig().onClose();
|
||||||
|
expect(eventSpy).toHaveBeenCalledWith(
|
||||||
|
expect.objectContaining({ type: "sierra-chat-closed" })
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("dispatches sierra-chat-transfer on handleSierraOnTransfer", () => {
|
||||||
|
const eventSpy = jest.spyOn(window, "dispatchEvent");
|
||||||
|
const transfer = {
|
||||||
|
data: { first_name: "A", last_name: "B", email: "a@b.com", chat_summary: "summary" },
|
||||||
|
};
|
||||||
|
wrapper.vm.createSierraConfig().onTransfer(transfer);
|
||||||
|
expect(eventSpy).toHaveBeenCalledWith(
|
||||||
|
expect.objectContaining({ type: "sierra-chat-transfer" })
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("handles sierra-chat-transfer event and starts Salesforce chat with prepopulated fields", () => {
|
||||||
|
const transfer = {
|
||||||
|
data: {
|
||||||
|
first_name: "A",
|
||||||
|
last_name: "B",
|
||||||
|
email: "a@b.com",
|
||||||
|
chat_summary: "summary",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
const event = new CustomEvent("sierra-chat-transfer", { detail: transfer });
|
||||||
|
window.dispatchEvent(event);
|
||||||
|
expect(window.sierraChat.closeChatModal).toHaveBeenCalled();
|
||||||
|
expect(window.embedded_svc.settings.prepopulatedPrechatFields).toEqual({
|
||||||
|
FirstName: "A",
|
||||||
|
LastName: "B",
|
||||||
|
Email: "a@b.com",
|
||||||
|
Subject: "summary",
|
||||||
|
});
|
||||||
|
expect(window.embedded_svc.liveAgentAPI.startChat).toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
});
|
||||||
140
src/digital-components/sierra-webchat/sierra-webchat.vue
Normal file
140
src/digital-components/sierra-webchat/sierra-webchat.vue
Normal file
|
|
@ -0,0 +1,140 @@
|
||||||
|
<template>
|
||||||
|
<div ref="sierraContainer"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import analyticsMixin from "@/mixins/analytics-mixin";
|
||||||
|
export default {
|
||||||
|
name: "sierraWebchat",
|
||||||
|
mixins: [analyticsMixin],
|
||||||
|
methods: {
|
||||||
|
openSierraChatModal() {
|
||||||
|
const sierra = window.sierraChat || window.sierra || window.SierraChat;
|
||||||
|
if (sierra && typeof sierra.openChatModal === "function") {
|
||||||
|
sierra.openChatModal();
|
||||||
|
} else {
|
||||||
|
const launchLink = document.createElement("a");
|
||||||
|
launchLink.setAttribute("data-sierra-chat", "modal");
|
||||||
|
launchLink.style.display = "none";
|
||||||
|
document.body.appendChild(launchLink);
|
||||||
|
launchLink.click();
|
||||||
|
document.body.removeChild(launchLink);
|
||||||
|
}
|
||||||
|
this.pushEventForChatsToGA("support_chat", "chat_opened", "Scarlett", true);
|
||||||
|
},
|
||||||
|
createSierraConfig() {
|
||||||
|
return {
|
||||||
|
variables: { application: "funnel" },
|
||||||
|
display: "corner",
|
||||||
|
onLoad: () => this.openSierraChatModal(),
|
||||||
|
onOpen: () => {},
|
||||||
|
onClose: () => window.dispatchEvent(new CustomEvent("sierra-chat-closed")),
|
||||||
|
onTransfer: (transfer) =>
|
||||||
|
window.dispatchEvent(
|
||||||
|
new CustomEvent("sierra-chat-transfer", { detail: transfer })
|
||||||
|
),
|
||||||
|
};
|
||||||
|
},
|
||||||
|
launchSierraChat() {
|
||||||
|
window.sierraConfig = this.createSierraConfig();
|
||||||
|
// Preload CSS if not already present
|
||||||
|
if (!document.getElementById("sierra-chat-embed-css")) {
|
||||||
|
const link = document.createElement("link");
|
||||||
|
link.rel = "preload";
|
||||||
|
link.as = "style";
|
||||||
|
link.href =
|
||||||
|
"https://sierra.chat/agent/OxY5TbsBlJZsHxIBlJZsmCiQdcXfa2rePO38ZwOlx40/embed-css";
|
||||||
|
link.id = "sierra-chat-embed-css";
|
||||||
|
document.head.appendChild(link);
|
||||||
|
}
|
||||||
|
// Load script if not loaded, otherwise open modal directly
|
||||||
|
if (!document.getElementById("sierra-chat-embed")) {
|
||||||
|
const script = document.createElement("script");
|
||||||
|
script.type = "module";
|
||||||
|
script.id = "sierra-chat-embed";
|
||||||
|
script.src =
|
||||||
|
"https://sierra.chat/agent/OxY5TbsBlJZsHxIBlJZsmCiQdcXfa2rePO38ZwOlx40/embed";
|
||||||
|
document.body.appendChild(script);
|
||||||
|
} else {
|
||||||
|
this.openSierraChatModal();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
triggerSierraChat() {
|
||||||
|
this.launchSierraChat();
|
||||||
|
},
|
||||||
|
closeSierraChat() {
|
||||||
|
const sierra = window.sierraChat || window.sierra || window.SierraChat;
|
||||||
|
if (sierra && typeof sierra.closeChatModal === "function") {
|
||||||
|
sierra.closeChatModal();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
window.addEventListener("launch-sierra-webchat", this.triggerSierraChat);
|
||||||
|
// Listen for transfer event to close Sierra chat and open Salesforce chat
|
||||||
|
this._handleSierraTransfer = (event) => {
|
||||||
|
const sierra = window.sierraChat || window.sierra || window.SierraChat;
|
||||||
|
if (sierra && typeof sierra.closeChatModal === "function") {
|
||||||
|
sierra.closeChatModal();
|
||||||
|
}
|
||||||
|
// Pass data to Salesforce chat if available
|
||||||
|
const transfer = event.detail;
|
||||||
|
if (
|
||||||
|
window.embedded_svc &&
|
||||||
|
typeof window.embedded_svc.bootstrapEmbeddedService === "function"
|
||||||
|
) {
|
||||||
|
if (
|
||||||
|
transfer &&
|
||||||
|
transfer.data &&
|
||||||
|
transfer.data.first_name &&
|
||||||
|
transfer.data.last_name &&
|
||||||
|
transfer.data.email
|
||||||
|
) {
|
||||||
|
window.embedded_svc.settings.prepopulatedPrechatFields = {
|
||||||
|
FirstName: transfer.data.first_name,
|
||||||
|
LastName: transfer.data.last_name,
|
||||||
|
Email: transfer.data.email,
|
||||||
|
Subject: transfer.data.chat_summary,
|
||||||
|
};
|
||||||
|
window.embedded_svc.settings.extraPrechatFormDetails = [
|
||||||
|
{
|
||||||
|
label: "Scarlett AI Summary",
|
||||||
|
value: transfer.data.chat_summary,
|
||||||
|
transcriptFields: ["Scarlett_AI_Summary__c"],
|
||||||
|
displayToAgent: true,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
if (
|
||||||
|
window.embedded_svc.liveAgentAPI &&
|
||||||
|
typeof window.embedded_svc.liveAgentAPI.startChat === "function"
|
||||||
|
) {
|
||||||
|
window.embedded_svc.liveAgentAPI.startChat();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
window.embedded_svc.bootstrapEmbeddedService();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
window.addEventListener("sierra-chat-transfer", this._handleSierraTransfer);
|
||||||
|
|
||||||
|
// Notify funnel-header about Sierra chat open/close state
|
||||||
|
this._sierraChatContainerObserver = new MutationObserver(() => {
|
||||||
|
const isOpen = !!document.querySelector("[data-sierra-chat-container]");
|
||||||
|
window.dispatchEvent(
|
||||||
|
new CustomEvent("sierra-chat-visibility", { detail: { open: isOpen } })
|
||||||
|
);
|
||||||
|
});
|
||||||
|
this._sierraChatContainerObserver.observe(document.body, {
|
||||||
|
childList: true,
|
||||||
|
subtree: true,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
beforeUnmount() {
|
||||||
|
window.removeEventListener("launch-sierra-webchat", this.triggerSierraChat);
|
||||||
|
window.removeEventListener("sierra-chat-transfer", this._handleSierraTransfer);
|
||||||
|
if (this._sierraChatContainerObserver) {
|
||||||
|
this._sierraChatContainerObserver.disconnect();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -208,8 +208,9 @@ export default {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background: $blue-100;
|
background: $blue-100;
|
||||||
border-radius: 3rem;
|
border-radius: 3rem;
|
||||||
box-shadow: 0px 0px 4px 1px rgba(0, 112, 209, 1) inset;
|
box-shadow: inset 0px 2px 4px 0px rgba(0, 112, 209, 0.2);
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
|
border: 1px solid $blue;
|
||||||
.label {
|
.label {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
|
|
@ -231,7 +232,7 @@ export default {
|
||||||
left: -2rem;
|
left: -2rem;
|
||||||
background: $blue;
|
background: $blue;
|
||||||
border-radius: 3rem;
|
border-radius: 3rem;
|
||||||
box-shadow: 0px 0px 0px 1px rgba(0, 112, 209, 1) inset;
|
box-shadow: 0px 3px 4px 0px rgba(66, 68, 90, 0.2);
|
||||||
transition: transform 750ms cubic-bezier(0.02, 0.94, 0.09, 0.97);
|
transition: transform 750ms cubic-bezier(0.02, 0.94, 0.09, 0.97);
|
||||||
transform: translate3d(2rem, 0, 0);
|
transform: translate3d(2rem, 0, 0);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -117,6 +117,10 @@
|
||||||
<span>{{ amountPaidText }}</span>
|
<span>{{ amountPaidText }}</span>
|
||||||
<span>{{ getLineItemAmount(amountPaid) }}</span>
|
<span>{{ getLineItemAmount(amountPaid) }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div v-if="donationCartItem" class="donation-amount">
|
||||||
|
<span>{{ donationCartItemName }}</span>
|
||||||
|
<span>{{ getLineItemAmount(donationCartItem.subTotal) }}</span>
|
||||||
|
</div>
|
||||||
<div class="amount-due">
|
<div class="amount-due">
|
||||||
<span>{{ amountDueText }}</span>
|
<span>{{ amountDueText }}</span>
|
||||||
<span>{{ getLineItemAmount(amountDue, showCoverageAsPending) }}</span>
|
<span>{{ getLineItemAmount(amountDue, showCoverageAsPending) }}</span>
|
||||||
|
|
@ -472,10 +476,6 @@ export default {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.donationCartItem) {
|
|
||||||
cartItems.push(this.donationCartItem);
|
|
||||||
}
|
|
||||||
|
|
||||||
return cartItems;
|
return cartItems;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
@ -1309,12 +1309,15 @@ export default {
|
||||||
.sub-total,
|
.sub-total,
|
||||||
.sales-tax,
|
.sales-tax,
|
||||||
.amount-due,
|
.amount-due,
|
||||||
.amount-paid {
|
.amount-paid,
|
||||||
font-weight: 500;
|
.donation-amount {
|
||||||
|
font-family:
|
||||||
|
UrbanistSemibold, AvertaSemibold; //Okay to remove AvertaSemibold after 2025.06.19 merge/release
|
||||||
color: $black;
|
color: $black;
|
||||||
}
|
}
|
||||||
.sub-total {
|
.sub-total {
|
||||||
border-top: 1px solid $green;
|
border-top: 1px solid $green;
|
||||||
|
background-color: $green-100;
|
||||||
}
|
}
|
||||||
.service-type,
|
.service-type,
|
||||||
.deductible {
|
.deductible {
|
||||||
|
|
|
||||||
|
|
@ -44,6 +44,7 @@ import { globalEvents } from "@/constants/events";
|
||||||
import menuModal from "@/fmg-components/funnel-header/menu-modal/menu-modal";
|
import menuModal from "@/fmg-components/funnel-header/menu-modal/menu-modal";
|
||||||
import progressBar from "@/fmg-components/funnel-header/progress-bar/progress-bar";
|
import progressBar from "@/fmg-components/funnel-header/progress-bar/progress-bar";
|
||||||
import { webchatHelper } from "@/helpers/webchat-helper";
|
import { webchatHelper } from "@/helpers/webchat-helper";
|
||||||
|
import store from "@/store";
|
||||||
|
|
||||||
// Constants
|
// Constants
|
||||||
const ALERT_DURATION = 3000; // millisecond time to display alert before dismissal
|
const ALERT_DURATION = 3000; // millisecond time to display alert before dismissal
|
||||||
|
|
@ -53,6 +54,9 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
globalAlertMessages: [],
|
globalAlertMessages: [],
|
||||||
|
sierraChatOpen: false,
|
||||||
|
salesforceChatOpen: false,
|
||||||
|
isSalesforceTransferInProgress: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
|
|
@ -71,9 +75,19 @@ export default {
|
||||||
return this.getCmsContent(this.cmsWidgetName, "LogoImage");
|
return this.getCmsContent(this.cmsWidgetName, "LogoImage");
|
||||||
},
|
},
|
||||||
shouldShowWebchatButton() {
|
shouldShowWebchatButton() {
|
||||||
|
// Hide the chat icon if Sierra chat is open
|
||||||
|
if (this.sierraChatOpen) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// Hide the chat icon if Salesforce chat is open or transfer is in progress
|
||||||
|
if (this.salesforceChatOpen || this.isSalesforceTransferInProgress) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// Show if either Sierra is enabled or Salesforce button is available and not hidden by page
|
||||||
return (
|
return (
|
||||||
!this.shouldHideWebchatButtonOnPage &&
|
(this.webchatGlobalNonpersistedState.shouldLaunchSierra ||
|
||||||
this.webchatGlobalNonpersistedState.showWebchatButton
|
this.webchatGlobalNonpersistedState.showWebchatButton) &&
|
||||||
|
!this.shouldHideWebchatButtonOnPage
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
@ -91,8 +105,21 @@ export default {
|
||||||
this.globalAlertMessages.push(alertToPush);
|
this.globalAlertMessages.push(alertToPush);
|
||||||
},
|
},
|
||||||
webchatClicked(event) {
|
webchatClicked(event) {
|
||||||
event.preventDefault(); // avoid validation firing
|
event.preventDefault();
|
||||||
this.launchWebchat();
|
this.launchWebchat();
|
||||||
|
// Only set sierraChatOpen if Sierra experiment is active
|
||||||
|
if (this.webchatGlobalNonpersistedState.shouldLaunchSierra) {
|
||||||
|
this.sierraChatOpen = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
syncSierraExperimentFlag() {
|
||||||
|
const experiments = store.getters.applicationUser.experiments;
|
||||||
|
const sierraExp = experiments?.find(
|
||||||
|
(exp) =>
|
||||||
|
exp.universeName === "CONTENT_FMG_SierraWebchat" &&
|
||||||
|
exp.settings?.UseSierraChat === "true"
|
||||||
|
);
|
||||||
|
this.webchatGlobalNonpersistedState.shouldLaunchSierra = !!sierraExp;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
|
|
@ -101,6 +128,7 @@ export default {
|
||||||
progressBar,
|
progressBar,
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.syncSierraExperimentFlag();
|
||||||
// Check if alert event is on the bus
|
// Check if alert event is on the bus
|
||||||
const alertEvent = eventBus.readAndPopEventFromBus(
|
const alertEvent = eventBus.readAndPopEventFromBus(
|
||||||
globalEvents.Categories.GLOBAL_ALERT,
|
globalEvents.Categories.GLOBAL_ALERT,
|
||||||
|
|
@ -122,6 +150,47 @@ export default {
|
||||||
unknownAlertEvent.displayAlert = true;
|
unknownAlertEvent.displayAlert = true;
|
||||||
this.globalAlertMessages.push(unknownAlertEvent);
|
this.globalAlertMessages.push(unknownAlertEvent);
|
||||||
}
|
}
|
||||||
|
// Listen for Sierra chat open/close events from sierra-webchat
|
||||||
|
this._handleSierraChatVisibility = (event) => {
|
||||||
|
this.sierraChatOpen = !!(event.detail && event.detail.open);
|
||||||
|
if (this.sierraChatOpen) {
|
||||||
|
this.isSalesforceTransferInProgress = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
window.addEventListener("sierra-chat-visibility", this._handleSierraChatVisibility);
|
||||||
|
|
||||||
|
// Listen for Salesforce chat open/close events from salesforce-webchat
|
||||||
|
this._handleSalesforceChatVisibility = (event) => {
|
||||||
|
this.salesforceChatOpen = !!(event.detail && event.detail.open === true);
|
||||||
|
};
|
||||||
|
window.addEventListener("salesforce-chat-visibility", this._handleSalesforceChatVisibility);
|
||||||
|
|
||||||
|
// Listen for transfer event to set transfer-in-progress flag
|
||||||
|
this._handleSierraToSalesforceTransfer = () => {
|
||||||
|
this.isSalesforceTransferInProgress = true;
|
||||||
|
};
|
||||||
|
window.addEventListener("sierra-chat-transfer", this._handleSierraToSalesforceTransfer);
|
||||||
|
|
||||||
|
// Reset transfer flag when Salesforce chat opens
|
||||||
|
this._handleSalesforceChatOpened = (event) => {
|
||||||
|
if (event.detail && event.detail.open === true) {
|
||||||
|
this.isSalesforceTransferInProgress = false;
|
||||||
|
this.salesforceChatOpen = true;
|
||||||
|
} else {
|
||||||
|
this.salesforceChatOpen = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
window.addEventListener("salesforce-chat-visibility", this._handleSalesforceChatOpened);
|
||||||
|
},
|
||||||
|
beforeUnmount() {
|
||||||
|
window.removeEventListener("sierra-chat-closed", this._handleSierraChatClosed);
|
||||||
|
window.removeEventListener("sierra-chat-visibility", this._handleSierraChatVisibility);
|
||||||
|
window.removeEventListener(
|
||||||
|
"salesforce-chat-visibility",
|
||||||
|
this._handleSalesforceChatVisibility
|
||||||
|
);
|
||||||
|
window.removeEventListener("sierra-chat-transfer", this._handleSierraToSalesforceTransfer);
|
||||||
|
window.removeEventListener("salesforce-chat-visibility", this._handleSalesforceChatOpened);
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@ const webchatGlobalNonpersistedState = reactive({
|
||||||
export const webchatHelper = () => {
|
export const webchatHelper = () => {
|
||||||
function launchWebchat() {
|
function launchWebchat() {
|
||||||
if (webchatGlobalNonpersistedState.shouldLaunchSierra) {
|
if (webchatGlobalNonpersistedState.shouldLaunchSierra) {
|
||||||
// do sierra logic here
|
window.dispatchEvent(new CustomEvent("launch-sierra-webchat")); // launches the sierra chat
|
||||||
} else {
|
} else {
|
||||||
window.embedded_svc.bootstrapEmbeddedService(); // launches the salesForce prechat form
|
window.embedded_svc.bootstrapEmbeddedService(); // launches the salesForce prechat form
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -57,7 +57,7 @@
|
||||||
@ForwardClicked="forwardButtonAction" />
|
@ForwardClicked="forwardButtonAction" />
|
||||||
|
|
||||||
<textBlock
|
<textBlock
|
||||||
class="mb-5"
|
class="mb-5 disclaimer-block"
|
||||||
cmsWidgetName="DisclaimerCopyWidget"
|
cmsWidgetName="DisclaimerCopyWidget"
|
||||||
typeStyle="caption" />
|
typeStyle="caption" />
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -212,3 +212,10 @@ export default {
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.disclaimer-block {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -62,7 +62,7 @@ import { saveSession } from "@/helpers/heritage-integration/order-helper.js";
|
||||||
import baseMixin from "@/mixins/base-mixin.js";
|
import baseMixin from "@/mixins/base-mixin.js";
|
||||||
import { queryStrings } from "@/constants/query-strings";
|
import { queryStrings } from "@/constants/query-strings";
|
||||||
import { nextTick } from "vue";
|
import { nextTick } from "vue";
|
||||||
import { consumeQueryFromStash } from "@/router/methods/helpers/querystring-stash";
|
import { peekQueryFromStash } from "@/router/methods/helpers/querystring-stash";
|
||||||
|
|
||||||
// Define Validation Rules
|
// Define Validation Rules
|
||||||
defineRule("zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED));
|
defineRule("zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED));
|
||||||
|
|
@ -100,7 +100,7 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
const zip =
|
const zip =
|
||||||
consumeQueryFromStash(queryStrings.ZIP_CODE) ??
|
peekQueryFromStash(queryStrings.ZIP_CODE) ??
|
||||||
store.getters.order.serviceLocation.zipCode;
|
store.getters.order.serviceLocation.zipCode;
|
||||||
|
|
||||||
var vinByAddressPromise;
|
var vinByAddressPromise;
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="alert fade show my-2 py-2 border-0 alert-info" role="alert">
|
<div class="alert fade show my-2 py-2 border-0 alert-info" role="alert">
|
||||||
<component :is="'script'" src="https://js.afterpay.com/afterpay-1.x.js" async></component>
|
<component
|
||||||
|
:is="'script'"
|
||||||
|
src="https://js.squarecdn.com/square-marketplace.js"
|
||||||
|
async></component>
|
||||||
<div class="my-4 alert-heading text-center">
|
<div class="my-4 alert-heading text-center">
|
||||||
<span v-html="afterpayHeaderCopy" />
|
<span v-html="afterpayHeaderCopy" />
|
||||||
<span class="afterpay-amount">{{ this.afterpayPrice }}</span>
|
<span class="afterpay-amount">{{ this.afterpayPrice }}</span>
|
||||||
|
|
@ -10,7 +13,7 @@
|
||||||
<a
|
<a
|
||||||
id="afterpay-learnmore"
|
id="afterpay-learnmore"
|
||||||
href="#"
|
href="#"
|
||||||
data-afterpay-modal="en_US-safelite"
|
data-afterpay-modal="en_US"
|
||||||
data-bind="click:afterpayLearnMore"
|
data-bind="click:afterpayLearnMore"
|
||||||
class="afterpay-learn-more">
|
class="afterpay-learn-more">
|
||||||
<img :src="infoIcon" alt="Info Icon" class="info-icon" />
|
<img :src="infoIcon" alt="Info Icon" class="info-icon" />
|
||||||
|
|
|
||||||
|
|
@ -919,6 +919,9 @@ export default {
|
||||||
|
|
||||||
.payment-method-question {
|
.payment-method-question {
|
||||||
padding: 0 1.5rem;
|
padding: 0 1.5rem;
|
||||||
|
.question-text span {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui-block {
|
.ui-block {
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="alert fade show my-2 py-2 border-0 alert-info" role="alert">
|
<div class="alert fade show my-2 py-2 border-0 alert-info" role="alert">
|
||||||
<component :is="'script'" src="https://js.afterpay.com/afterpay-1.x.js" async></component>
|
<component
|
||||||
|
:is="'script'"
|
||||||
|
src="https://js.squarecdn.com/square-marketplace.js"
|
||||||
|
async></component>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="mx-4 my-0 alert-heading text-center"
|
class="mx-4 my-0 alert-heading text-center"
|
||||||
|
|
@ -17,7 +20,7 @@
|
||||||
<a
|
<a
|
||||||
id="afterpay-learnmore"
|
id="afterpay-learnmore"
|
||||||
href="#"
|
href="#"
|
||||||
data-afterpay-modal="en_US-safelite"
|
data-afterpay-modal="en_US"
|
||||||
data-bind="click:afterpayLearnMore">
|
data-bind="click:afterpayLearnMore">
|
||||||
{{ modalCopy }}
|
{{ modalCopy }}
|
||||||
</a>
|
</a>
|
||||||
|
|
|
||||||
|
|
@ -2,35 +2,14 @@
|
||||||
<transition name="fade" mode="out-in">
|
<transition name="fade" mode="out-in">
|
||||||
<div class="mobile-location-questions">
|
<div class="mobile-location-questions">
|
||||||
<div class="text-center" :id="componentId">
|
<div class="text-center" :id="componentId">
|
||||||
<label
|
|
||||||
for="mobileLocationLinkPromptId"
|
|
||||||
:aria-label="mobileLocationLinkPromptText"
|
|
||||||
class="form-label fw-bold w-100 ps-4 pe-4 pt-4 text-black"
|
|
||||||
v-html="mobileLocationLinkPromptText"></label>
|
|
||||||
<div class="update-mobile-location-text-link">
|
|
||||||
<textLink
|
|
||||||
ref="mobileLocationLink"
|
|
||||||
id="mobileLocationLinkPromptId"
|
|
||||||
linkType="text"
|
|
||||||
:text="mobileLocationLinkText"
|
|
||||||
href="#!"
|
|
||||||
@click-event="toggleMobileLocation" />
|
|
||||||
</div>
|
|
||||||
<div v-show="errorMessage" class="row my-1 form-test-error">
|
|
||||||
<span
|
|
||||||
class="d-inline-flex small mt-0 center-error-message"
|
|
||||||
aria-atomic="true"
|
|
||||||
aria-live="polite">
|
|
||||||
{{ errorMessage }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<textBlock
|
<textBlock
|
||||||
v-if="mobileFeeApplies"
|
v-if="mobileFeeApplies"
|
||||||
:customText="mobileFeeText"
|
:customText="mobileFeeText"
|
||||||
cmsWidgetName="MobileFeeDisclaimerWidget"
|
cmsWidgetName="MobileFeeDisclaimerWidget"
|
||||||
typeStyle="caption" />
|
typeStyle="caption"
|
||||||
|
class="ps-4 pe-4 mt-4" />
|
||||||
</div>
|
</div>
|
||||||
<div v-if="isMobileLocationOpened" class="address-questions-container">
|
<div v-if="this.modelValue.isMobileSelected" class="address-questions-container">
|
||||||
<div v-html="headerText" class="HeaderText" />
|
<div v-html="headerText" class="HeaderText" />
|
||||||
<addressQuestions
|
<addressQuestions
|
||||||
ref="addressQuestions"
|
ref="addressQuestions"
|
||||||
|
|
@ -64,7 +43,6 @@
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
// Components
|
// Components
|
||||||
import textLink from "@/ux-components/text-link/text-link";
|
|
||||||
import textBlock from "@/digital-components/text-block/text-block";
|
import textBlock from "@/digital-components/text-block/text-block";
|
||||||
import alert from "@/ux-components/alert/alert";
|
import alert from "@/ux-components/alert/alert";
|
||||||
import addressQuestions from "@/fmg-components/address-questions/address-questions";
|
import addressQuestions from "@/fmg-components/address-questions/address-questions";
|
||||||
|
|
@ -97,7 +75,6 @@ export default {
|
||||||
return {
|
return {
|
||||||
internalModel: deepClone(this.modelValue),
|
internalModel: deepClone(this.modelValue),
|
||||||
displayInvalidZipAlert: false,
|
displayInvalidZipAlert: false,
|
||||||
isMobileLocationOpened: false,
|
|
||||||
displayMismatchStateAndZipAlert: false,
|
displayMismatchStateAndZipAlert: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
@ -159,15 +136,6 @@ export default {
|
||||||
mobileFeeApplies: Boolean,
|
mobileFeeApplies: Boolean,
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
mobileLocationLinkPromptText() {
|
|
||||||
return this.getCmsContent(this.linkWidgetName, "HeaderText");
|
|
||||||
},
|
|
||||||
mobileLocationLinkText() {
|
|
||||||
if (this.isMobileAddressComplete()) {
|
|
||||||
return `${this.addressModel.streetAddress}\n${this.addressModel.city}, ${this.addressModel.state} ${this.addressModel.zipCode}`;
|
|
||||||
}
|
|
||||||
return this.getCmsContent(this.linkWidgetName, "BodyText");
|
|
||||||
},
|
|
||||||
mobileFeeText() {
|
mobileFeeText() {
|
||||||
const cmsContentText = this.getCmsContent("MobileFeeDisclaimerWidget", "Text");
|
const cmsContentText = this.getCmsContent("MobileFeeDisclaimerWidget", "Text");
|
||||||
return cmsContentText.replaceAll("{custom:mobileFee}", this.mobileFee);
|
return cmsContentText.replaceAll("{custom:mobileFee}", this.mobileFee);
|
||||||
|
|
@ -208,25 +176,6 @@ export default {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
isMobileAddressComplete() {
|
|
||||||
return (
|
|
||||||
this.addressModel.streetAddress &&
|
|
||||||
this.addressModel.streetAddress !== "" &&
|
|
||||||
this.addressModel.city &&
|
|
||||||
this.addressModel.city !== "" &&
|
|
||||||
this.addressModel.state &&
|
|
||||||
this.addressModel.state !== "" &&
|
|
||||||
this.addressModel.zipCode &&
|
|
||||||
this.addressModel.zipCode !== "" &&
|
|
||||||
this.internalModel.isVehicleProtected !== null
|
|
||||||
);
|
|
||||||
},
|
|
||||||
getIsMobleLocationOpened() {
|
|
||||||
if (this.isServiceAddressFromStoreAvailable) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
},
|
|
||||||
setMobileLocationInvalid(isFormInvalid) {
|
setMobileLocationInvalid(isFormInvalid) {
|
||||||
this.$emit("set-mobile-location-invalid", isFormInvalid);
|
this.$emit("set-mobile-location-invalid", isFormInvalid);
|
||||||
},
|
},
|
||||||
|
|
@ -300,9 +249,6 @@ export default {
|
||||||
// update the page level model
|
// update the page level model
|
||||||
this.$emit("setMobileLocation", this.internalModel);
|
this.$emit("setMobileLocation", this.internalModel);
|
||||||
},
|
},
|
||||||
toggleMobileLocation() {
|
|
||||||
this.isMobileLocationOpened = !this.isMobileLocationOpened;
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
internalModel: {
|
internalModel: {
|
||||||
|
|
@ -324,7 +270,6 @@ export default {
|
||||||
addressQuestions,
|
addressQuestions,
|
||||||
vehicleProtectedQuestion,
|
vehicleProtectedQuestion,
|
||||||
textBlock,
|
textBlock,
|
||||||
textLink,
|
|
||||||
alert,
|
alert,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
@ -350,14 +295,11 @@ export default {
|
||||||
.update-mobile-location-text-link {
|
.update-mobile-location-text-link {
|
||||||
white-space: pre-line;
|
white-space: pre-line;
|
||||||
}
|
}
|
||||||
.address-questions-container {
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-black {
|
.text-black {
|
||||||
color: $black;
|
color: $black;
|
||||||
}
|
}
|
||||||
.HeaderText {
|
.HeaderText {
|
||||||
|
margin-top: 1rem;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
line-height: 1.625rem;
|
line-height: 1.625rem;
|
||||||
|
|
|
||||||
|
|
@ -469,10 +469,9 @@ describe("service-location.vue", () => {
|
||||||
zipCode: "43054",
|
zipCode: "43054",
|
||||||
},
|
},
|
||||||
isVehicleProtected: true,
|
isVehicleProtected: true,
|
||||||
isMobileSelected: false,
|
isMobileSelected: true,
|
||||||
};
|
};
|
||||||
|
|
||||||
//wrapper.vm.closeModalAction = jest.fn();
|
|
||||||
// Act
|
// Act
|
||||||
|
|
||||||
// Trigger the event
|
// Trigger the event
|
||||||
|
|
@ -1436,6 +1435,7 @@ function setupMocks({ mountOptionsMockData = {} }) {
|
||||||
const wrapper = shallowMount(serviceLocation, mountOptions);
|
const wrapper = shallowMount(serviceLocation, mountOptions);
|
||||||
wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
|
wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
|
||||||
wrapper.vm.$refs.mobileLocationQuestions.isMobileAddressComplete = jest.fn();
|
wrapper.vm.$refs.mobileLocationQuestions.isMobileAddressComplete = jest.fn();
|
||||||
|
wrapper.vm.$refs.mobileLocationQuestions.resetAlerts = jest.fn();
|
||||||
wrapper.vm.$refs.mobileLocationQuestions.openModal = jest.fn();
|
wrapper.vm.$refs.mobileLocationQuestions.openModal = jest.fn();
|
||||||
return { wrapper, apiPromise };
|
return { wrapper, apiPromise };
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -174,13 +174,20 @@ const MOBILE_FEE_PART_TYPE = "MOBILE FEE";
|
||||||
|
|
||||||
// DEFINE VALIDATION RULES
|
// DEFINE VALIDATION RULES
|
||||||
defineRule("mobile-location-required", (value) => {
|
defineRule("mobile-location-required", (value) => {
|
||||||
|
const addressQuestionsValues = Object.values(
|
||||||
|
[
|
||||||
|
value.addressQuestions.streetAddress,
|
||||||
|
value.addressQuestions.city,
|
||||||
|
value.isVehicleProtected,
|
||||||
|
] || {}
|
||||||
|
);
|
||||||
|
const filledFields = addressQuestionsValues.filter(
|
||||||
|
(val) => val !== null && val !== undefined && val !== ""
|
||||||
|
);
|
||||||
if (
|
if (
|
||||||
value.isMobileSelected &&
|
value.isMobileSelected &&
|
||||||
(!value.addressQuestions.streetAddress ||
|
filledFields.length > 0 &&
|
||||||
!value.addressQuestions.city ||
|
filledFields.length < addressQuestionsValues.length
|
||||||
!value.addressQuestions.state ||
|
|
||||||
!value.addressQuestions.zipCode ||
|
|
||||||
!value.isVehicleProtected)
|
|
||||||
) {
|
) {
|
||||||
return errorMessages.MOBILE_LOCATION_REQUIRED;
|
return errorMessages.MOBILE_LOCATION_REQUIRED;
|
||||||
}
|
}
|
||||||
|
|
@ -305,9 +312,7 @@ export default {
|
||||||
zipCode: this.zipCode,
|
zipCode: this.zipCode,
|
||||||
},
|
},
|
||||||
isVehicleProtected: this.isVehicleProtected,
|
isVehicleProtected: this.isVehicleProtected,
|
||||||
isMobileSelected:
|
isMobileSelected: this.selectedAppointmentType == AppointmentTypeStrings.MOBILE,
|
||||||
this.selectedAppointmentType == AppointmentTypeStrings.MOBILE &&
|
|
||||||
!this.getIsMobileLocationOpened(),
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
@ -758,18 +763,6 @@ export default {
|
||||||
setMobileLocationInValid(isMobileLocationInValid) {
|
setMobileLocationInValid(isMobileLocationInValid) {
|
||||||
this.isMobileAddressValid = !isMobileLocationInValid;
|
this.isMobileAddressValid = !isMobileLocationInValid;
|
||||||
},
|
},
|
||||||
displayMobileAddressQuestion(openMobileLocation) {
|
|
||||||
var mobileLocationQuestionsRef = this.$refs.mobileLocationQuestions;
|
|
||||||
var isMobileAddressComplete = mobileLocationQuestionsRef?.isMobileAddressComplete;
|
|
||||||
if (isMobileAddressComplete?.()) {
|
|
||||||
mobileLocationQuestionsRef.isMobileLocationOpened = false;
|
|
||||||
} else {
|
|
||||||
mobileLocationQuestionsRef.isMobileLocationOpened = openMobileLocation;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
getIsMobileLocationOpened() {
|
|
||||||
return this.$refs.mobileLocationQuestions?.isMobileLocationOpened;
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
zipCode: {
|
zipCode: {
|
||||||
|
|
@ -794,10 +787,18 @@ export default {
|
||||||
this.selectedProvider = new Provider(
|
this.selectedProvider = new Provider(
|
||||||
this.shopProviderData.mobileProviderNumber
|
this.shopProviderData.mobileProviderNumber
|
||||||
);
|
);
|
||||||
this.displayMobileAddressQuestion(true);
|
if (this.zipCode == this.getServiceZipCodeFromStore()) {
|
||||||
|
//restore mobile address from store in case user make changes to address but not commit it.
|
||||||
|
this.streetAddress = this.getServiceAddressFromStore();
|
||||||
|
this.apartmentNumberOrBusinessName = this.getServiceAddress2FromStore();
|
||||||
|
this.city = this.getServiceCityFromStore();
|
||||||
|
this.isVehicleProtected = this.getIsVehicleProtectedFromStore();
|
||||||
|
} else {
|
||||||
|
this.resetMobileLocation();
|
||||||
|
}
|
||||||
|
this.$refs.mobileLocationQuestions.resetAlerts();
|
||||||
} else {
|
} else {
|
||||||
this.selectedProvider = new Provider();
|
this.selectedProvider = new Provider();
|
||||||
this.displayMobileAddressQuestion(false);
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -30,15 +30,16 @@ import { getFunnelCookie } from "@/helpers/heritage-integration/cookie-helper";
|
||||||
import { routeData } from "@/router/constants/routes";
|
import { routeData } from "@/router/constants/routes";
|
||||||
import { getQuerystringParameter } from "@/helpers/querystring-helper";
|
import { getQuerystringParameter } from "@/helpers/querystring-helper";
|
||||||
import { Variables } from "../constants/analytics";
|
import { Variables } from "../constants/analytics";
|
||||||
|
import router from "@/router";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
methods: {
|
methods: {
|
||||||
getPageName() {
|
getPageName() {
|
||||||
return getPageNameByQueryString();
|
return getPageNameFromRouter();
|
||||||
},
|
},
|
||||||
|
|
||||||
async logPageView(pageEvent) {
|
async logPageView(pageEvent) {
|
||||||
const currentPageName = getPageNameByQueryString();
|
const currentPageName = getPageNameFromRouter();
|
||||||
await this.validateSession();
|
await this.validateSession();
|
||||||
|
|
||||||
const submittedOrder = baseMixin.methods.getSubmittedOrder();
|
const submittedOrder = baseMixin.methods.getSubmittedOrder();
|
||||||
|
|
@ -71,7 +72,7 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
async logCustomEvent(category, action, label, value) {
|
async logCustomEvent(category, action, label, value) {
|
||||||
const currentPageName = getPageNameByQueryString();
|
const currentPageName = getPageNameFromRouter();
|
||||||
await this.validateSession();
|
await this.validateSession();
|
||||||
|
|
||||||
const refSequenceNum =
|
const refSequenceNum =
|
||||||
|
|
@ -100,8 +101,15 @@ export default {
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
|
||||||
async pushEventToGA(category, action, label, pushToLogApp = false, valueToLogType = null) {
|
async pushEventToGA(
|
||||||
const currentPageName = getPageNameByQueryString();
|
category,
|
||||||
|
action,
|
||||||
|
label,
|
||||||
|
pushToLogApp = false,
|
||||||
|
valueToLogType = null,
|
||||||
|
value = null
|
||||||
|
) {
|
||||||
|
const currentPageName = getPageNameFromRouter();
|
||||||
const labelToLog = getValueToLog(label, valueToLogType);
|
const labelToLog = getValueToLog(label, valueToLogType);
|
||||||
|
|
||||||
const eventToBePushed = {
|
const eventToBePushed = {
|
||||||
|
|
@ -109,8 +117,8 @@ export default {
|
||||||
category: category,
|
category: category,
|
||||||
action: action,
|
action: action,
|
||||||
label: labelToLog,
|
label: labelToLog,
|
||||||
value: undefined,
|
value: value ?? undefined,
|
||||||
path: `/fmg/?${queryStrings.FMG_PAGE}=${currentPageName}`,
|
path: `/fmg/${currentPageName}`,
|
||||||
};
|
};
|
||||||
|
|
||||||
pushToDataLayerIfDefined(eventToBePushed);
|
pushToDataLayerIfDefined(eventToBePushed);
|
||||||
|
|
@ -120,15 +128,21 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
async pushEventForChatsToGA(category, action, label, pushToLogApp = false) {
|
||||||
|
const currentPageName = getPageNameFromRouter();
|
||||||
|
const value = `2.0_${currentPageName}`;
|
||||||
|
await this.pushEventToGA(category, action, label, pushToLogApp, null, value);
|
||||||
|
},
|
||||||
|
|
||||||
async pushVariableToDataLayer(data) {
|
async pushVariableToDataLayer(data) {
|
||||||
pushToDataLayerIfDefined(data);
|
pushToDataLayerIfDefined(data);
|
||||||
},
|
},
|
||||||
|
|
||||||
async pushPageViewToGA() {
|
async pushPageViewToGA() {
|
||||||
const currentPageName = getPageNameByQueryString();
|
const currentPageName = getPageNameFromRouter();
|
||||||
const pageViewEvent = {
|
const pageViewEvent = {
|
||||||
event: GaEvents.PAGE_VIEW_EVENT,
|
event: GaEvents.PAGE_VIEW_EVENT,
|
||||||
pagePath: `/fmg/?${queryStrings.FMG_PAGE}=${currentPageName}`,
|
pagePath: `/fmg/${currentPageName}`,
|
||||||
pageTitle: currentPageName,
|
pageTitle: currentPageName,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -790,13 +804,14 @@ function pushToDataLayerIfDefined(data) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function getPageNameByQueryString() {
|
function getPageNameFromRouter() {
|
||||||
const params = new URLSearchParams(location.search);
|
if (
|
||||||
|
router &&
|
||||||
if (params.has(queryStrings.FMG_PAGE)) {
|
router.currentRoute &&
|
||||||
return params.get(queryStrings.FMG_PAGE);
|
router.currentRoute.value &&
|
||||||
} else {
|
router.currentRoute.value.name
|
||||||
return "";
|
) {
|
||||||
|
return router.currentRoute.value.name;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -151,7 +151,7 @@ describe("analyticsMixin.js", () => {
|
||||||
action: "action",
|
action: "action",
|
||||||
label: "label",
|
label: "label",
|
||||||
value: undefined,
|
value: undefined,
|
||||||
path: "/fmg/?fmgPage=",
|
path: "/fmg/mockedPageName",
|
||||||
});
|
});
|
||||||
|
|
||||||
// Act
|
// Act
|
||||||
|
|
@ -172,7 +172,7 @@ describe("analyticsMixin.js", () => {
|
||||||
action: "action",
|
action: "action",
|
||||||
label: "33333",
|
label: "33333",
|
||||||
value: undefined,
|
value: undefined,
|
||||||
path: "/fmg/?fmgPage=",
|
path: "/fmg/mockedPageName",
|
||||||
});
|
});
|
||||||
|
|
||||||
const mockData = {
|
const mockData = {
|
||||||
|
|
@ -211,7 +211,7 @@ describe("analyticsMixin.js", () => {
|
||||||
action: "action",
|
action: "action",
|
||||||
label: "111",
|
label: "111",
|
||||||
value: undefined,
|
value: undefined,
|
||||||
path: "/fmg/?fmgPage=",
|
path: "/fmg/mockedPageName",
|
||||||
});
|
});
|
||||||
|
|
||||||
const mockData = {
|
const mockData = {
|
||||||
|
|
@ -1048,3 +1048,11 @@ describe("analyticsMixin.js", () => {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
jest.mock("@/router", () => ({
|
||||||
|
currentRoute: {
|
||||||
|
value: {
|
||||||
|
name: "mockedPageName",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
|
||||||
|
|
@ -14,6 +14,7 @@ import { checkLogParam } from "@/helpers/debug-log-helper";
|
||||||
import { debugLog } from "@/helpers/debug-log-helper";
|
import { debugLog } from "@/helpers/debug-log-helper";
|
||||||
import { handleHeritageReturn } from "@/router/methods/helpers/handle-heritage-return";
|
import { handleHeritageReturn } from "@/router/methods/helpers/handle-heritage-return";
|
||||||
import { isVirtualRoute } from "@/router/methods/helpers/is-virtual-route";
|
import { isVirtualRoute } from "@/router/methods/helpers/is-virtual-route";
|
||||||
|
import router from "@/router";
|
||||||
|
|
||||||
export async function beforeEach(to, from) {
|
export async function beforeEach(to, from) {
|
||||||
try {
|
try {
|
||||||
|
|
@ -49,6 +50,9 @@ export async function beforeEach(to, from) {
|
||||||
const exceptionPages = [FUNNEL_START_PAGE.name, routeData.CONFIRMATION.name];
|
const exceptionPages = [FUNNEL_START_PAGE.name, routeData.CONFIRMATION.name];
|
||||||
|
|
||||||
if (!exceptionPages.some((name) => to.name === name) && !isVirtualRoute(to.name)) {
|
if (!exceptionPages.some((name) => to.name === name) && !isVirtualRoute(to.name)) {
|
||||||
|
router.push({
|
||||||
|
name: routeData.CONFIRMATION.name,
|
||||||
|
});
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,17 +1,19 @@
|
||||||
import analyticsMixin from "@/mixins/analytics-mixin";
|
import analyticsMixin from "@/mixins/analytics-mixin";
|
||||||
import { routeData } from "@/router/constants/routes";
|
import { routeData } from "@/router/constants/routes";
|
||||||
import router from "@/router";
|
import router from "@/router";
|
||||||
|
import store from "@/store";
|
||||||
|
import { storeActions } from "@/constants/store-actions";
|
||||||
|
import { deleteFunnelCookie } from "@/helpers/heritage-integration/cookie-helper";
|
||||||
|
|
||||||
export async function bailout(errorPayload, forceRestart = false) {
|
export async function bailout(errorPayload, forceRestart = false) {
|
||||||
|
if (forceRestart) {
|
||||||
|
await store.dispatch(storeActions.RESET_STATE);
|
||||||
|
deleteFunnelCookie();
|
||||||
|
}
|
||||||
|
|
||||||
analyticsMixin.methods.pushPageErrorToDataLayer(errorPayload);
|
analyticsMixin.methods.pushPageErrorToDataLayer(errorPayload);
|
||||||
|
|
||||||
if (forceRestart) {
|
router.push({
|
||||||
router.push({
|
name: routeData.ERROR.name,
|
||||||
name: routeData.RESTART.name,
|
});
|
||||||
});
|
|
||||||
} else {
|
|
||||||
router.push({
|
|
||||||
name: routeData.ERROR.name,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
import { reactive } from "vue";
|
import { reactive } from "vue";
|
||||||
|
import { debugLog } from "@/helpers/debug-log-helper";
|
||||||
|
|
||||||
const queryStash = reactive({
|
const queryStash = reactive({
|
||||||
queries: [],
|
queries: [],
|
||||||
|
|
@ -27,10 +28,18 @@ export function stashAllQueries(toRoute) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function getStashedQuery(key) {
|
function getStashedQuery(key) {
|
||||||
|
debugLog(`Fetching querystring with key:`, key);
|
||||||
const match = queryStash.queries.find(
|
const match = queryStash.queries.find(
|
||||||
(entry) => entry?.key?.toLowerCase() === key?.toLowerCase()
|
(entry) => entry?.key?.toLowerCase() === key?.toLowerCase()
|
||||||
);
|
);
|
||||||
|
|
||||||
|
if (match) {
|
||||||
|
debugLog(`Found result:`, match.value);
|
||||||
|
debugLog(`Already consumed:`, match.used);
|
||||||
|
} else {
|
||||||
|
debugLog(`Found no result`);
|
||||||
|
}
|
||||||
|
|
||||||
return match;
|
return match;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,7 @@ import { routeData } from "@/router/constants/routes";
|
||||||
import { consumeReferralQuerystrings } from "@/router/methods/helpers/consume-referral-info";
|
import { consumeReferralQuerystrings } from "@/router/methods/helpers/consume-referral-info";
|
||||||
import { initializeFromQueryStrings } from "@/router/methods/helpers/initialize-from-querystrings";
|
import { initializeFromQueryStrings } from "@/router/methods/helpers/initialize-from-querystrings";
|
||||||
import { stashAllQueries } from "@/router/methods/helpers/querystring-stash";
|
import { stashAllQueries } from "@/router/methods/helpers/querystring-stash";
|
||||||
|
import { queryStrings } from "@/constants/query-strings";
|
||||||
import store from "@/store";
|
import store from "@/store";
|
||||||
|
|
||||||
export async function landingBeforeEnter(to, from) {
|
export async function landingBeforeEnter(to, from) {
|
||||||
|
|
@ -21,9 +22,10 @@ export async function landingBeforeEnter(to, from) {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
// If a session is still in memory, go to return-user.
|
const fromHeritage = to.query[queryStrings.FROM_HERITAGE];
|
||||||
if (store.getters.vehicle?.year > 0) {
|
|
||||||
console.log(`trying to redirect!`);
|
// If a session is still in memory and not loading a save quote, go to return-user.
|
||||||
|
if (store.getters.vehicle?.year > 0 && !fromHeritage) {
|
||||||
return {
|
return {
|
||||||
name: routeData.RETURN_USER.name,
|
name: routeData.RETURN_USER.name,
|
||||||
replace: true,
|
replace: true,
|
||||||
|
|
|
||||||
9
src/router/methods/route-logic/payment-method.js
Normal file
9
src/router/methods/route-logic/payment-method.js
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
import { routeData } from "@/router/constants/routes";
|
||||||
|
import router from "@/router";
|
||||||
|
|
||||||
|
export async function paymentMethodBeforeEnter(to, from) {
|
||||||
|
// Refresh page when navigating back from payment to avoid iframe issues.
|
||||||
|
if (from.name === routeData.PAYMENT.name) {
|
||||||
|
router.go(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
14
src/router/methods/route-logic/payment.js
Normal file
14
src/router/methods/route-logic/payment.js
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
import store from "@/store";
|
||||||
|
import { storeActions } from "@/constants/store-actions";
|
||||||
|
import { paymentMethods } from "@/constants/payment-method-constants";
|
||||||
|
import { debugLog } from "@/helpers/debug-log-helper";
|
||||||
|
|
||||||
|
export async function paymentBeforeEnter(to, from) {
|
||||||
|
const piaType = store.getters.order?.payment?.piaType;
|
||||||
|
debugLog(`Entering payment with type =`, piaType);
|
||||||
|
|
||||||
|
if (piaType === paymentMethods.PAYPAL) {
|
||||||
|
debugLog(`Changing to payment type =`, paymentMethods.CREDIT_CARD);
|
||||||
|
await store.dispatch(storeActions.SAVE_PAYMENT_METHOD_CHOICE, paymentMethods.CREDIT_CARD);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -10,6 +10,8 @@ import { loadSessionBeforeEnter } from "@/router/methods/route-logic/load-sessio
|
||||||
import { autoRouteBeforeEnter } from "@/router/methods/route-logic/auto-route";
|
import { autoRouteBeforeEnter } from "@/router/methods/route-logic/auto-route";
|
||||||
import { errorBeforeEnter } from "@/router/methods/route-logic/error";
|
import { errorBeforeEnter } from "@/router/methods/route-logic/error";
|
||||||
import { restartBeforeEnter } from "@/router/methods/route-logic/restart";
|
import { restartBeforeEnter } from "@/router/methods/route-logic/restart";
|
||||||
|
import { paymentMethodBeforeEnter } from "@/router/methods/route-logic/payment-method";
|
||||||
|
import { paymentBeforeEnter } from "@/router/methods/route-logic/payment";
|
||||||
|
|
||||||
export const routes = [
|
export const routes = [
|
||||||
// Non-virtual pages.
|
// Non-virtual pages.
|
||||||
|
|
@ -30,8 +32,8 @@ export const routes = [
|
||||||
createRoute(routeData.SERVICE_LOCATION),
|
createRoute(routeData.SERVICE_LOCATION),
|
||||||
createRoute(routeData.SCHEDULE),
|
createRoute(routeData.SCHEDULE),
|
||||||
createRoute(routeData.CUSTOMER_DETAILS),
|
createRoute(routeData.CUSTOMER_DETAILS),
|
||||||
createRoute(routeData.PAYMENT_METHOD),
|
createRoute(routeData.PAYMENT_METHOD, paymentMethodBeforeEnter),
|
||||||
createRoute(routeData.PAYMENT),
|
createRoute(routeData.PAYMENT, paymentBeforeEnter),
|
||||||
createRoute(routeData.PAYMENT_PIA_RETURN),
|
createRoute(routeData.PAYMENT_PIA_RETURN),
|
||||||
createRoute(routeData.CONFIRMATION),
|
createRoute(routeData.CONFIRMATION),
|
||||||
createRoute(routeData.RETURN_USER),
|
createRoute(routeData.RETURN_USER),
|
||||||
|
|
|
||||||
|
|
@ -963,6 +963,8 @@ export const getters = {
|
||||||
funnelServiceState: state.order.serviceLocation.state,
|
funnelServiceState: state.order.serviceLocation.state,
|
||||||
funnelServiceZipCode: state.order.serviceLocation.zipCode,
|
funnelServiceZipCode: state.order.serviceLocation.zipCode,
|
||||||
funnelServiceZipCodeCtu: state.order.serviceLocation.zipCodeCtu,
|
funnelServiceZipCodeCtu: state.order.serviceLocation.zipCodeCtu,
|
||||||
|
funnelPolicyIsItac: state.order.policy.isItac ? "true" : "false",
|
||||||
|
funnelPolicyIsNoComp: state.order.policy.isNoComp ? "true" : "false",
|
||||||
funnelProviderNumber: state.order.serviceLocation.provider.providerNumber,
|
funnelProviderNumber: state.order.serviceLocation.provider.providerNumber,
|
||||||
funnelParentAccountNumber: state.order.payment.parentAccountNumber,
|
funnelParentAccountNumber: state.order.payment.parentAccountNumber,
|
||||||
funnelReferralType: state.order.payment.isInsurance ? "INSURANCE" : "CASH QUOTE",
|
funnelReferralType: state.order.payment.isInsurance ? "INSURANCE" : "CASH QUOTE",
|
||||||
|
|
@ -1070,33 +1072,6 @@ export const getters = {
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
function getNonFalseValuesOfPropertyInArrayOfObjects(array, propertyName) {
|
|
||||||
return (array ?? []).map((x) => x[propertyName]).filter((x) => x);
|
|
||||||
}
|
|
||||||
|
|
||||||
function getTimeSlotsAdditionalEventData(
|
|
||||||
provisionalTriggers,
|
|
||||||
zipCode,
|
|
||||||
firstAvailableAppointmentDateString,
|
|
||||||
shopAppointmentType
|
|
||||||
) {
|
|
||||||
var numberOfDays = null;
|
|
||||||
if (firstAvailableAppointmentDateString)
|
|
||||||
numberOfDays = getDateDifferenceInDays(
|
|
||||||
new Date().toISOString().split("T")[0],
|
|
||||||
firstAvailableAppointmentDateString
|
|
||||||
);
|
|
||||||
|
|
||||||
if (shopAppointmentType)
|
|
||||||
return `FirstAvailableAppointment:${numberOfDays},Zip:${zipCode},ShopAppointmentType:${shopAppointmentType},ProvisionalTriggers:${provisionalTriggers.join(
|
|
||||||
","
|
|
||||||
)}`;
|
|
||||||
else
|
|
||||||
return `FirstAvailableAppointment:${numberOfDays},Zip:${zipCode},ProvisionalTriggers:${provisionalTriggers.join(
|
|
||||||
","
|
|
||||||
)}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Export Actions
|
// Export Actions
|
||||||
export const actions = {
|
export const actions = {
|
||||||
// Vehicle API Actions
|
// Vehicle API Actions
|
||||||
|
|
@ -1497,7 +1472,7 @@ export const actions = {
|
||||||
parentAccountNumber,
|
parentAccountNumber,
|
||||||
}
|
}
|
||||||
) {
|
) {
|
||||||
if (!pageName) {
|
if (!pageName || !category) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2057,20 +2032,31 @@ export const actions = {
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
return globalMethods.callHttpClient({
|
let hasCalled = timeSlotCallFlags.shop;
|
||||||
|
if (!hasCalled) {
|
||||||
|
timeSlotCallFlags.shop = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
const options = {
|
||||||
method: endpoints.GetShopTimeSlots.method,
|
method: endpoints.GetShopTimeSlots.method,
|
||||||
endpoint: endpoints.GetShopTimeSlots.url,
|
endpoint: endpoints.GetShopTimeSlots.url,
|
||||||
payload: payload,
|
payload: payload,
|
||||||
logApiCall: true,
|
logApiCall: true,
|
||||||
pageNameToLog: pageNameToLog,
|
pageNameToLog: pageNameToLog,
|
||||||
additionalSuccessEventDataHandler: (response) =>
|
};
|
||||||
|
|
||||||
|
// Only set handler if this is the very first call in this session
|
||||||
|
if (!hasCalled) {
|
||||||
|
options.additionalSuccessEventDataHandler = (response) =>
|
||||||
getTimeSlotsAdditionalEventData(
|
getTimeSlotsAdditionalEventData(
|
||||||
response.data.provisionalTriggers,
|
response.data.provisionalTriggers,
|
||||||
order.serviceLocation.zipCode,
|
order.serviceLocation.zipCode,
|
||||||
response.data.days?.[0]?.date,
|
response.data.days?.[0]?.date,
|
||||||
shopAppointmentType
|
shopAppointmentType
|
||||||
),
|
);
|
||||||
});
|
}
|
||||||
|
|
||||||
|
return globalMethods.callHttpClient(options);
|
||||||
},
|
},
|
||||||
|
|
||||||
getMobileTimeSlots(context, { payload: { startDate, endDate }, pageNameToLog }) {
|
getMobileTimeSlots(context, { payload: { startDate, endDate }, pageNameToLog }) {
|
||||||
|
|
@ -2114,19 +2100,30 @@ export const actions = {
|
||||||
zipCode: order.serviceLocation.zipCode,
|
zipCode: order.serviceLocation.zipCode,
|
||||||
};
|
};
|
||||||
|
|
||||||
return globalMethods.callHttpClient({
|
let hasCalled = timeSlotCallFlags.mobile;
|
||||||
|
if (!hasCalled) {
|
||||||
|
timeSlotCallFlags.mobile = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
const options = {
|
||||||
method: endpoints.GetMobileTimeSlots.method,
|
method: endpoints.GetMobileTimeSlots.method,
|
||||||
endpoint: endpoints.GetMobileTimeSlots.url,
|
endpoint: endpoints.GetMobileTimeSlots.url,
|
||||||
payload: payload,
|
payload: payload,
|
||||||
logApiCall: true,
|
logApiCall: true,
|
||||||
pageNameToLog: pageNameToLog,
|
pageNameToLog: pageNameToLog,
|
||||||
additionalSuccessEventDataHandler: (response) =>
|
};
|
||||||
|
|
||||||
|
// Only set handler if this is the very first call in this session
|
||||||
|
if (!hasCalled) {
|
||||||
|
options.additionalSuccessEventDataHandler = (response) =>
|
||||||
getTimeSlotsAdditionalEventData(
|
getTimeSlotsAdditionalEventData(
|
||||||
response.data.provisionalTriggers,
|
response.data.provisionalTriggers,
|
||||||
order.serviceLocation.zipCode,
|
order.serviceLocation.zipCode,
|
||||||
response.data.days?.[0]?.date
|
response.data.days?.[0]?.date
|
||||||
),
|
);
|
||||||
});
|
}
|
||||||
|
|
||||||
|
return globalMethods.callHttpClient(options);
|
||||||
},
|
},
|
||||||
|
|
||||||
getMobilePremiumFee(context, { pageNameToLog }) {
|
getMobilePremiumFee(context, { pageNameToLog }) {
|
||||||
|
|
@ -2190,6 +2187,7 @@ export const actions = {
|
||||||
serverData: lineItems.serverData,
|
serverData: lineItems.serverData,
|
||||||
promos: lineItems.promos,
|
promos: lineItems.promos,
|
||||||
},
|
},
|
||||||
|
coverageStatus: order.payment.insuranceCoverage.coverageStatus ?? "",
|
||||||
},
|
},
|
||||||
logApiCall: true,
|
logApiCall: true,
|
||||||
pageNameToLog: pageNameToLog,
|
pageNameToLog: pageNameToLog,
|
||||||
|
|
@ -3454,100 +3452,6 @@ export default createStore({
|
||||||
actions,
|
actions,
|
||||||
});
|
});
|
||||||
|
|
||||||
// Private Functions
|
|
||||||
|
|
||||||
function getHasRecalibrationPart(state) {
|
|
||||||
return containsRecalParts(state.order.lineItems);
|
|
||||||
}
|
|
||||||
|
|
||||||
function sortArrayOfObjectsByPropertyValue(arrayOfObjects, propertyName) {
|
|
||||||
if (!arrayOfObjects) return null;
|
|
||||||
|
|
||||||
return arrayOfObjects.sort((a, b) => {
|
|
||||||
if (a[propertyName] < b[propertyName]) return -1;
|
|
||||||
else if (a[propertyName] > b[propertyName]) return 1;
|
|
||||||
else return 0;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function convertGlassPieceNamingForApi(glassArray) {
|
|
||||||
if (!glassArray || glassArray.length === 0) return [];
|
|
||||||
|
|
||||||
// check if array already converted. (likely when a session has been saved previously and then reloaded)
|
|
||||||
if (glassArray[0].location !== undefined) {
|
|
||||||
return glassArray;
|
|
||||||
}
|
|
||||||
|
|
||||||
const converted = [];
|
|
||||||
glassArray.forEach((glass) => {
|
|
||||||
converted.push({
|
|
||||||
location: glass.glassLocation,
|
|
||||||
name: glass.glassName,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
return converted;
|
|
||||||
}
|
|
||||||
|
|
||||||
function convertResultsForApi(resultsArray) {
|
|
||||||
if (!resultsArray) return [];
|
|
||||||
const converted = [];
|
|
||||||
resultsArray.forEach((answer) => {
|
|
||||||
converted.push({
|
|
||||||
location: answer.glassLocation,
|
|
||||||
name: answer.glassName,
|
|
||||||
result: answer.result,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
return converted;
|
|
||||||
}
|
|
||||||
|
|
||||||
function convertGlassPieceNamingFromApi(glassArray) {
|
|
||||||
glassArray.forEach((glass) => {
|
|
||||||
glass.glassLocation = glass.glassPiece.location;
|
|
||||||
glass.glassName = glass.glassPiece.name;
|
|
||||||
delete glass.glassPiece;
|
|
||||||
return glass;
|
|
||||||
});
|
|
||||||
return glassArray;
|
|
||||||
}
|
|
||||||
|
|
||||||
function addPricesToLineItems(lineItems, pricingLineItems) {
|
|
||||||
lineItems.forEach((lineItem) => {
|
|
||||||
const lineItemIndex = pricingLineItems.findIndex(
|
|
||||||
(pricingLineItem) => pricingLineItem.partNumber === lineItem.partNumber
|
|
||||||
);
|
|
||||||
|
|
||||||
if (lineItem.childParts) {
|
|
||||||
addPricesToLineItems(lineItem.childParts, pricingLineItems);
|
|
||||||
}
|
|
||||||
|
|
||||||
const pricedLineItem = pricingLineItems.splice(lineItemIndex, 1)[0];
|
|
||||||
lineItem.laborAmount = pricedLineItem.laborAmount;
|
|
||||||
lineItem.sellingPrice = pricedLineItem.sellingPrice;
|
|
||||||
lineItem.kitPrice = pricedLineItem.kitPrice;
|
|
||||||
lineItem.salesTax = pricedLineItem.salesTax;
|
|
||||||
});
|
|
||||||
|
|
||||||
return lineItems;
|
|
||||||
}
|
|
||||||
|
|
||||||
function addTaxesToPricedLineItems(pricedLineItems, taxingLineItems = []) {
|
|
||||||
pricedLineItems.forEach((pricedLineItem) => {
|
|
||||||
const lineItemIndex = taxingLineItems.findIndex(
|
|
||||||
(taxingLineItem) => taxingLineItem.partNumber === pricedLineItem.partNumber
|
|
||||||
);
|
|
||||||
|
|
||||||
if (pricedLineItem.childParts) {
|
|
||||||
addTaxesToPricedLineItems(pricedLineItem.childParts, taxingLineItems);
|
|
||||||
}
|
|
||||||
|
|
||||||
const taxedLineItem = taxingLineItems.splice(lineItemIndex, 1)[0];
|
|
||||||
pricedLineItem.salesTax = taxedLineItem?.salesTax ?? 0;
|
|
||||||
});
|
|
||||||
|
|
||||||
return pricedLineItems;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function mapTaxedLineItemsToStoreFormat(availableLineItems, storeLineItems) {
|
export function mapTaxedLineItemsToStoreFormat(availableLineItems, storeLineItems) {
|
||||||
// clone the lineItems array because what we're passing in is referencing the store directly
|
// clone the lineItems array because what we're passing in is referencing the store directly
|
||||||
const lineItems = deepClone(storeLineItems);
|
const lineItems = deepClone(storeLineItems);
|
||||||
|
|
@ -3655,6 +3559,127 @@ export function getArrayOfAllLineItemsAndChildParts(lineItems) {
|
||||||
return consolidatedLineItemsArray;
|
return consolidatedLineItemsArray;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Private Functions
|
||||||
|
|
||||||
|
function getNonFalseValuesOfPropertyInArrayOfObjects(array, propertyName) {
|
||||||
|
return (array ?? []).map((x) => x[propertyName]).filter((x) => x);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getTimeSlotsAdditionalEventData(
|
||||||
|
provisionalTriggers,
|
||||||
|
zipCode,
|
||||||
|
firstAvailableAppointmentDateString,
|
||||||
|
shopAppointmentType
|
||||||
|
) {
|
||||||
|
var numberOfDays = null;
|
||||||
|
if (firstAvailableAppointmentDateString)
|
||||||
|
numberOfDays = getDateDifferenceInDays(
|
||||||
|
new Date().toISOString().split("T")[0],
|
||||||
|
firstAvailableAppointmentDateString
|
||||||
|
);
|
||||||
|
|
||||||
|
if (shopAppointmentType)
|
||||||
|
return `FirstAvailableAppointment:${numberOfDays},Zip:${zipCode},ShopAppointmentType:${shopAppointmentType},ProvisionalTriggers:${provisionalTriggers.join(
|
||||||
|
","
|
||||||
|
)}`;
|
||||||
|
else
|
||||||
|
return `FirstAvailableAppointment:${numberOfDays},Zip:${zipCode},ProvisionalTriggers:${provisionalTriggers.join(
|
||||||
|
","
|
||||||
|
)}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getHasRecalibrationPart(state) {
|
||||||
|
return containsRecalParts(state.order.lineItems);
|
||||||
|
}
|
||||||
|
|
||||||
|
function sortArrayOfObjectsByPropertyValue(arrayOfObjects, propertyName) {
|
||||||
|
if (!arrayOfObjects) return null;
|
||||||
|
|
||||||
|
return arrayOfObjects.sort((a, b) => {
|
||||||
|
if (a[propertyName] < b[propertyName]) return -1;
|
||||||
|
else if (a[propertyName] > b[propertyName]) return 1;
|
||||||
|
else return 0;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function convertGlassPieceNamingForApi(glassArray) {
|
||||||
|
if (!glassArray || glassArray.length === 0) return [];
|
||||||
|
|
||||||
|
// check if array already converted. (likely when a session has been saved previously and then reloaded)
|
||||||
|
if (glassArray[0].location !== undefined) {
|
||||||
|
return glassArray;
|
||||||
|
}
|
||||||
|
|
||||||
|
const converted = [];
|
||||||
|
glassArray.forEach((glass) => {
|
||||||
|
converted.push({
|
||||||
|
location: glass.glassLocation,
|
||||||
|
name: glass.glassName,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
return converted;
|
||||||
|
}
|
||||||
|
|
||||||
|
function convertResultsForApi(resultsArray) {
|
||||||
|
if (!resultsArray) return [];
|
||||||
|
const converted = [];
|
||||||
|
resultsArray.forEach((answer) => {
|
||||||
|
converted.push({
|
||||||
|
location: answer.glassLocation,
|
||||||
|
name: answer.glassName,
|
||||||
|
result: answer.result,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
return converted;
|
||||||
|
}
|
||||||
|
|
||||||
|
function convertGlassPieceNamingFromApi(glassArray) {
|
||||||
|
glassArray.forEach((glass) => {
|
||||||
|
glass.glassLocation = glass.glassPiece.location;
|
||||||
|
glass.glassName = glass.glassPiece.name;
|
||||||
|
delete glass.glassPiece;
|
||||||
|
return glass;
|
||||||
|
});
|
||||||
|
return glassArray;
|
||||||
|
}
|
||||||
|
|
||||||
|
function addPricesToLineItems(lineItems, pricingLineItems) {
|
||||||
|
lineItems.forEach((lineItem) => {
|
||||||
|
const lineItemIndex = pricingLineItems.findIndex(
|
||||||
|
(pricingLineItem) => pricingLineItem.partNumber === lineItem.partNumber
|
||||||
|
);
|
||||||
|
|
||||||
|
if (lineItem.childParts) {
|
||||||
|
addPricesToLineItems(lineItem.childParts, pricingLineItems);
|
||||||
|
}
|
||||||
|
|
||||||
|
const pricedLineItem = pricingLineItems.splice(lineItemIndex, 1)[0];
|
||||||
|
lineItem.laborAmount = pricedLineItem.laborAmount;
|
||||||
|
lineItem.sellingPrice = pricedLineItem.sellingPrice;
|
||||||
|
lineItem.kitPrice = pricedLineItem.kitPrice;
|
||||||
|
lineItem.salesTax = pricedLineItem.salesTax;
|
||||||
|
});
|
||||||
|
|
||||||
|
return lineItems;
|
||||||
|
}
|
||||||
|
|
||||||
|
function addTaxesToPricedLineItems(pricedLineItems, taxingLineItems = []) {
|
||||||
|
pricedLineItems.forEach((pricedLineItem) => {
|
||||||
|
const lineItemIndex = taxingLineItems.findIndex(
|
||||||
|
(taxingLineItem) => taxingLineItem.partNumber === pricedLineItem.partNumber
|
||||||
|
);
|
||||||
|
|
||||||
|
if (pricedLineItem.childParts) {
|
||||||
|
addTaxesToPricedLineItems(pricedLineItem.childParts, taxingLineItems);
|
||||||
|
}
|
||||||
|
|
||||||
|
const taxedLineItem = taxingLineItems.splice(lineItemIndex, 1)[0];
|
||||||
|
pricedLineItem.salesTax = taxedLineItem?.salesTax ?? 0;
|
||||||
|
});
|
||||||
|
|
||||||
|
return pricedLineItems;
|
||||||
|
}
|
||||||
|
|
||||||
function getFlattenedArrayOfLineItemsWithChildParts(lineItems, childPartRecursiveCall = false) {
|
function getFlattenedArrayOfLineItemsWithChildParts(lineItems, childPartRecursiveCall = false) {
|
||||||
let flattenedArray = [];
|
let flattenedArray = [];
|
||||||
lineItems?.forEach((lineItem) => {
|
lineItems?.forEach((lineItem) => {
|
||||||
|
|
@ -3963,3 +3988,8 @@ function getExternalParameterDefaultState() {
|
||||||
function saveExternalParameterState(externalParameterState) {
|
function saveExternalParameterState(externalParameterState) {
|
||||||
window.sessionStorage.setItem("externalParameterState", JSON.stringify(externalParameterState));
|
window.sessionStorage.setItem("externalParameterState", JSON.stringify(externalParameterState));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const timeSlotCallFlags = {
|
||||||
|
shop: false,
|
||||||
|
mobile: false,
|
||||||
|
};
|
||||||
|
|
|
||||||
|
|
@ -930,6 +930,7 @@ describe("Actions", () => {
|
||||||
pageName: "pageName",
|
pageName: "pageName",
|
||||||
sessionId: "sessionId",
|
sessionId: "sessionId",
|
||||||
customEvent: customEvent,
|
customEvent: customEvent,
|
||||||
|
category: "category",
|
||||||
shouldUseSessionId: false,
|
shouldUseSessionId: false,
|
||||||
});
|
});
|
||||||
expect(response).toEqual({});
|
expect(response).toEqual({});
|
||||||
|
|
@ -3758,6 +3759,8 @@ describe("Getters", () => {
|
||||||
funnelServiceState: "OH-IO",
|
funnelServiceState: "OH-IO",
|
||||||
funnelServiceZipCode: 43215,
|
funnelServiceZipCode: 43215,
|
||||||
funnelParentAccountNumber: "999999",
|
funnelParentAccountNumber: "999999",
|
||||||
|
funnelPolicyIsItac: "false",
|
||||||
|
funnelPolicyIsNoComp: "false",
|
||||||
funnelIsCoverageVerified: true,
|
funnelIsCoverageVerified: true,
|
||||||
funnelGlassParts: null,
|
funnelGlassParts: null,
|
||||||
funnelSupportingItems: null,
|
funnelSupportingItems: null,
|
||||||
|
|
@ -3809,6 +3812,8 @@ describe("Getters", () => {
|
||||||
funnelServiceState: mockStateValues.funnelServiceState,
|
funnelServiceState: mockStateValues.funnelServiceState,
|
||||||
funnelServiceZipCode: mockStateValues.funnelServiceZipCode,
|
funnelServiceZipCode: mockStateValues.funnelServiceZipCode,
|
||||||
funnelParentAccountNumber: mockStateValues.funnelParentAccountNumber,
|
funnelParentAccountNumber: mockStateValues.funnelParentAccountNumber,
|
||||||
|
funnelPolicyIsItac: mockStateValues.funnelPolicyIsItac,
|
||||||
|
funnelPolicyIsNoComp: mockStateValues.funnelPolicyIsNoComp,
|
||||||
funnelIsCoverageVerified: mockStateValues.funnelIsCoverageVerified,
|
funnelIsCoverageVerified: mockStateValues.funnelIsCoverageVerified,
|
||||||
funnelOrderPartNumbers: [],
|
funnelOrderPartNumbers: [],
|
||||||
funnelOrderPartTypes: [],
|
funnelOrderPartTypes: [],
|
||||||
|
|
@ -3839,6 +3844,8 @@ describe("Getters", () => {
|
||||||
funnelServiceState: "OH-IO",
|
funnelServiceState: "OH-IO",
|
||||||
funnelServiceZipCode: 43215,
|
funnelServiceZipCode: 43215,
|
||||||
funnelParentAccountNumber: "999999",
|
funnelParentAccountNumber: "999999",
|
||||||
|
funnelPolicyIsItac: "false",
|
||||||
|
funnelPolicyIsNoComp: "false",
|
||||||
funnelIsCoverageVerified: true,
|
funnelIsCoverageVerified: true,
|
||||||
funnelGlassParts: [],
|
funnelGlassParts: [],
|
||||||
funnelOtherParts: [],
|
funnelOtherParts: [],
|
||||||
|
|
@ -3889,6 +3896,8 @@ describe("Getters", () => {
|
||||||
funnelServiceState: mockStateValues.funnelServiceState,
|
funnelServiceState: mockStateValues.funnelServiceState,
|
||||||
funnelServiceZipCode: mockStateValues.funnelServiceZipCode,
|
funnelServiceZipCode: mockStateValues.funnelServiceZipCode,
|
||||||
funnelParentAccountNumber: mockStateValues.funnelParentAccountNumber,
|
funnelParentAccountNumber: mockStateValues.funnelParentAccountNumber,
|
||||||
|
funnelPolicyIsItac: mockStateValues.funnelPolicyIsItac,
|
||||||
|
funnelPolicyIsNoComp: mockStateValues.funnelPolicyIsNoComp,
|
||||||
funnelIsCoverageVerified: mockStateValues.funnelIsCoverageVerified,
|
funnelIsCoverageVerified: mockStateValues.funnelIsCoverageVerified,
|
||||||
funnelOrderPartNumbers: [],
|
funnelOrderPartNumbers: [],
|
||||||
funnelOrderPartTypes: [],
|
funnelOrderPartTypes: [],
|
||||||
|
|
@ -3919,6 +3928,8 @@ describe("Getters", () => {
|
||||||
serviceState: "OH-IO",
|
serviceState: "OH-IO",
|
||||||
serviceZipCode: 43215,
|
serviceZipCode: 43215,
|
||||||
parentAccountNumber: "999999",
|
parentAccountNumber: "999999",
|
||||||
|
funnelPolicyIsItac: "false",
|
||||||
|
funnelPolicyIsNoComp: "false",
|
||||||
isCoverageVerified: false,
|
isCoverageVerified: false,
|
||||||
glassParts: [
|
glassParts: [
|
||||||
{
|
{
|
||||||
|
|
@ -3979,6 +3990,8 @@ describe("Getters", () => {
|
||||||
funnelServiceState: mockStateValues.serviceState,
|
funnelServiceState: mockStateValues.serviceState,
|
||||||
funnelServiceZipCode: mockStateValues.serviceZipCode,
|
funnelServiceZipCode: mockStateValues.serviceZipCode,
|
||||||
funnelParentAccountNumber: mockStateValues.parentAccountNumber,
|
funnelParentAccountNumber: mockStateValues.parentAccountNumber,
|
||||||
|
funnelPolicyIsItac: mockStateValues.funnelPolicyIsItac,
|
||||||
|
funnelPolicyIsNoComp: mockStateValues.funnelPolicyIsNoComp,
|
||||||
funnelIsCoverageVerified: mockStateValues.isCoverageVerified,
|
funnelIsCoverageVerified: mockStateValues.isCoverageVerified,
|
||||||
funnelOrderPartNumbers: ["WINDSHIELDPARTNUMBER"],
|
funnelOrderPartNumbers: ["WINDSHIELDPARTNUMBER"],
|
||||||
funnelOrderPartTypes: ["ADAS, maybe"],
|
funnelOrderPartTypes: ["ADAS, maybe"],
|
||||||
|
|
@ -4009,6 +4022,8 @@ describe("Getters", () => {
|
||||||
serviceState: "OH-IO",
|
serviceState: "OH-IO",
|
||||||
serviceZipCode: 43215,
|
serviceZipCode: 43215,
|
||||||
parentAccountNumber: "999999",
|
parentAccountNumber: "999999",
|
||||||
|
funnelPolicyIsItac: "false",
|
||||||
|
funnelPolicyIsNoComp: "false",
|
||||||
isCoverageVerified: false,
|
isCoverageVerified: false,
|
||||||
glassParts: [
|
glassParts: [
|
||||||
{
|
{
|
||||||
|
|
@ -4084,6 +4099,8 @@ describe("Getters", () => {
|
||||||
funnelServiceState: mockStateValues.serviceState,
|
funnelServiceState: mockStateValues.serviceState,
|
||||||
funnelServiceZipCode: mockStateValues.serviceZipCode,
|
funnelServiceZipCode: mockStateValues.serviceZipCode,
|
||||||
funnelParentAccountNumber: mockStateValues.parentAccountNumber,
|
funnelParentAccountNumber: mockStateValues.parentAccountNumber,
|
||||||
|
funnelPolicyIsItac: mockStateValues.funnelPolicyIsItac,
|
||||||
|
funnelPolicyIsNoComp: mockStateValues.funnelPolicyIsNoComp,
|
||||||
funnelIsCoverageVerified: mockStateValues.isCoverageVerified,
|
funnelIsCoverageVerified: mockStateValues.isCoverageVerified,
|
||||||
funnelOrderPartNumbers: ["WINDSHIELDPARTNUMBER"],
|
funnelOrderPartNumbers: ["WINDSHIELDPARTNUMBER"],
|
||||||
funnelOrderPartTypes: ["ADAS, maybe"],
|
funnelOrderPartTypes: ["ADAS, maybe"],
|
||||||
|
|
@ -4114,6 +4131,8 @@ describe("Getters", () => {
|
||||||
serviceState: "OH-IO",
|
serviceState: "OH-IO",
|
||||||
serviceZipCode: 43215,
|
serviceZipCode: 43215,
|
||||||
parentAccountNumber: "999999",
|
parentAccountNumber: "999999",
|
||||||
|
funnelPolicyIsItac: "false",
|
||||||
|
funnelPolicyIsNoComp: "false",
|
||||||
isCoverageVerified: false,
|
isCoverageVerified: false,
|
||||||
glassParts: [
|
glassParts: [
|
||||||
{
|
{
|
||||||
|
|
@ -4200,6 +4219,8 @@ describe("Getters", () => {
|
||||||
funnelServiceState: mockStateValues.serviceState,
|
funnelServiceState: mockStateValues.serviceState,
|
||||||
funnelServiceZipCode: mockStateValues.serviceZipCode,
|
funnelServiceZipCode: mockStateValues.serviceZipCode,
|
||||||
funnelParentAccountNumber: mockStateValues.parentAccountNumber,
|
funnelParentAccountNumber: mockStateValues.parentAccountNumber,
|
||||||
|
funnelPolicyIsItac: mockStateValues.funnelPolicyIsItac,
|
||||||
|
funnelPolicyIsNoComp: mockStateValues.funnelPolicyIsNoComp,
|
||||||
funnelIsCoverageVerified: mockStateValues.isCoverageVerified,
|
funnelIsCoverageVerified: mockStateValues.isCoverageVerified,
|
||||||
funnelOrderPartNumbers: ["BACKGLASS_PN", "DRIVERGLASS_PN", "PASSENGERGLASS_PN"],
|
funnelOrderPartNumbers: ["BACKGLASS_PN", "DRIVERGLASS_PN", "PASSENGERGLASS_PN"],
|
||||||
funnelOrderPartTypes: [],
|
funnelOrderPartTypes: [],
|
||||||
|
|
|
||||||
|
|
@ -121,8 +121,8 @@ $body-color: $gray-600;
|
||||||
|
|
||||||
//Fonts
|
//Fonts
|
||||||
$font-family-sans-serif: AvertaRegular, Arial, Helvetica, sans-serif;
|
$font-family-sans-serif: AvertaRegular, Arial, Helvetica, sans-serif;
|
||||||
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
|
$font-family-monospace:
|
||||||
monospace;
|
SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||||
// stylelint-enable value-keyword-case
|
// stylelint-enable value-keyword-case
|
||||||
$font-family-base: $font-family-sans-serif;
|
$font-family-base: $font-family-sans-serif;
|
||||||
$font-family-code: $font-family-monospace;
|
$font-family-code: $font-family-monospace;
|
||||||
|
|
@ -170,8 +170,7 @@ $spacers: (
|
||||||
/* 16px */ 5: $spacer * 1.5,
|
/* 16px */ 5: $spacer * 1.5,
|
||||||
/* 24px */ 6: $spacer * 2,
|
/* 24px */ 6: $spacer * 2,
|
||||||
/* 32px */ 7: $spacer * 2.5,
|
/* 32px */ 7: $spacer * 2.5,
|
||||||
/* 40px */ 8: $spacer * 3,
|
/* 40px */ 8: $spacer * 3 /* 48px */,
|
||||||
/* 48px */
|
|
||||||
);
|
);
|
||||||
|
|
||||||
//Enable negative spacing (does NOT work on padding)
|
//Enable negative spacing (does NOT work on padding)
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue