mirrors/oneuptime
1
0
Fork 0
mirror of https://github.com/OneUptime/oneuptime synced 2024-11-22 23:30:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'feature-pricing-component' into 'master'

Browse Source 
Pricing Modal

See merge request fyipe-project/app!574
This commit is contained in:
Nawaz Dhandala 2020-07-20 13:26:47 +00:00
commit 028b73d045
1 changed files with 50 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
dashboard/src/components/basic/PricingPlanModal.js
View File

@ -45,7 +45,7 @@ const PricingPlanModal = ({
<form onSubmit={handleSubmit(handleFormSubmit)}>
<div className="bs-Modal-header">
<div className="bs-Modal-header-copy">
<span className="Text-color--inherit Text-display--inline Text-fontSize--20 Text-fontWeight--regular Text-lineHeight--24 Text-typeface--base Text-wrap--wrap">
<span className="Text-color--inherit Text-display--inline Text-fontSize--20 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap">
<span>Upgrade Plan</span>
</span>
</div>
@ -67,51 +67,56 @@ const PricingPlanModal = ({
)}
</div>
<ShouldRender if={propArr[0].plan !== 'Enterprise'}>
<div className="bs-Modal-content">
<div className="Margin-bottom--12 Text-fontWeight--medium">
Choose a Plan
</div>
{plans.map((plan, index) => (
<div
className="bs-Fieldset-fields .Flex-justifyContent--center Margin-bottom--12"
style={{ flex: 1, padding: 0 }}
key={index}
>
<span
style={{
marginBottom: '4px',
}}
>
{plan.category}{' '}
{plan.type === 'month'
? 'Monthly'
: 'Yearly'}{' '}
Plan
</span>
<div
className="bs-Fieldset-field"
style={{
width: '100%',
alignItems: 'center',
}}
>
<Field
required={true}
component="input"
type="radio"
name="planId"
id={`${plan.category}_${plan.type}`}
value={plan.planId}
className="Margin-right--12"
/>
<label
htmlFor={`${plan.category}_${plan.type}`}
>
{plan.details}
</label>
</div>
<div
className="bs-Modal-content"
style={{ paddingTop: 0 }}
>
<fieldset className="bs-Fieldset">
<div className="Margin-bottom--12 Text-fontWeight--medium">
Choose a Plan
</div>
))}
{plans.map((plan, index) => (
<div
className="bs-Fieldset-fields .Flex-justifyContent--center Margin-bottom--12"
style={{ flex: 1, padding: 0 }}
key={index}
>
<span
style={{
marginBottom: '4px',
}}
>
{plan.category}{' '}
{plan.type === 'month'
? 'Monthly'
: 'Yearly'}{' '}
Plan
</span>
<div
className="bs-Fieldset-field"
style={{
width: '100%',
alignItems: 'center',
}}
>
<Field
required={true}
component="input"
type="radio"
name="planId"
id={`${plan.category}_${plan.type}`}
value={plan.planId}
className="Margin-right--12"
/>
<label
htmlFor={`${plan.category}_${plan.type}`}
>
{plan.details}
</label>
</div>
</div>
))}
</fieldset>
</div>
</ShouldRender>
<ShouldRender if={error}>