web/satellite: migrated UpgradeNotification component to use SFC composition api
Migrated component to use SFC composition api. Change-Id: Ic2f11d1c77eaa5e66ed80c1c2fd6acbfe25f9052
This commit is contained in:
parent
6a99e3df31
commit
a588f96b90
@ -17,44 +17,41 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
import { ref } from 'vue';
|
||||||
|
|
||||||
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
|
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
|
||||||
import { AnalyticsHttpApi } from '@/api/analytics';
|
import { AnalyticsHttpApi } from '@/api/analytics';
|
||||||
import { AB_TESTING_ACTIONS } from '@/store/modules/abTesting';
|
import { AB_TESTING_ACTIONS } from '@/store/modules/abTesting';
|
||||||
import { ABHitAction } from '@/types/abtesting';
|
import { ABHitAction } from '@/types/abtesting';
|
||||||
|
import { useStore } from '@/utils/hooks';
|
||||||
|
|
||||||
import SunnyIcon from '@/../static/images/notifications/sunnyicon.svg';
|
import SunnyIcon from '@/../static/images/notifications/sunnyicon.svg';
|
||||||
import CloseIcon from '@/../static/images/notifications/closeSmall.svg';
|
import CloseIcon from '@/../static/images/notifications/closeSmall.svg';
|
||||||
|
|
||||||
// @vue/component
|
const props = defineProps<{
|
||||||
@Component({
|
openAddPMModal: () => void,
|
||||||
components: {
|
}>();
|
||||||
CloseIcon,
|
|
||||||
SunnyIcon,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
export default class UpgradeNotification extends Vue {
|
|
||||||
@Prop({ default: () => () => false })
|
|
||||||
public readonly openAddPMModal: () => void;
|
|
||||||
private readonly analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
|
|
||||||
|
|
||||||
public isBannerShowing = true;
|
const store = useStore();
|
||||||
|
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
|
||||||
|
|
||||||
/**
|
const isBannerShowing = ref<boolean>(true);
|
||||||
* Closes notification.
|
|
||||||
*/
|
|
||||||
public onCloseClick(): void {
|
|
||||||
this.isBannerShowing = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Send analytics event to segment when Upgrade Account banner is clicked.
|
/**
|
||||||
public async openBanner(): Promise<void> {
|
* Closes notification.
|
||||||
this.openAddPMModal();
|
*/
|
||||||
await this.analytics.eventTriggered(AnalyticsEvent.UPGRADE_BANNER_CLICKED);
|
function onCloseClick(): void {
|
||||||
await this.$store.dispatch(AB_TESTING_ACTIONS.HIT, ABHitAction.UPGRADE_ACCOUNT_CLICKED);
|
isBannerShowing.value = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Send analytics event to segment when Upgrade Account banner is clicked.
|
||||||
|
*/
|
||||||
|
async function openBanner(): Promise<void> {
|
||||||
|
props.openAddPMModal();
|
||||||
|
await analytics.eventTriggered(AnalyticsEvent.UPGRADE_BANNER_CLICKED);
|
||||||
|
await store.dispatch(AB_TESTING_ACTIONS.HIT, ABHitAction.UPGRADE_ACCOUNT_CLICKED);
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user