Skip to content

Commit

Permalink
feat: #2975 adds some refinements to page load (#2978)
Browse files Browse the repository at this point in the history
  • Loading branch information
@willmcvay
willmcvay authored Nov 12, 2020
1 parent c43271e commit 6c361e8
Show file tree
Hide file tree
Showing 45 changed files with 81,510 additions and 81,316 deletions.
76 changes: 39 additions & 37 deletions ...lytics/cost-explorer/cost-calculator/__test__/__snapshots__/cost-calculator.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,48 +5,50 @@ exports[`CostCalculator should match a snapshot 1`] = `
<Component>
API Cost Calculator
</Component>
<Component>
<Component
className="is-half-desktop"
>
<p
className="is-italic"
<mock-styled.div>
<Component>
<Component
className="is-half-desktop"
>
You can calculate the estimated monthly cost below using our Cost Calculator. Just select the number of endpoints and enter the amount of API calls below. To see the full Foundations Pricing, please click
<a
href=""
rel="noopener noreferrer"
target="_blank"
<p
className="is-italic"
>
here
</a>
</p>
You can calculate the estimated monthly cost below using our Cost Calculator. Just select the number of endpoints and enter the amount of API calls below. To see the full Foundations Pricing, please click
<a
href=""
rel="noopener noreferrer"
target="_blank"
>
here
</a>
</p>
</Component>
</Component>
</Component>
<Component>
<Component
className="is-half-desktop"
>
<CostCalculatorForm
initialValues={
Object {
"apiCalls": "",
"endpointsUsed": "",
<Component>
<Component
className="is-half-desktop"
>
<CostCalculatorForm
initialValues={
Object {
"apiCalls": "",
"endpointsUsed": "",
}
}
}
onClear={[Function]}
onSubmit={[Function]}
/>
onClear={[Function]}
onSubmit={[Function]}
/>
</Component>
</Component>
</Component>
<TotalCostTable
formValues={
Object {
"apiCalls": "",
"endpointsUsed": "",
<TotalCostTable
formValues={
Object {
"apiCalls": "",
"endpointsUsed": "",
}
}
}
/>
/>
</mock-styled.div>
</Component>
`;
37 changes: 20 additions & 17 deletions ...r-portal/src/components/pages/analytics/cost-explorer/cost-calculator/cost-calculator.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { H5, GridItem, Grid, Section } from '@reapit/elements'
import CostCalculatorForm, { CostCalculatorFormValues } from './cost-calculator-form'
import TotalCostTable from './total-cost-table'
import pdfPricingLink from '@/assets/files/foundation-pricing-0720.pdf'
import FadeIn from '../../../../../styles/fade-in'

export type CostCalculatorProps = {}

Expand Down Expand Up @@ -46,23 +47,25 @@ const CostCalculator: React.FC<CostCalculatorProps> = () => {
return (
<Section>
<H5>API Cost Calculator</H5>
<Grid>
<GridItem className="is-half-desktop">
<p className="is-italic">
You can calculate the estimated monthly cost below using our Cost Calculator. Just select the number of
endpoints and enter the amount of API calls below. To see the full Foundations Pricing, please click{' '}
<a href={pdfPricingLink} target="_blank" rel="noopener noreferrer">
here
</a>
</p>
</GridItem>
</Grid>
<Grid>
<GridItem className="is-half-desktop">
<CostCalculatorForm initialValues={formValues} onSubmit={onSubmit} onClear={onClear} />
</GridItem>
</Grid>
<TotalCostTable formValues={formValues} />
<FadeIn>
<Grid>
<GridItem className="is-half-desktop">
<p className="is-italic">
You can calculate the estimated monthly cost below using our Cost Calculator. Just select the number of
endpoints and enter the amount of API calls below. To see the full Foundations Pricing, please click{' '}
<a href={pdfPricingLink} target="_blank" rel="noopener noreferrer">
here
</a>
</p>
</GridItem>
</Grid>
<Grid>
<GridItem className="is-half-desktop">
<CostCalculatorForm initialValues={formValues} onSubmit={onSubmit} onClear={onClear} />
</GridItem>
</Grid>
<TotalCostTable formValues={formValues} />
</FadeIn>
</Section>
)
}
Expand Down
73 changes: 38 additions & 35 deletions ...al/src/components/pages/analytics/cost-explorer/cost-explorer-component/cost-explorer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { formatNumber, formatCurrency } from '@/utils/number-formatter'
import { BillingBreakdownForMonthV2Model, ServiceItemBillingV2Model } from '@reapit/foundations-ts-definitions'
import { unparse } from 'papaparse'
import { saveAs } from 'file-saver'
import FadeIn from '../../../../../styles/fade-in'

