tenant.jsx in hippo-fw-0.9.9

- old
+ new

@@ -1,21 +1,23 @@
 import React from 'react';
 import { observer } from 'mobx-react';
-import { observable } from 'mobx';
+import { observable, action } from 'mobx';
 import { Row } from 'react-flexbox-grid';
 import Heading from 'grommet/components/Heading';
 import Box from 'grommet/components/Box';
 import { Form, Field, FormState, nonBlank } from 'hippo/components/form';
-
 import Notification from 'grommet/components/Notification';
 import Layer from 'grommet/components/Layer';
 import Paragraph from 'grommet/components/Paragraph';
 import Anchor from 'grommet/components/Anchor';
+import Button from 'grommet/components/Button';
 import LinkIcon from 'grommet/components/icons/base/Link';
-
+import UserAdminIcon from 'grommet/components/icons/base/UserAdmin';
+import ClearIcon from 'grommet/components/icons/base/Clear';
 import Tenant from '../../models/tenant';
 import Config from '../../config';
+import SubscriptionChoiceLayer from '../../access/subscription-choice-layer';
 
 function onTenantSlugChangeClose() { }
 
 function TenantSlugChange({ oldSlug }) {
     if (!oldSlug) { return null; }
@@ -31,15 +33,17 @@
         </Layer>
     );
 }
 
 @observer
-export default class TenantConfig extends React.PureComponent {
+export default class TenantConfig extends React.Component {
 
     formState = new FormState()
 
     @observable slugChangedFrom;
+    @observable isCanceling;
+    @observable showSubscriptionChoice = false;
 
     onSave() {
         const originalSlug = Tenant.current.slug;
         this.formState
             .persistTo(Tenant.current)
@@ -49,14 +53,41 @@
                     this.slugChangedFrom = originalSlug;
                 }
             });
     }
 
+    @action.bound onSubscriptionChange() {
+        this.showSubscriptionChoice = {
+            isCanceling: false,
+        };
+    }
+
+    @action.bound onSubscriptionCancel() {
+        this.showSubscriptionChoice = {
+            isCanceling: true,
+        };
+    }
+
+    @action.bound hideSubscriptionChoice() {
+        this.showSubscriptionChoice = false;
+    }
+
     componentWillMount() {
         this.formState.setFromModel(Tenant.current);
     }
 
+    renderSubscriptionChoice() {
+        if (!this.showSubscriptionChoice) { return null; }
+        return (
+            <SubscriptionChoiceLayer
+                displayCancel
+                {...this.showSubscriptionChoice}
+                onCancel={this.hideSubscriptionChoice}
+                onChoice={this.hideSubscriptionChoice} />
+        );
+    }
+
     renderIdChangeWarning() {
         const slug = this.formState.get('slug.value');
         if (!Tenant.current.slug || slug === Tenant.current.slug) {
             return null;
         }
@@ -69,18 +100,40 @@
     }
 
     render() {
         return (
             <Form tag="div" className="tenant-edit-form" state={this.formState}>
+                {this.renderSubscriptionChoice()}
                 <TenantSlugChange oldSlug={this.slugChangedFrom} />
                 <Heading tag="h3">Account</Heading>
                 <Row>
                     <Field
                         xs={6} name="slug"
                         label="Identifier"
                         validate={nonBlank}
                     />
                     <Field xs={6} name="name" validate={nonBlank} />
+                </Row>
+                <Row>
+                    <Field
+                        xs={12} type="label"
+                        label="Subscription"
+                        name="subscription_name"
+                        value={
+                            <Box direction="row" justify="between">
+                                <Button
+                                    plain label={Tenant.current.subscription.nameAndCost}
+                                    icon={<UserAdminIcon />}
+                                    onClick={this.onSubscriptionChange}
+                                />
+                                <Button
+                                    plain label="Cancel"
+                                    icon={<ClearIcon />}
+                                    onClick={this.onSubscriptionCancel}
+                                />
+                            </Box>
+                        }
+                    />
                 </Row>
                 {this.renderIdChangeWarning()}
             </Form>
         );
     }