mirror of
https://github.com/LaCasemate/fab-manager.git
synced 2025-02-19 13:54:25 +01:00
WIP: plan card
This commit is contained in:
parent
571a273ea2
commit
2b014304ce
@ -1,22 +0,0 @@
|
||||
// This is a demonstration of using react components inside an angular.js 1.x app
|
||||
// TODO remove this
|
||||
|
||||
import React from 'react';
|
||||
import { react2angular } from 'react2angular';
|
||||
import Application from './application';
|
||||
|
||||
interface MyComponentProps {
|
||||
fooBar: number,
|
||||
baz: string
|
||||
}
|
||||
|
||||
const MyComponent: React.FC<MyComponentProps> = ({ fooBar, baz }) => {
|
||||
return (
|
||||
<div>
|
||||
<p>FooBar: {fooBar}</p>
|
||||
<p>Baz: {baz}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Application.Components.component('myComponent', react2angular(MyComponent, ['fooBar', 'baz']));
|
29
app/frontend/src/javascript/components/plan-card.tsx
Normal file
29
app/frontend/src/javascript/components/plan-card.tsx
Normal file
@ -0,0 +1,29 @@
|
||||
/**
|
||||
* This component is a "card" publicly presenting the details of a plan
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { react2angular } from 'react2angular';
|
||||
import Application from '../models/application';
|
||||
import { Plan } from '../models/plan';
|
||||
|
||||
interface PlanCardProps {
|
||||
plan: Plan
|
||||
}
|
||||
|
||||
const PlanCard: React.FC<PlanCardProps> = ({ plan }) => {
|
||||
return (
|
||||
<div>
|
||||
<h3 className="title">{plan.base_name}</h3>
|
||||
<div className="content">
|
||||
<div className="wrap">
|
||||
<div className="price">
|
||||
{plan.amount}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Application.Components.component('planCard', react2angular(PlanCard, ['plan']));
|
@ -1,5 +1,5 @@
|
||||
import Switch from 'react-switch';
|
||||
import { react2angular } from 'react2angular';
|
||||
import Application from './application';
|
||||
import Application from '../models/application';
|
||||
|
||||
Application.Components.component('switch', react2angular(Switch, ['checked', 'onChange', 'id', 'className']));
|
||||
|
41
app/frontend/src/javascript/models/plan.ts
Normal file
41
app/frontend/src/javascript/models/plan.ts
Normal file
@ -0,0 +1,41 @@
|
||||
import { Price } from './price';
|
||||
|
||||
export enum Interval {
|
||||
Year = 'year',
|
||||
Month = 'month',
|
||||
Week = 'week'
|
||||
}
|
||||
|
||||
export enum PlanType {
|
||||
Plan = 'Plan',
|
||||
PartnerPlan = 'PartnerPlan'
|
||||
}
|
||||
|
||||
export interface Partner {
|
||||
first_name: string,
|
||||
last_name: string,
|
||||
email: string
|
||||
}
|
||||
|
||||
export interface Plan {
|
||||
id: number,
|
||||
base_name: string,
|
||||
name: string,
|
||||
interval: Interval,
|
||||
interval_count: number,
|
||||
group_id: number,
|
||||
training_credit_nb: number,
|
||||
is_rolling: boolean,
|
||||
description: string,
|
||||
type: PlanType,
|
||||
ui_weight: number,
|
||||
disabled: boolean,
|
||||
monthly_payment: boolean
|
||||
amount: number
|
||||
prices: Array<Price>,
|
||||
plan_file_attributes: {
|
||||
id: number,
|
||||
attachment_identifier: string
|
||||
},
|
||||
partners: Array<Partner>
|
||||
}
|
8
app/frontend/src/javascript/models/price.ts
Normal file
8
app/frontend/src/javascript/models/price.ts
Normal file
@ -0,0 +1,8 @@
|
||||
export interface Price {
|
||||
id: number,
|
||||
group_id: number,
|
||||
plan_id: number,
|
||||
priceable_type: string,
|
||||
priceable_id: number,
|
||||
amount: number
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user