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

web/satellite: dashboard blur step after adding payment method removed

Browse Source 
Change-Id: I926016feca0cf0bf97feef8fd6936fbf466a5a51
This commit is contained in:
VitaliiShpital 2020-04-02 15:31:52 +03:00 committed by Vitalii Shpital
parent 2ded64ba2c
commit ef6c9d89bb
12 changed files with 5 additions and 239 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/satellite/src/components/account/billing/BillingArea.vue
View File

@ -97,7 +97,7 @@ export default class BillingArea extends Vue {
await this.$store.dispatch(PAYMENTS_ACTIONS.GET_BILLING_HISTORY);
if (this.$store.getters.canUserCreateFirstProject && !this.userHasOwnProject) {
await this.$store.dispatch(APP_STATE_ACTIONS.SHOW_CREATE_PROJECT_BUTTON);
await this.$store.dispatch(APP_STATE_ACTIONS.SHOW_CONTENT_BLUR);
await this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_NEW_PROJ);
}
} catch (error) {
await this.$notify.error(error.message);

2
web/satellite/src/components/account/billing/paymentMethods/PaymentMethods.vue
View File

@ -389,7 +389,7 @@ export default class PaymentMethods extends Vue {
setTimeout(() => {
if (!this.userHasOwnProject) {
this.$store.dispatch(APP_STATE_ACTIONS.SHOW_CONTENT_BLUR);
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_NEW_PROJ);
}
}, 500);
}, 2000);

2
web/satellite/src/components/project/NewProjectPopup.vue
View File

@ -143,7 +143,7 @@ export default class NewProjectPopup extends Vue {
} catch (error) {
this.isLoading = false;
await this.$notify.error(error.message);
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_NEW_PROJ);
await this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_NEW_PROJ);
return;
}

2
web/satellite/src/components/team/AddUserPopup.vue
View File

