JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite: Remove BillingNotification component

Browse Source 
This notification has been around for long enough that it is no longer
necessary.

Change-Id: I747d11f872d5bb1643dba599bafb36ac1b8ad9ee
This commit is contained in:
Moby von Briesen 2023-04-07 12:57:48 -04:00 committed by Storj Robot
parent 085bc0c4cb
commit 97cefed5c2
7 changed files with 0 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
web/satellite/src/components/notifications/BillingNotification.vue
View File

@ -1,111 +0,0 @@
// Copyright (C) 2022 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div class="notification-wrap">
<div class="notification-wrap__content">
<div class="notification-wrap__content__left">
<InfoIcon class="notification-wrap__content__left__icon" />
<p><b>Billing details are now located under the account menu.</b> Check it out by clicking on My Account.</p>
</div>
<div class="notification-wrap__content__right">
<router-link :to="billingPath">See Billing</router-link>
<CloseIcon class="notification-wrap__content__right__close" @click="onCloseClick" />
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { computed, reactive } from 'vue';
import { RouteConfig } from '@/router';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { NavigationLink } from '@/types/navigation';
import { useRouter, useStore } from '@/utils/hooks';
import InfoIcon from '@/../static/images/notifications/info.svg';
import CloseIcon from '@/../static/images/notifications/closeSmall.svg';
const store = useStore();
const nativeRouter = useRouter();
const router = reactive(nativeRouter);
/**
* Returns the base account route based on if we're on all projects dashboard.
*/
const baseAccountRoute = computed((): NavigationLink => {
if (router.currentRoute.path.includes(RouteConfig.AccountSettings.path)) {
return RouteConfig.AccountSettings;
}
return RouteConfig.Account;
});
const billingPath = computed((): string => {
const billing = baseAccountRoute.value.with(RouteConfig.Billing);
return billing.with(RouteConfig.BillingOverview).path;
});
/**
* Closes notification.
*/
function onCloseClick(): void {
store.commit(APP_STATE_MUTATIONS.CLOSE_BILLING_NOTIFICATION);
}
</script>
<style scoped lang="scss">
.notification-wrap {
position: relative;
&__content {
position: absolute;
left: 40px;
right: 44px;
bottom: 32px;
z-index: 9999;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
font-family: 'font_regular', sans-serif;
font-size: 14px;
background-color: var(--c-blue-2);
border: 1px solid #a5beff;
border-radius: 16px;
box-shadow: 0 7px 20px rgba(0 0 0 / 15%);
&__left {
display: flex;
align-items: center;
& b {
font-family: 'font_medium', sans-serif;
}
&__icon {
flex-shrink: 0;
margin-right: 16px;
}
}
&__right {
display: flex;
align-items: center;
flex-shrink: 0;
margin-left: 16px;
& a {
color: black;
text-decoration: underline !important;
}
&__close {
margin-left: 16px;
cursor: pointer;
}
}
}
}
</style>

4
web/satellite/src/store/modules/appState.ts
View File

