Skip to content

Commit

Permalink
web/satellite: ui changes to registration and billing pages to enable…
Browse files Browse the repository at this point in the history
… user to add promo codes to their account

- add Credit History table to billing acount page and set up ui for a user adding promo codes
- implement promo codes ui in registration form
- add feature flag to handle if coupon code ui should be rendered

Change-Id: I9fdeef7cffc7901958d3f9be335e1115b2471a2e
  • Loading branch information
Malcolm Bouzi committed Mar 26, 2021
1 parent 9bc2a9a commit 527b7eb
Show file tree
Hide file tree
Showing 30 changed files with 647 additions and 114 deletions.
3 changes: 3 additions & 0 deletions satellite/console/consoleweb/server.go
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,7 @@ type Config struct {
BetaSatelliteFeedbackURL string `help:"url link for for beta satellite feedback" default:""`
BetaSatelliteSupportURL string `help:"url link for for beta satellite support" default:""`
DocumentationURL string `help:"url link to documentation" devDefault:"https://documentation.storj.io/" releaseDefault:"https://documentation.tardigrade.io/"`
CouponCodeUIEnabled bool `help:"indicates if user is allowed to add coupon codes to account" default:"false"`

RateLimit web.IPRateLimiterConfig

Expand Down Expand Up @@ -304,6 +305,7 @@ func (server *Server) appHandler(w http.ResponseWriter, r *http.Request) {
BetaSatelliteFeedbackURL string
BetaSatelliteSupportURL string
DocumentationURL string
CouponCodeUIEnabled bool
}

data.ExternalAddress = server.config.ExternalAddress
Expand All @@ -322,6 +324,7 @@ func (server *Server) appHandler(w http.ResponseWriter, r *http.Request) {
data.BetaSatelliteFeedbackURL = server.config.BetaSatelliteFeedbackURL
data.BetaSatelliteSupportURL = server.config.BetaSatelliteSupportURL
data.DocumentationURL = server.config.DocumentationURL
data.CouponCodeUIEnabled = server.config.CouponCodeUIEnabled

if server.templates.index == nil {
server.log.Error("index template is not set")
Expand Down
3 changes: 3 additions & 0 deletions scripts/testdata/satellite-config.yaml.lock
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,9 @@ compensation.withheld-percents: 75,75,75,50,50,50,25,25,25,0,0,0,0,0,0
# url link to contacts page
# console.contact-info-url: https://forum.storj.io

# indicates if user is allowed to add coupon codes to account
# console.coupon-code-ui-enabled: false

# default project limits for users
# console.default-project-limit: 3

Expand Down
1 change: 1 addition & 0 deletions web/satellite/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
<meta name="beta-satellite-feedback-url" content="{{ .BetaSatelliteFeedbackURL }}">
<meta name="beta-satellite-support-url" content="{{ .BetaSatelliteSupportURL }}">
<meta name="documentation-url" content="{{ .DocumentationURL }}">
<meta name="coupon-code-ui-enabled" content="{{ .CouponCodeUIEnabled }}">
<title>{{ .SatelliteName }}</title>
<link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAL8SURBVHgBxVcxTFNRFL01JvylrRsmNWETWWSybg5I3NTQBCdRFyfrDuoKMgMyOQgdTcDAJmrUrWWCgQIbhJKy0TJQpsc73P/S9/tfP+8/GnqSn1fo77/3nnPufe8nhAR1ETeoy7hJjpj93/ycu0+UuUVuEA5Y2xaifirEVpX/nvknnBFbgpMGUfmIKOkRLRT578oxXy6IJcFCialH0EyaaPoZBy7tEQ3NEY1IKd4/iidHwqYLijLA559cuY6dT0RjBU5AAYm9fiivLFnBKMGBTyeqQ4BXhXDwdqjUiKZkskOzREsbzeeBNRMCEiDgr12uYl1WNbnW/oc2iUys8jrQyyxhHRkM3hdgAMFBHQyGG/GDqyDlsSeS/npQC99jlEBpOnyX2XCF8sGhZLbeMLMZkCDbJ1nYYTfDeMP9fMH5y5vmIKYE8RxUjBXPedDH1Zu6I9QFSzLQxErz4Xn5oNwg+2NSmuv3Lkvz4QlTi8rupDlBmA6tqQLrnYNCvoxSNAOtUEaakwzMv+ALidTP2OlKKiSK75Cs6hy9NYFkjzmG1SBCIuUq0Za8pgydge8R9E+e10qNrGE1ikH5435mo11bQgr4B9LEgVUC0Npm1o+vcuvBxB1NYFsaaeC2XUuW/Xs7msC9Xqa+MMa9jQr1KtXAQoKYHakeskbIhDrVasdTbbVY4s8ZYld/9PWuyeTSHksFBjBFcZ+aH/j/yZk5gcAcgImgIX6MNsKKhKBta1sB2A3HV5pD6iJQIzw/MICwoohc1F6ALBH03XemFYPl+VdzcBNUh6j5gZZEcP341opAAnX/AXl/A0FlrrshgMRR+YUvPPN8CHgAxlqWVYuEdH7V/ZilA6cosFDa53EcmUDKC+7X+IwxHEVhO0DK6aeXH88uHcWQA8xE7Yg69M6xgdWZUEFtNNDyx1s2KnyDIxu22zdZTjgWhANm/vL6clGIsnw3+Fbk94RreS8AMGrBxvwoT0lMPnSNC2JJoAPdgnMBJLjKq5lzAp1C19+OzwFiYzAU5f7eeQAAAABJRU5ErkJggg==" type="image/x-icon">
<link rel="dns-prefetch" href="https://js.stripe.com">
Expand Down
5 changes: 5 additions & 0 deletions web/satellite/src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ export default class App extends Vue {
const satelliteName = MetaUtils.getMetaContent('satellite-name');
const isBetaSatellite = MetaUtils.getMetaContent('is-beta-satellite');
const segmentioId = MetaUtils.getMetaContent('segment-io');
const couponCodeUIEnabled = MetaUtils.getMetaContent('coupon-code-ui-enabled');
if (satelliteName) {
this.$store.dispatch(APP_STATE_ACTIONS.SET_SATELLITE_NAME, satelliteName);
Expand All @@ -40,6 +41,10 @@ export default class App extends Vue {
this.$store.dispatch(APP_STATE_ACTIONS.SET_SATELLITE_STATUS, isBetaSatellite === 'true');
}
if (couponCodeUIEnabled) {
this.$store.dispatch(APP_STATE_ACTIONS.SET_COUPON_CODE_UI_STATUS, couponCodeUIEnabled === 'true');
}
if (segmentioId) {
this.$segment.init(segmentioId);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -141,4 +141,4 @@ export default class CreateAccessGrant extends Vue {
padding: 350px 0 20px 0;
}
}
</style>
</style>
114 changes: 86 additions & 28 deletions web/satellite/src/components/account/billing/BillingArea.vue
Original file line number Diff line number Diff line change
Expand Up @@ -19,39 +19,13 @@
</div>
</div>
<div class="account-billing-area__title-area" v-if="userHasOwnProject" :class="{ 'custom-position': hasNoCreditCard && (isBalanceLow || isBalanceNegative) }">
<div class="account-billing-area__title-area__balance-area">
<div @click.stop="toggleCreditsDropdown" class="account-billing-area__title-area__balance-area__free-credits">
<span class="account-billing-area__title-area__balance-area__free-credits__amount">
Free Credits: {{ balance.freeCredits | centsToDollars }}
</span>
<HideIcon v-if="isCreditsDropdownShown"/>
<ExpandIcon v-else/>
<HistoryDropdown
v-show="isCreditsDropdownShown"
@close="closeDropdown"
label="Credits History"
:route="creditHistoryRoute"
/>
</div>
<div @click.stop="toggleBalanceDropdown" class="account-billing-area__title-area__balance-area__tokens-area">
<span class="account-billing-area__title-area__balance-area__tokens-area__amount" :style="{ color: balanceColor }">
Available Balance: {{ balance.coins | centsToDollars }}
</span>
<HideIcon v-if="isBalanceDropdownShown"/>
<ExpandIcon v-else/>
<HistoryDropdown
v-show="isBalanceDropdownShown"
@close="closeDropdown"
label="Balance History"
:route="balanceHistoryRoute"
/>
</div>
</div>
<PeriodSelection v-if="userHasOwnProject"/>
</div>
<EstimatedCostsAndCredits v-if="isSummaryVisible"/>
<PaymentMethods/>
<SmallDepositHistory/>
<CreditsHistory />
<router-view/>
</div>
</template>

Expand All @@ -61,6 +35,7 @@ import { Component, Vue } from 'vue-property-decorator';
import PeriodSelection from '@/components/account/billing/depositAndBillingHistory/PeriodSelection.vue';
import SmallDepositHistory from '@/components/account/billing/depositAndBillingHistory/SmallDepositHistory.vue';
import EstimatedCostsAndCredits from '@/components/account/billing/estimatedCostsAndCredits/EstimatedCostsAndCredits.vue';
import CreditsHistory from '@/components/account/billing/freeCredits/CreditsHistory.vue';
import HistoryDropdown from '@/components/account/billing/HistoryDropdown.vue';
import PaymentMethods from '@/components/account/billing/paymentMethods/PaymentMethods.vue';
Expand Down Expand Up @@ -88,9 +63,11 @@ import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
HistoryDropdown,
ExpandIcon,
HideIcon,
CreditsHistory,
},
})
export default class BillingArea extends Vue {
public readonly creditHistoryRoute: string = RouteConfig.Account.with(RouteConfig.CreditsHistory).path;
public readonly balanceHistoryRoute: string = RouteConfig.Account.with(RouteConfig.DepositHistory).path;
Expand Down Expand Up @@ -208,10 +185,91 @@ export default class BillingArea extends Vue {
this.$store.dispatch(APP_STATE_ACTIONS.CLOSE_POPUPS);
}
}
</script>

<style scoped lang="scss">
.label-header {
display: none;
}
.credit-history {
&__coupon-modal-wrapper {
background: #1b2533c7 75%;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1000;
}
&__coupon-modal {
width: 741px;
height: 298px;
background: #fff;
border-radius: 8px;
margin: 15% auto;
position: relative;
&__header-wrapper {
display: flex;
justify-content: space-between;
}
&__header {
font-family: 'font_bold', sans-serif;
font-style: normal;
font-weight: bold;
font-size: 16px;
line-height: 148.31%;
margin: 30px 0;
display: inline-block;
margin-bottom: 10px;
}
&__input-wrapper {
position: relative;
width: 85%;
margin: 0 auto;
.headerless-input::placeholder {
color: #384b65;
opacity: 0.4;
position: relative;
left: 20px;
}
}
&__claim-button {
position: absolute;
bottom: 11px;
right: 10px;
}
&__apply-button {
width: 85%;
height: 44px;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
bottom: 50px;
background: #93a1af;
}
&__icon {
position: absolute;
top: 90px;
z-index: 1;
left: 20px;
}
}
}
.account-billing-area {
padding-bottom: 40px;
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
// Copyright (C) 2021 Storj Labs, Inc.
// See LICENSE for copying information.

<template>
<div class="add-coupon__wrapper">
<div class="add-coupon__modal">
<div class="add-coupon__container">
<div class="add-coupon__header-wrapper">
<p class="add-coupon__header">Add Coupon Code</p>
<CloseIcon
class="add-coupon__close-icon"
@click="onCloseClick"
/>
</div>
<AddCouponCodeInput />
</div>
</div>
</div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import AddCouponCodeInput from '@/components/common/AddCouponCodeInput.vue';
import HeaderlessInput from '@/components/common/HeaderlessInput.vue';
import ValidationMessage from '@/components/common/ValidationMessage.vue';
import CloseIcon from '@/../static/images/common/closeCross.svg';
import CheckIcon from '@/../static/images/common/success-check.svg';
import { RouteConfig } from '@/router';
@Component({
components: {
HeaderlessInput,
CloseIcon,
CheckIcon,
AddCouponCodeInput,
},
})
export default class AddCouponCode extends Vue {
@Prop({default: false})
protected readonly success: boolean;
@Prop({default: false})
protected readonly error: boolean;
/**
* Closes add coupon modal.
*/
public onCloseClick(): void {
this.$router.push(RouteConfig.Account.with(RouteConfig.Billing).path);
}
}
</script>

<style scoped lang="scss">
.add-coupon {
&__wrapper {
background: #1b2533c7 75%;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
&__modal {
width: 741px;
height: 298px;
background: #fff;
border-radius: 8px;
margin: 15% auto;
position: relative;
}
&__container {
width: 85%;
padding-top: 10px;
margin: 0 auto;
}
&__header-wrapper {
display: flex;
justify-content: space-between;
}
&__header {
font-family: 'font_bold', sans-serif;
font-style: normal;
font-weight: bold;
font-size: 16px;
line-height: 148.31%;
margin: 15px 0;
display: inline-block;
}
&__close-icon {
position: relative;
top: 17px;
cursor: pointer;
}
}
</style>

0 comments on commit 527b7eb

Please sign in to comment.