Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: lend menu buttons test code removed #5078

Merged
merged 2 commits into from
Nov 22, 2023
Merged

feat: lend menu buttons test code removed #5078

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
75e4ad8
feat: lend menu buttons test code removed
roger-in-kiva Nov 22, 2023
b42bc07
fix: template element removed for lend cta
roger-in-kiva Nov 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
119 changes: 9 additions & 110 deletions src/components/WwwFrame/TheHeader.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,12 +93,9 @@
tw-grid xl:tw-gap-x-4 tw-items-center"
:class="{
'tw-gap-x-1 ': isMobile,
'tw-gap-x-2.5': !lendMenuButtonExp || !isMobile,
'header-lend-menu-button-exp tw-gap-x-1': lendMenuButtonExp,
'header-lend-menu-button-exp-visitor': lendMenuButtonExp && isVisitor,
'tw-gap-x-2.5': !isMobile,
'header--mobile-open': searchOpen || isVisitor,
'header--tablet-open': openTabletVariant,
'mobile-lend-menu-button-exp': searchOpen && lendMenuButtonExp,
}"
>
<!-- Logo -->
Expand All @@ -114,39 +111,7 @@
</a>
</div>

<template v-if="lendMenuButtonExp">
<div class="tw-flex tw-gap-1.5">
<!-- Explore -->
<router-link
to="/lend-by-category"
data-testid="header-explore"
class="header__button header__explore"
v-kv-track-event="['TopNav','click-Lend']"
>
<span class="tw-hidden lg:tw-inline-block">Explore loans</span>
</router-link>

<!-- Categories -->
<div
data-testid="header-lend"
class="header__button header__lend"
@pointerenter.stop="onLendLinkPointerEnter"
@pointerleave.stop="onLendLinkPointerLeave"
@pointerup.stop="onLendLinkPointerEnter"
@click="onCategoriesClick"
>
<span class="tw-flex tw-items-center">Categories
<kv-material-icon
class="tw-w-3 tw-h-3 tw-transition-transform tw-duration-300"
:icon="mdiChevronDown"
:class="{'tw-rotate-180' : isLendMenuVisible}"
/>
</span>
</div>
</div>
</template>

<template v-else>
<template>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

template can probably be removed, since it's always visible.

<!-- Lend -->
<router-link
:id="lendMenuId"
Expand Down Expand Up @@ -203,9 +168,9 @@
:class="{
'tw-hidden': !searchOpen || isVisitor,
'md:tw-hidden': hasBasket && isVisitor && !searchOpen || !searchOpen,
'md:tw-block': !lendMenuButtonExp || searchOpen || !isVisitor,
'md:tw-block': searchOpen || !isVisitor,
'md:!tw-block': searchOpen && hasBasket && balance || !hasBasket,
'lg:tw-block': lendMenuButtonExp || hasBasket,
'lg:tw-block': hasBasket,
}"
>
<search-bar ref="search" />
Expand All @@ -216,18 +181,17 @@
tw-flex tw-justify-end xl:tw-gap-4 align-middle"
:class="{
'tw-gap-1': isMobile,
'tw-gap-2.5': !lendMenuButtonExp && !isMobile,
'tw-gap-1.5': lendMenuButtonExp,
'tw-gap-2.5': !isMobile,
}"
>
<!-- Mobile Search Toggle -->
<button
class="header__button header__search-icon tw-inline-flex"
:class="{
'!tw-hidden': isVisitor,
'md:!tw-hidden': !lendMenuButtonExp && !hasBasket,
'md:!tw-hidden': !hasBasket,
'md:!tw-inline-flex lg:!tw-hidden': isVisitor && hasBasket,
'lg:!tw-hidden': lendMenuButtonExp || !isVisitor,
'lg:!tw-hidden': !isVisitor,
}"
v-show="!hideSearchInHeader"
data-testid="header-mobile-search-toggle"
Expand Down Expand Up @@ -572,8 +536,6 @@ import KivaLogo from '@/assets/inline-svgs/logos/kiva-logo.svg';
import KvDropdown from '@/components/Kv/KvDropdown';
import { mdiAccountCircle, mdiChevronDown, mdiMagnify } from '@mdi/js';
import CampaignLogoGroup from '@/components/CorporateCampaign/CampaignLogoGroup';
import experimentVersionFragment from '@/graphql/fragments/experimentVersion.graphql';
import experimentAssignmentQuery from '@/graphql/query/experimentAssignment.graphql';
import _throttle from 'lodash/throttle';
import KvButton from '~/@kiva/kv-components/vue/KvButton';
import KvMaterialIcon from '~/@kiva/kv-components/vue/KvMaterialIcon';
Expand All @@ -596,8 +558,6 @@ const optimizelyUserDataQuery = gql`query optimizelyUserDataQuery {
}
}`;