@ -15,7 +15,6 @@ class ViewsState {
constructor(
public fetchState = FetchState.LOADING,
public isSuccessfulPasswordResetShown = false,
public isBillingNotificationShown = true,
public hasJustLoggedIn = false,
public onbAGStepBackRoute = '',
public onbAPIKeyStepBackRoute = '',
@ -67,9 +66,6 @@ export function makeAppStateModule(configApi: FrontendConfigApi): StoreModule<Ap
}
state.viewsState.hasJustLoggedIn = hasJustLoggedIn;
},
[APP_STATE_MUTATIONS.CLOSE_BILLING_NOTIFICATION](state: AppState): void {
state.viewsState.isBillingNotificationShown = false;
},
[APP_STATE_MUTATIONS.CLEAR](state: AppState): void {
state.viewsState.activeModal = null;
state.viewsState.isSuccessfulPasswordResetShown = false;

5
web/satellite/src/store/modules/appStore.ts
View File

@ -12,7 +12,6 @@ import { MetaUtils } from '@/utils/meta';
class ViewsState {
public fetchState = FetchState.LOADING;
public isSuccessfulPasswordResetShown = false;
public isBillingNotificationShown = true;
public hasJustLoggedIn = false;
public onbAGStepBackRoute = '';
public onbAPIKeyStepBackRoute = '';
@ -79,10 +78,6 @@ export const useAppStore = defineStore('app', () => {
state.viewsState.hasJustLoggedIn = hasJustLoggedIn;
}
function closeBillingNotification(): void {
state.viewsState.isBillingNotificationShown = false;
}
function changeState(newFetchState: FetchState): void {
state.viewsState.fetchState = newFetchState;
}

1
web/satellite/src/store/mutationConstants.ts
View File

@ -13,7 +13,6 @@ export const APP_STATE_MUTATIONS = {
TOGGLE_SUCCESSFUL_PASSWORD_RESET: 'TOGGLE_SUCCESSFUL_PASSWORD_RESET',
TOGGLE_HAS_JUST_LOGGED_IN: 'TOGGLE_HAS_JUST_LOGGED_IN',
CLEAR: 'CLEAR_APPSTATE',
CLOSE_BILLING_NOTIFICATION: 'closeBillingNotification',
CHANGE_FETCH_STATE: 'CHANGE_FETCH_STATE',
SET_SATELLITE_NAME: 'SET_SATELLITE_NAME',
SET_PARTNERED_SATELLITES: 'SET_PARTNERED_SATELLITES',

9
web/satellite/src/utils/localData.ts
View File

@ -11,7 +11,6 @@ export class LocalData {
private static bucketGuideHidden = 'bucketGuideHidden';
private static serverSideEncryptionBannerHidden = 'serverSideEncryptionBannerHidden';
private static serverSideEncryptionModalHidden = 'serverSideEncryptionModalHidden';
private static billingNotificationAcknowledged = 'billingNotificationAcknowledged';
private static sessionExpirationDate = 'sessionExpirationDate';
private static projectLimitBannerHidden = 'projectLimitBannerHidden';
@ -85,14 +84,6 @@ export class LocalData {
return value === 'true';
}
public static getBillingNotificationAcknowledged(): boolean {
return Boolean(localStorage.getItem(LocalData.billingNotificationAcknowledged));
}
public static setBillingNotificationAcknowledged(): void {
localStorage.setItem(LocalData.billingNotificationAcknowledged, 'true');
}
public static getSessionExpirationDate(): Date | null {
const data: string | null = localStorage.getItem(LocalData.sessionExpirationDate);
if (data) {

20
web/satellite/src/views/DashboardArea.vue
View File

@ -64,7 +64,6 @@
</div>
<router-view class="dashboard__wrap__main-area__content-wrap__container__content" />
</div>
<BillingNotification v-if="isBillingNotificationShown" />
</div>
</div>
</div>
@ -125,7 +124,6 @@ import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useABTestingStore } from '@/store/modules/abTestingStore';
import BillingNotification from '@/components/notifications/BillingNotification.vue';
import NavigationArea from '@/components/navigation/NavigationArea.vue';
import InactivityModal from '@/components/modals/InactivityModal.vue';
import BetaSatBar from '@/components/infoBars/BetaSatBar.vue';
@ -336,13 +334,6 @@ const showMFARecoveryCodeBar = computed((): boolean => {
return user.isMFAEnabled && user.mfaRecoveryCodeCount < recoveryCodeWarningThreshold;
});
/**
* Indicates whether the billing relocation notification should be shown.
*/
const isBillingNotificationShown = computed((): boolean => {
return store.state.appStateModule.viewsState.isBillingNotificationShown;
});
/**
* Indicates if current route is create project page.
*/
@ -592,17 +583,6 @@ onMounted(async () => {
if (action.type === USER_ACTIONS.CLEAR) clearSessionTimers();
});
if (LocalData.getBillingNotificationAcknowledged()) {
store.commit(APP_STATE_MUTATIONS.CLOSE_BILLING_NOTIFICATION);
} else {
const unsub = store.subscribe((action) => {
if (action.type === APP_STATE_MUTATIONS.CLOSE_BILLING_NOTIFICATION) {
LocalData.setBillingNotificationAcknowledged();
unsub();
}
});
}
try {
await store.dispatch(USER_ACTIONS.GET);
await store.dispatch(USER_ACTIONS.GET_FROZEN_STATUS);

22
web/satellite/src/views/all-dashboard/AllDashboardArea.vue
View File

@ -18,8 +18,6 @@
<div class="all-dashboard__content__divider" />
<div class="all-dashboard__banners">
<BillingNotification v-if="isBillingNotificationShown" class="all-dashboard__banners__billing" />
<UpgradeNotification
v-if="isPaidTierBannerShown"
class="all-dashboard__banners__upgrade"
@ -134,7 +132,6 @@ import { AuthHttpApi } from '@/api/auth';
import Heading from '@/views/all-dashboard/components/Heading.vue';
import { useABTestingStore } from '@/store/modules/abTestingStore';
import BillingNotification from '@/components/notifications/BillingNotification.vue';
import InactivityModal from '@/components/modals/InactivityModal.vue';
import BetaSatBar from '@/components/infoBars/BetaSatBar.vue';
import MFARecoveryCodeBar from '@/components/infoBars/MFARecoveryCodeBar.vue';
@ -265,14 +262,6 @@ const isBillingPage = computed(() => {
return useRoute().path.includes(RouteConfig.Billing2.path);
});
/**
* Indicates whether the billing relocation notification should be shown.
*/
const isBillingNotificationShown = computed((): boolean => {
return !isBillingPage.value
&& store.state.appStateModule.viewsState.isBillingNotificationShown;
});
/**
* Indicates if satellite is in beta.
*/
@ -535,17 +524,6 @@ onMounted(async () => {
if (action.type === USER_ACTIONS.CLEAR) clearSessionTimers();
});
if (LocalData.getBillingNotificationAcknowledged()) {
store.commit(APP_STATE_MUTATIONS.CLOSE_BILLING_NOTIFICATION);
} else {
const unsub = store.subscribe((action) => {
if (action.type === APP_STATE_MUTATIONS.CLOSE_BILLING_NOTIFICATION) {
LocalData.setBillingNotificationAcknowledged();
unsub();
}
});
}
try {
await store.dispatch(USER_ACTIONS.GET);
await store.dispatch(USER_ACTIONS.GET_FROZEN_STATUS);