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:
Vitalii 2023-03-17 18:00:01 +02:00 committed by Storj Robot
parent 6a99e3df31
commit a588f96b90

View File

@ -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>