export type CostExplorerProps = {}

Expand Down Expand Up @@ -163,41 +164,43 @@ const CostExplorer: React.FC<CostExplorerProps> = () => {
return (
<Section hasMargin={false}>
<H5>Cost Explorer: Cost & Usage</H5>
<Helper variant="info">
We have suspended fees for the following services until March 2021: Annual Developer Registration, App Listing
(publishing an app in the marketplace), Developer Edition of Agency Cloud and Reapit Connect. Only API
consumption charges will apply.
</Helper>
<Grid>
<GridItem>
<p className="is-italic">
The table below does not include Sandbox Services, as the testing environment is free of charge
</p>
</GridItem>
</Grid>
<Grid>
<GridItem className="is-half-desktop">
<Grid>
<GridItem className="is-one-quarter">
<H6>Month</H6>
</GridItem>
<GridItem>
<CostFilterForm initialValues={initialValues} onSave={onSave} />
</GridItem>
</Grid>
</GridItem>

<GridItem className="is-half-desktop">
<LevelRight className="has-text-right">
<Button onClick={handleDownloadCSV(csvData)}>Download</Button>
</LevelRight>
</GridItem>
</Grid>
<Grid>
<GridItem>
<CostExplorerTable columns={columns} tableData={tableData} />
</GridItem>
</Grid>
<FadeIn>
<Helper variant="info">
We have suspended fees for the following services until March 2021: Annual Developer Registration, App Listing
(publishing an app in the marketplace), Developer Edition of Agency Cloud and Reapit Connect. Only API
consumption charges will apply.
</Helper>
<Grid>
<GridItem>
<p className="is-italic">
The table below does not include Sandbox Services, as the testing environment is free of charge
</p>
</GridItem>
</Grid>
<Grid>
<GridItem className="is-half-desktop">
<Grid>
<GridItem className="is-one-quarter">
<H6>Month</H6>
</GridItem>
<GridItem>
<CostFilterForm initialValues={initialValues} onSave={onSave} />
</GridItem>
</Grid>
</GridItem>

<GridItem className="is-half-desktop">
<LevelRight className="has-text-right">
<Button onClick={handleDownloadCSV(csvData)}>Download</Button>
</LevelRight>
</GridItem>
</Grid>
<Grid>
<GridItem>
<CostExplorerTable columns={columns} tableData={tableData} />
</GridItem>
</Grid>
</FadeIn>
</Section>
)
}
Expand Down
4 changes: 3 additions & 1 deletion ...analytics/cost-explorer/service-chart/__tests__/__snapshots__/service-chart.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,9 @@ exports[`ServiceChart should match a snapshot 1`] = `
<div
className=""
data-test=""
/>
>
<mock-styled.div />
</div>
</Component>
</div>
</Component>
Expand Down
3 changes: 2 additions & 1 deletion ...loper-portal/src/components/pages/analytics/cost-explorer/service-chart/service-chart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { useReapitConnect } from '@reapit/connect-session'
import { reapitConnectBrowserSession } from '@/core/connect-session'
import { getDeveloperIdFromConnectSession } from '@/utils/session'
import { chartContainer } from './__styles__/service-chart'
import FadeIn from '../../../../../styles/fade-in'

const API_CALL_INDEX = 0
const APP_LISTING_INDEX = 1
Expand Down Expand Up @@ -228,7 +229,7 @@ export const ServiceChart: React.FC = () => {
<Grid>
<GridItem className="is-7 is-offset-5">
<Grid isMultiLine isMobile>
{renderChartLegend(chartElement, chartLegendItems)}
<FadeIn>{renderChartLegend(chartElement, chartLegendItems)}</FadeIn>
</Grid>
</GridItem>
</Grid>
Expand Down
40 changes: 21 additions & 19 deletions ...ost-explorer/transaction-history/__test__/__snapshots__/transaction-history.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,31 +7,33 @@ exports[`TransactionHistory should match a snapshot 1`] = `
<Component>
Transaction History
</Component>
<Component>
<mock-styled.div>
<Component>
This Months Transactions To Date
</Component>
<Component
key="Thu, 10 Oct 2019 22:39:51 GMT"
>
<Component>
This Months Transactions To Date
</Component>
<Component
className="is-one-third"
key="Thu, 10 Oct 2019 22:39:51 GMT"
>
October 2019
</Component>
<Component>
<a
href="#"
onClick={[Function]}
<Component
className="is-one-third"
>
Download
</a>
October 2019
</Component>
<Component>
<a
href="#"
onClick={[Function]}
>
Download
</a>
</Component>
</Component>
</Component>
</Component>
<Component />
<Component>
<Component />
</Component>
<Component>
<Component />
</Component>
</mock-styled.div>
</Component>
`;
71 changes: 37 additions & 34 deletions .../src/components/pages/analytics/cost-explorer/transaction-history/transaction-history.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { URLS } from '@/services/constants'
import { generateHeaders } from '@/services/utils'
import FileSaver from 'file-saver'
import { selectAppListState } from '@/selector/apps/app-list'
import FadeIn from '../../../../../styles/fade-in'

export type TransactionHistoryProps = {}

Expand Down Expand Up @@ -169,40 +170,42 @@ const TransactionHistory: React.FC<TransactionHistoryProps> = () => {
return (
<Section hasMargin={false}>
<H5>Transaction History</H5>
{currentPage === 1
? renderFirstPage({ developerAppIds, previousTransactionDates })
: renderPreviousTransactionHistoryList({
dates: previousTransactionDates,
developerAppIds,
startIndex: startIndex,
endIndex: endIndex,
})}
<Grid>
<GridItem>
{isShowLaterButton && (
<a
onClick={event => {
event?.preventDefault()
handleLaterClick(setCurrentPage)
}}
href="/"
>
{'Later >>'}
</a>
)}
{isShowEarlierButton && (
<a
onClick={event => {
event?.preventDefault()
handleEarlierClick(setCurrentPage)
}}
href="/"
>
{'<< Earlier'}
</a>
)}
</GridItem>
</Grid>
<FadeIn>
{currentPage === 1
? renderFirstPage({ developerAppIds, previousTransactionDates })
: renderPreviousTransactionHistoryList({
dates: previousTransactionDates,
developerAppIds,
startIndex: startIndex,
endIndex: endIndex,
})}
<Grid>
<GridItem>
{isShowLaterButton && (
<a
onClick={event => {
event?.preventDefault()
handleLaterClick(setCurrentPage)
}}
href="/"
>
{'Later >>'}
</a>
)}
{isShowEarlierButton && (
<a
onClick={event => {
event?.preventDefault()
handleEarlierClick(setCurrentPage)
}}
href="/"
>
{'<< Earlier'}
</a>
)}
</GridItem>
</Grid>
</FadeIn>
</Section>
)
}
Expand Down
Loading

0 comments on commit 6c361e8

Please sign in to comment.