const LEND_MENU_BUTTONS_EXP = 'lend_menu_buttons';

export default {
name: 'TheHeader',
components: {
Expand Down Expand Up @@ -637,7 +597,6 @@ export default {
mdiMagnify,
userId: null,
hasEverLoggedIn: false,
lendMenuButtonExp: false,
isMobile: false,
};
},
Expand Down Expand Up @@ -726,11 +685,8 @@ export default {
const hasLentBeforeValue = cookieStore.get(hasLentBeforeCookie);
const hasDepositBeforeValue = cookieStore.get(hasDepositBeforeCookie);

return Promise.all([
// eslint-disable-next-line max-len
data?.my?.userAccount?.id && (hasLentBeforeValue === undefined || hasDepositBeforeValue === undefined) ? client.query({ query: optimizelyUserDataQuery }) : Promise.resolve(),
client.query({ query: experimentAssignmentQuery, variables: { id: LEND_MENU_BUTTONS_EXP } }),
]);
// eslint-disable-next-line max-len
return (data?.my?.userAccount?.id && (hasLentBeforeValue === undefined || hasDepositBeforeValue === undefined)) ? client.query({ query: optimizelyUserDataQuery }) : Promise.resolve();
});
},
result({ data }) {
Expand Down Expand Up @@ -782,8 +738,6 @@ export default {

userHasLentBefore(this.cookieStore.get(hasLentBeforeCookie) === 'true');
userHasDepositBefore(this.cookieStore.get(hasLentBeforeCookie) === 'true');

this.initializeLendMenuButtonExp();
},
mounted() {
// MARS-246 Hotjar user attributes
Expand Down Expand Up @@ -852,11 +806,6 @@ export default {
}).catch(() => {});
}
},
onCategoriesClick(e) {
if (e.pointerType === 'touch') {
this.toggleLendMenu();
}
},
onLendLinkClick(e) {
if (e.pointerType === 'touch') {
return;
Expand Down Expand Up @@ -915,22 +864,6 @@ export default {
this.toggleLendMenu(true);
}
},
initializeLendMenuButtonExp() {
const experiment = this.apollo.readFragment({
id: `Experiment:${LEND_MENU_BUTTONS_EXP}`,
fragment: experimentVersionFragment,
}) || {};

this.lendMenuButtonExp = experiment.version === 'b';

if (experiment.version) {
this.$kvTrackEvent(
'Lend',
'EXP-CORE-1035-Feb-2023',
experiment.version
);
}
},
},
watch: {
isVisitor(newVal, oldVal) {
Expand Down Expand Up @@ -986,29 +919,13 @@ export default {
grid-template-columns: 1fr auto auto;
}

.header.header-lend-menu-button-exp {
grid-template-areas: "logo explore right-side";
grid-template-columns: 1fr auto auto;
}

.header--mobile-open {
grid-template-areas:
"logo lend right-side"
"search search search";
grid-template-columns: 1fr auto auto;
}

.header--mobile-open.mobile-lend-menu-button-exp {
grid-template-areas:
"logo explore right-side"
"search search search";
grid-template-columns: 1fr auto auto;
}

.header--mobile-open.header-lend-menu-button-exp-visitor {
grid-template-areas: "logo explore right-side";
}

@screen md {
.header {
grid-template-areas: "logo lend search right-side";
Expand All @@ -1021,27 +938,9 @@ export default {
"search search search";
grid-template-columns: 1fr auto auto;
}

.header.header-lend-menu-button-exp {
grid-template-areas: "logo explore lend search right-side";
grid-template-columns: auto auto auto 1fr auto;
}

.header.header-lend-menu-button-exp-visitor {
grid-template-areas: "logo explore lend right-side";
grid-template-columns: auto auto 1fr auto;
}

.header--mobile-open.header-lend-menu-button-exp-visitor {
grid-template-areas:
"logo explore lend right-side"
"search search search search";
grid-template-columns: auto auto 1fr auto;
}
}

@screen lg {
.header.header-lend-menu-button-exp-visitor,
.header.header--tablet-open {
grid-template-areas: "logo explore lend search right-side";
grid-template-columns: auto auto auto 1fr auto;
Expand Down
1 change: 0 additions & 1 deletion test/e2e/specs/HeaderNavigation.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ describe('Header Navigation', () => {

// Go to the lend/filter page
cy.visit('ui-site-map');
cy.visit('ui-site-map?setuiab=lend_menu_buttons.a');
// Type 'f' in the search bar
cy.findByPlaceholderText('Search all loans').type('f');
// Wait for search results request to complete
Expand Down
Loading