Skip to content

Commit

Permalink
License Page New UI
Browse files Browse the repository at this point in the history
  • Loading branch information
SmitGala committed Feb 19, 2025
1 parent 63e9244 commit c81cbe2
Show file tree
Hide file tree
Showing 7 changed files with 136 additions and 190 deletions.
185 changes: 42 additions & 143 deletions app/components/license-detail/index.hbs
Original file line number Diff line number Diff line change
@@ -1,143 +1,42 @@
<div class='my-1 p-1'>
<AkTypography @variant='h4'>
{{t 'license'}}
</AkTypography>

<table class='my-2' local-class='license-detail-table'>
<thead>
<tr>
<th
colspan='3'
local-class='{{if @license.isActive "success" "critical"}}'
>
<AkStack @justifyContent='space-between'>
<AkStack @alignItems='center'>
<AkTypography @fontWeight='bold'>
{{#if @license.isLimitedScans}}
{{@license.perScanName}}
{{else}}
{{@license.perAppName}}
{{/if}}
</AkTypography>
</AkStack>

<AkStack @alignItems='center' @spacing='2'>
{{#if @license.isActive}}
<AkIcon @iconName='done' @color='success' @size='small' />
{{else}}
<AkIcon @iconName='close' @color='error' @size='small' />
{{/if}}

<span>
{{@license.status}}
</span>
</AkStack>
</AkStack>
</th>
</tr>
</thead>

<tbody>
<tr>
<td>
<AkStack @alignItems='center' @spacing='2'>
<AkIcon @iconName='shape-line' @size='small' />

<AkTypography>{{t 'features'}}</AkTypography>
</AkStack>
</td>

<td>
{{#if @license.isLimitedScans}}
<AkTypography @color='textSecondary' local-class='uppercase-text'>
No. of Scans
</AkTypography>

<AkTypography @fontWeight='medium'>
{{@license.perScanQuantity}}
</AkTypography>
{{else}}
<AkTypography @color='textSecondary' local-class='uppercase-text'>
{{t 'noOfApps'}}
</AkTypography>

<AkTypography @fontWeight='medium'>
{{@license.perAppQuantity}}
</AkTypography>
{{/if}}
</td>

<td>
<em>
{{#if @license.isLimitedScans}}
{{@license.perScanDescription}}
{{else}}
{{@license.perAppDescription}}
{{/if}}
</em>
</td>
</tr>

<tr>
<td>
<AkStack @alignItems='center' @spacing='2'>
<AkIcon @iconName='calendar-month' @size='small' />

<AkTypography>{{t 'validity'}}</AkTypography>
</AkStack>
</td>

<td>
<AkTypography @color='textSecondary' local-class='uppercase-text'>
{{t 'startDate'}}
</AkTypography>

<AkTypography @fontWeight='medium'>
{{this.startDate}}
</AkTypography>
</td>

<td>
<AkTypography @color='textSecondary' local-class='uppercase-text'>
{{t 'expiryDate'}}
</AkTypography>

<AkTypography @fontWeight='medium'>
{{this.expiryDate}}
</AkTypography>
</td>
</tr>

<tr>
<td>
<AkStack @alignItems='center' @spacing='2'>
<AkIcon @iconName='person' @size='small' />

<AkTypography>{{t 'registration'}}</AkTypography>
</AkStack>
</td>

<td>
<AkTypography @color='textSecondary' local-class='uppercase-text'>
{{t 'licenseKey'}}
</AkTypography>

<AkTypography @fontWeight='medium'>
{{@license.key}}
</AkTypography>
</td>

<td>
<AkTypography @color='textSecondary' local-class='uppercase-text'>
{{t 'licensedTo'}}
</AkTypography>

<AkTypography @fontWeight='medium'>
{{@license.name}}
&lt;{{@license.email}}&gt;
</AkTypography>
</td>
</tr>
</tbody>
</table>
</div>
<AkStack @justifyContent='space-between' local-class='license-detail-header'>
<AkTypography @variant='h5'>{{t 'license'}}</AkTypography>

<AkStack @alignItems='center' @spacing='1.5'>
<AkTypography @variant='h6'>
{{#if @license.isLimitedScans}}
{{@license.perScanName}}
{{else}}
{{@license.perAppName}}
{{/if}}
</AkTypography>

<AkChip
@variant='semi-filled'
@label={{@license.status}}
@color={{if @license.isActive 'success' 'error'}}
@size='small'
/>
</AkStack>
</AkStack>

{{#each this.licenseSections as |section|}}
<AkStack @direction='column' @spacing='1' local-class='license-detail-body'>
<AkIcon @iconName={{section.icon}} @size='small' />

<AkTypography @variant='subtitle1' @gutterBottom={{true}}>
{{section.title}}
</AkTypography>

{{#each section.details as |detail|}}
<AkStack @width='full'>
<AkTypography @color='textSecondary' local-class='key-width'>
{{detail.label}}
</AkTypography>

<AkTypography @variant='h6'>{{detail.value}}</AkTypography>
</AkStack>
{{/each}}
</AkStack>

<AkDivider />
{{/each}}
49 changes: 12 additions & 37 deletions app/components/license-detail/index.scss
Original file line number Diff line number Diff line change
@@ -1,40 +1,15 @@
.license-detail-table {
tr {
border: 1px solid var(--license-detail-border-color);
}

td {
font-size: 12px;
}

th {
padding: 1em;
margin-top: 1em;

&.success {
border-color: var(--license-detail-success-light);
background: var(--license-detail-success-light);
}

&.critical {
border-color: var(--license-detail-primary-light);
background: var(--license-detail-primary-light);
}
}

th,
td {
border-width: 0px;
vertical-align: middle;
.license-detail-header {
border: 1px solid var(--license-detail-border-color);
background-color: var(--license-detail-background-color);
padding: 1.142em 1.714em;
margin: 1.428em 0;
}

&:first-child {
text-align: left;
padding-left: 1em;
}
}
.license-detail-body {
background-color: var(--license-detail-background-color);
padding: 1.142em 1.714em;
}

.uppercase-text {
text-transform: uppercase;
font-size: 0.83rem;
}
.key-width {
width: 15%;
}
73 changes: 70 additions & 3 deletions app/components/license-detail/index.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import Component from '@glimmer/component';
import dayjs from 'dayjs';
import LicenseModel from 'irene/models/license';
import { service } from '@ember/service';

import type LicenseModel from 'irene/models/license';
import type IntlService from 'ember-intl/services/intl';

export interface LicenseDetailSignature {
Args: {
Expand All @@ -9,12 +12,76 @@ export interface LicenseDetailSignature {
}

export default class LicenseDetailComponent extends Component<LicenseDetailSignature> {
@service declare intl: IntlService;

get license() {
return this.args.license;
}

get startDate() {
return dayjs(this.args.license.startDate).format('DD MMM YYYY');
return dayjs(this.license?.startDate).format('DD MMM YYYY');
}

get expiryDate() {
return dayjs(this.args.license.expiryDate).format('DD MMM YYYY');
return dayjs(this.license?.expiryDate).format('DD MMM YYYY');
}

get feturesDetails() {
if (this.license?.isLimitedScans) {
return [
{
label: this.intl.t('noOfScans'),
value: this.license?.perScanQuantity,
},
{
label: this.intl.t('planType'),
value: this.license?.perScanDescription,
},
];
}

return [
{
label: this.intl.t('noOfApps'),
value: this.license?.perAppQuantity,
},
{
label: this.intl.t('planType'),
value: this.license?.perAppDescription,
},
];
}

get licenseSections() {
return [
{
icon: 'shape-line',
title: this.intl.t('feature'),
details: this.feturesDetails,
},
{
icon: 'calendar-month',
title: this.intl.t('validity'),
details: [
{ label: this.intl.t('startDate'), value: this.startDate },
{ label: this.intl.t('expiryDate'), value: this.expiryDate },
],
},
{
icon: 'person',
title: this.intl.t('registration'),
details: [
{
label: this.intl.t('licenseKey'),
value: this.license?.key,
},
{
label: this.intl.t('licensedTo'),
value: `${this.license?.name} <${this.license?.email}>`,
},
],
},
];
}
}

Expand Down
3 changes: 1 addition & 2 deletions app/styles/_component-variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -1998,8 +1998,7 @@ body {

// variables for license-detail
--license-detail-border-color: var(--border-color-1);
--license-detail-success-light: var(--success-light);
--license-detail-primary-light: var(--primary-main-10);
--license-detail-background-color: var(--background-main);

// variables for file-details/dynamic-scan/header
--file-details-dynamic-scan-header-background-color: var(--background-light);
Expand Down
10 changes: 5 additions & 5 deletions app/templates/authenticated/dashboard/billing.hbs
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
{{page-title 'Billing'}}

{{#if @model.organization.showBilling}}
{{#if @model.license}}
{{#if (and @model.organization.showBilling @model.license)}}
<PageWrapper>
<LicenseDetail @license={{@model.license}} />
{{else}}
<OrganizationBilling />
{{/if}}
</PageWrapper>
{{else}}
<OrganizationBilling />
{{/if}}
3 changes: 3 additions & 0 deletions translations/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -468,6 +468,7 @@
"failedToUpdateDsAutomatedDevicePref": "Failed to update automated DAST device preferences.",
"failedToUpdateDsManualDevicePref": "Failed to update manual DAST device preferences.",
"falsePositive": "Is this a false positive? you can override this analysis here",
"feature": "Feature",
"features": "Features",
"fetchGitHubRepoFailed": "Something went wrong when trying to fetch repo list",
"fetchProjectFailed": "Something went wrong when trying to fetch projects list",
Expand Down Expand Up @@ -936,6 +937,7 @@
"noNamespaceDescription": "Once the app is added to appknox dashboard you will be seeing the respected data over here",
"noOfApps": "No. of Apps",
"noOfProjects": "No of projects",
"noOfScans": "No of Scans",
"noPendingRequests": "No pending requests",
"noPersonalToken": "no tokens found",
"noPreference": "No Preference",
Expand Down Expand Up @@ -1139,6 +1141,7 @@
"pinLock": "Pin Lock",
"planName": "PLAN NAME",
"plans": "Plans",
"planType": "Plan Type",
"platform": "Platform",
"googlePlayStore": "Google Play Store",
"pleaseEnterAllDetails": "Please enter all the details",
Expand Down
Loading

0 comments on commit c81cbe2

Please sign in to comment.