@ -423,7 +423,7 @@ export default class AddUserPopup extends Vue {
&__inputs-group {
max-height: 35vh;
overflow-y: hidden;
padding: 0 50px;
padding: 3px 50px 0 50px;
&__item {
display: flex;

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

@ -24,7 +24,6 @@ export const appStateModule = {
isChangePasswordPopupShown: false,
isPaymentSelectionShown: false,
isCreateProjectButtonShown: false,
isContentBlurShown: false,
},
satelliteName: '',
},
@ -87,12 +86,6 @@ export const appStateModule = {
[APP_STATE_MUTATIONS.HIDE_CREATE_PROJECT_BUTTON](state: any): void {
state.appState.isCreateProjectButtonShown = false;
},
[APP_STATE_MUTATIONS.SHOW_CONTENT_BLUR](state: any): void {
state.appState.isContentBlurShown = true;
},
[APP_STATE_MUTATIONS.HIDE_CONTENT_BLUR](state: any): void {
state.appState.isContentBlurShown = false;
},
// Mutation that closes each popup/dropdown
[APP_STATE_MUTATIONS.CLOSE_ALL](state: any): void {
state.appState.isAccountDropdownShown = false;
@ -202,12 +195,6 @@ export const appStateModule = {
[APP_STATE_ACTIONS.HIDE_CREATE_PROJECT_BUTTON]: function ({commit}: any): void {
commit(APP_STATE_MUTATIONS.HIDE_CREATE_PROJECT_BUTTON);
},
[APP_STATE_ACTIONS.SHOW_CONTENT_BLUR]: function ({commit}: any): void {
commit(APP_STATE_MUTATIONS.SHOW_CONTENT_BLUR);
},
[APP_STATE_ACTIONS.HIDE_CONTENT_BLUR]: function ({commit}: any): void {
commit(APP_STATE_MUTATIONS.HIDE_CONTENT_BLUR);
},
[APP_STATE_ACTIONS.CLOSE_POPUPS]: function ({commit}: any): void {
commit(APP_STATE_MUTATIONS.CLOSE_ALL);
},

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

@ -29,6 +29,4 @@ export const APP_STATE_MUTATIONS = {
SET_NAME: 'SET_NAME',
SHOW_CREATE_PROJECT_BUTTON: 'SHOW_CREATE_PROJECT_BUTTON',
HIDE_CREATE_PROJECT_BUTTON: 'HIDE_CREATE_PROJECT_BUTTON',
SHOW_CONTENT_BLUR: 'SHOW_CONTENT_BLUR',
HIDE_CONTENT_BLUR: 'HIDE_CONTENT_BLUR',
};

2
web/satellite/src/utils/constants/actionNames.ts
View File

@ -23,8 +23,6 @@ export const APP_STATE_ACTIONS = {
SET_SATELLITE_NAME: 'SET_SATELLITE_NAME',
SHOW_CREATE_PROJECT_BUTTON: 'SHOW_CREATE_PROJECT_BUTTON',
HIDE_CREATE_PROJECT_BUTTON: 'HIDE_CREATE_PROJECT_BUTTON',
SHOW_CONTENT_BLUR: 'SHOW_CONTENT_BLUR',
HIDE_CONTENT_BLUR: 'HIDE_CONTENT_BLUR',
};
export const NOTIFICATION_ACTIONS = {

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

@ -28,23 +28,6 @@
</div>
</div>
</div>
<div
v-if="isBlurShown"
class="dashboard-container__blur-area"
>
<div class="dashboard-container__blur-area__button" @click="onCreateButtonClick">
<span class="dashboard-container__blur-area__button__label">+ Create Project</span>
</div>
<div class="dashboard-container__blur-area__message-box">
<div class="dashboard-container__blur-area__message-box__left-area">
<AddImage/>
<span class="dashboard-container__blur-area__message-box__left-area__message">
Create your first project
</span>
</div>
<CloseCrossIcon class="dashboard-container__blur-area__message-box__close-cross-container" @click="onCloseClick"/>
</div>
</div>
</div>
</div>
</template>
@ -56,9 +39,6 @@ import VInfoBar from '@/components/common/VInfoBar.vue';
import DashboardHeader from '@/components/header/HeaderArea.vue';
import NavigationArea from '@/components/navigation/NavigationArea.vue';
import CloseCrossIcon from '@/../static/images/common/closeCross.svg';
import AddImage from '@/../static/images/dashboard/Add.svg';
import { ErrorUnauthorized } from '@/api/errors/ErrorUnauthorized';
import { RouteConfig } from '@/router';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
@ -90,13 +70,11 @@ const {
NavigationArea,
DashboardHeader,
VInfoBar,
AddImage,
CloseCrossIcon,
},
})
export default class DashboardArea extends Vue {
/**
* Holds router link to project details page.
* Holds router link to project dashboard page.
*/
public readonly projectDashboardPath: string = RouteConfig.ProjectDashboard.path;
@ -158,10 +136,6 @@ export default class DashboardArea extends Vue {
if (!projects.length) {
await this.$store.dispatch(APP_STATE_ACTIONS.CHANGE_STATE, AppState.LOADED_EMPTY);
if (this.$store.getters.canUserCreateFirstProject) {
await this.$store.dispatch(APP_STATE_ACTIONS.SHOW_CONTENT_BLUR);
}
if (!this.isRouteAccessibleWithoutProject()) {
try {
await this.$router.push(RouteConfig.Account.with(RouteConfig.Billing).path);
@ -200,10 +174,6 @@ export default class DashboardArea extends Vue {
await this.$notify.error(`Unable to fetch buckets. ${error.message}`);
}
if (this.$store.getters.canUserCreateFirstProject && !new ProjectOwning(this.$store).userHasOwnProject()) {
await this.$store.dispatch(APP_STATE_ACTIONS.SHOW_CONTENT_BLUR);
}
await this.$store.dispatch(APP_STATE_ACTIONS.CHANGE_STATE, AppState.LOADED);
}
@ -257,28 +227,6 @@ export default class DashboardArea extends Vue {
return this.$store.state.appStateModule.appState.fetchState === AppState.LOADING;
}
/**
* Indicates if content blur shown.
*/
public get isBlurShown(): boolean {
return this.$store.state.appStateModule.appState.isContentBlurShown;
}
/**
* Toggles create project popup showing.
*/
public onCreateButtonClick(): void {
this.onCloseClick();
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_NEW_PROJ);
}
/**
* Hides blur.
*/
public onCloseClick(): void {
this.$store.dispatch(APP_STATE_ACTIONS.HIDE_CONTENT_BLUR);
}
/**
* This method checks if current route is available when user has no created projects.
*/
@ -331,84 +279,6 @@ export default class DashboardArea extends Vue {
flex: 1 1 auto;
}
}
&__blur-area {
position: fixed;
max-width: 100%;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(12, 37, 70, 0.5);
backdrop-filter: blur(4px);
z-index: 20;
&__button {
position: fixed;
top: 30px;
right: 148px;
display: flex;
align-items: center;
justify-content: center;
width: 156px;
height: 40px;
background-color: #fff;
border: 1px solid #2683ff;
border-radius: 6px;
cursor: pointer;
z-index: 21;
&__label {
font-family: 'font_medium', sans-serif;
font-size: 15px;
line-height: 22px;
color: #2683ff;
}
}
&__message-box {
background-image: url('../../static/images/dashboard/message.png');
background-size: 100% 100%;
height: auto;
width: auto;
position: fixed;
top: 80px;
right: 100px;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 21;
padding: 30px 30px 20px 20px;
&__left-area {
display: flex;
align-items: center;
justify-content: space-between;
&__message {
font-family: 'font_regular', sans-serif;
font-size: 14px;
line-height: 19px;
color: #373737;
margin-left: 15px;
}
}
&__close-cross-container {
display: flex;
justify-content: center;
align-items: center;
height: 17px;
width: 17px;
cursor: pointer;
margin-left: 50px;
&:hover .close-cross-svg-path {
fill: #2683ff;
}
}
}
}
}
@media screen and (max-width: 1280px) {
@ -416,20 +286,6 @@ export default class DashboardArea extends Vue {
.regular-navigation {
display: none;
}
.dashboard-container {
&__blur-area {
&__button {
right: 123px;
}
&__message-box {
right: 76px;
}
}
}
}
@media screen and (max-width: 720px) {

4
web/satellite/static/images/dashboard/Add.svg
View File

@ -1,4 +0,0 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="40" height="40" rx="10" fill="#2683FF"/>
<path d="M20 10.1005V29.8995M10.1005 20H29.8995" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 287 B

BIN
web/satellite/static/images/dashboard/message.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1013 B

16
web/satellite/tests/unit/views/DashboardArea.spec.ts
View File

@ -79,22 +79,6 @@ describe('Dashboard', () => {
expect(wrapper.findAll('.dashboard-container__wrap').length).toBe(0);
});
it('renders correctly without project and with payment method', async () => {
store.commit(APP_STATE_MUTATIONS.SHOW_CONTENT_BLUR);
const wrapper = shallowMount(DashboardArea, {
store,
localVue,
router,
});
expect(wrapper).toMatchSnapshot();
await wrapper.find('.dashboard-container__blur-area__button').trigger('click');
expect(wrapper).toMatchSnapshot();
});
it('renders correctly when data is loaded', () => {
store.dispatch(APP_STATE_ACTIONS.CHANGE_STATE, AppState.LOADED);

53
web/satellite/tests/unit/views/__snapshots__/DashboardArea.spec.ts.snap
View File

@ -16,7 +16,6 @@ exports[`Dashboard renders correctly when data is loaded 1`] = `
</div>
</div>
</div>
<!---->
</div>
</div>
`;
@ -27,55 +26,3 @@ exports[`Dashboard renders correctly when data is loading 1`] = `
<!---->
</div>
`;
exports[`Dashboard renders correctly without project and with payment method 1`] = `
<div class="dashboard-container">
<!---->
<div class="dashboard-container__wrap">
<navigationarea-stub class="regular-navigation"></navigationarea-stub>
<div class="dashboard-container__wrap__column">
<dashboardheader-stub></dashboardheader-stub>
<div class="dashboard-container__main-area">
<div class="dashboard-container__main-area__bar-area">
<!---->
</div>
<div class="dashboard-container__main-area__content">
<router-view-stub name="default"></router-view-stub>
</div>
</div>
</div>
<div class="dashboard-container__blur-area">
<div class="dashboard-container__blur-area__button"><span class="dashboard-container__blur-area__button__label">+ Create Project</span></div>
<div class="dashboard-container__blur-area__message-box">
<div class="dashboard-container__blur-area__message-box__left-area">
<addimage-stub></addimage-stub> <span class="dashboard-container__blur-area__message-box__left-area__message">
Create your first project
</span>
</div>
<closecrossicon-stub class="dashboard-container__blur-area__message-box__close-cross-container"></closecrossicon-stub>
</div>
</div>
</div>
</div>
`;
exports[`Dashboard renders correctly without project and with payment method 2`] = `
<div class="dashboard-container">
<!---->
<div class="dashboard-container__wrap">
<navigationarea-stub class="regular-navigation"></navigationarea-stub>
<div class="dashboard-container__wrap__column">
<dashboardheader-stub></dashboardheader-stub>
<div class="dashboard-container__main-area">
<div class="dashboard-container__main-area__bar-area">
<!---->
</div>
<div class="dashboard-container__main-area__content">
<router-view-stub name="default"></router-view-stub>
</div>
</div>
</div>
<!---->
</div>
</div>
`;