hippo-fw 0.9.8 → 0.9.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: e97da3fa2dce1988dbd6c99f57b23fa97c107804
-  data.tar.gz: 6ddec0b54d142580acde726ad71285a0bd418a60
+  metadata.gz: 597e5e5e442b8cd8542db1feee9d6d1e63641b97
+  data.tar.gz: a93815487e35b9d64d9bd50e7b023cd6c3934bfc
 SHA512:
-  metadata.gz: bb9884ee011d186fb0465284b8e537507d64d806b60be2ee687a6c52f16555168640734dd1f87b727f61e7dccf5ea1df349e95c904c8b39e1c388ba87de013d8
-  data.tar.gz: 65bad2b85ca2f0d47ec885120dbf7dd73324f3f75fd3d67177ba7da1207684f39d3b65f51750c175900678059d1415f3b6112f75d41a0f23adc5cb8b943479d3
+  metadata.gz: 9d8d66bdad04271e665bcca7e864dc40a4cb72dc734b9eec26e3903db4a0b1b4ca22a5042cb2e6524e613d6a4eaa381dee94a7b563b7731b873b745b81a76b08
+  data.tar.gz: 38b2624aada6de1c152d4dc180533e744e9c4688e33c8011b68cb1057b96862efb5a007a4cd1c2501b1eb027628d959a89df2dab86e6902c522cadcf4cba241f

data/client/hippo/access/subscription-choice-layer.jsx

@@ -0,0 +1,170 @@
+import React from 'react';
+import { action, observable, computed } from 'mobx';
+import { observer } from 'mobx-react';
+import { sortBy }  from 'lodash';
+import SwipeableViews from 'react-swipeable-views';
+import Box from 'grommet/components/Box';
+import Button from 'grommet/components/Button';
+import NextIcon from 'grommet/components/icons/base/Next';
+import CloseIcon from 'grommet/components/icons/base/Close';
+import StarIcon from 'grommet/components/icons/base/Star';
+import Layer from 'grommet/components/Layer';
+import Tenant from '../models/tenant';
+import Subscription from '../models/subscription';
+import PaymentForm from './subscription-choice-layer/payment-form';
+import './subscription-choice-layer/subscription-choice.scss';
+
+@observer
+export default class SubscriptionChoiceLayer extends React.Component {
+
+    @observable subscriptionId = Tenant.current.subscription_id;
+    @observable displayIndex = 0;
+    @observable showSubscription = false;
+    @observable subscription;
+
+    @action.bound onSubscriptionSelect(ev) {
+        this.subscriptionId = ev.target.id;
+    }
+
+    @computed get sortedSubscriptions() {
+        return sortBy(Subscription.all, pl => parseFloat(pl.price));
+    }
+
+    @action.bound showCCForm(subscription) {
+        this.displayIndex = 1;
+        this.subscription = subscription;
+    }
+
+    @action.bound goToSubscriptions() {
+        this.displayIndex = 0;
+        this.subscription = null;
+    }
+
+    @action.bound onPaymentSuccess() {
+        this.displayIndex = 2;
+    }
+
+    @action.bound setSubscriptionOnTenant() {
+        Tenant.current.subscription_id = this.subscription.id;
+        if (this.props.onCancel) { this.props.onCancel(); }
+    }
+
+    renderSubscriptionChangeSuccess() {
+        if (this.displayIndex !== 2) { return <span />; }
+        const { subscription } = this;
+        return (
+            <Box
+                className="success"
+                margin="large"
+            >
+                <h4>You've selected the “{subscription.name}” subscription</h4>
+                <p>
+                    You can cancel the subscription or select a different
+                    one at any time from “System Settings”.
+                </p>
+                <Button
+                    label="Got it"
+                    onClick={this.setSubscriptionOnTenant}
+                />
+            </Box>
+        );
+    }
+
+    renderCardFields() {
+        if (this.displayIndex !== 1) { return <span />; }
+        const { subscription } = this;
+        return (
+            <PaymentForm
+                subscription={subscription}
+                onCancel={this.goToSubscriptions}
+                onSuccess={this.onPaymentSuccess}
+            />
+        );
+    }
+
+    @action.bound renderSubscriptionChoice(subscription) {
+        const isCurrent = (Tenant.current.subscription === subscription);
+        return (
+            <Box
+                key={subscription.id}
+                className="subscription"
+                margin={{ bottom: 'medium' }}
+                onClick={() => this.showCCForm(subscription)}
+            >
+                <Box
+                    direction="row"
+                    align="center"
+                >
+                    <Box flex>
+                        <Box direction="row" justify="between">
+                            <span>
+                                {subscription.name}
+                                {isCurrent && <StarIcon colorIndex="brand" size="small" />}
+                            </span>
+
+                            <span className="price">
+                                $ {subscription.formattedPrice}/month
+                            </span>
+                        </Box>
+                        <span>{subscription.description}</span>
+                    </Box>
+                    <NextIcon className="select"/>
+                </Box>
+            </Box>
+        );
+    }
+
+    renderCloseButton() {
+        if (!this.props.onCancel) { return null; }
+
+        return (
+            <Box margin={{ bottom: 'medium' }}  align="end">
+                <Button
+                    label="Close"
+                    icon={<CloseIcon />}
+                    onClick={this.props.onCancel}
+                />
+            </Box>
+        );
+    }
+
+    renderSubscriptionListing() {
+        if (this.props.isCanceling) {
+            return <CancelSubscription onCancel={this.props.onCancel} />;
+        }
+
+        return (
+            <Box
+                className="subscriptions-listing"
+                justify="around"
+            >
+                <h3>Choose subscription</h3>
+                {this.sortedSubscriptions.map(this.renderSubscriptionChoice)}
+                {this.renderCloseButton()}
+            </Box>
+        );
+    }
+
+    render() {
+        return (
+            <Layer
+                className="subscription-choice-layer"
+                closer={!!this.props.onCancel}
+                onClose={this.props.onCancel}
+            >
+                <Box
+                    margin={{ vertical: 'medium' }}
+                >
+                    <SwipeableViews
+                        disabled index={this.displayIndex}
+                    >
+                        {this.renderSubscriptionListing()}
+                        {this.renderCardFields()}
+                        {this.renderSubscriptionChangeSuccess()}
+                    </SwipeableViews>
+                </Box>
+            </Layer>
+        );
+    }
+
+}

data/client/hippo/access/subscription-choice-layer/cancel-subscription.jsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import { defer } from 'lodash';
+import { action, observable } from 'mobx';
+import { observer } from 'mobx-react';
+import Button from 'grommet/components/Button';
+import ClearIcon from 'grommet/components/icons/base/Clear';
+import CloseIcon from 'grommet/components/icons/base/Close';
+import Box from 'grommet/components/Box';
+import Config from '../../config';
+import User from '../../user';
+import Tenant from '../../models/tenant';
+import NetworkActivityOverlay from '../../components/network-activity-overlay';
+
+@observer
+export default class CancelSubscription extends React.Component {
+
+    @observable isCanceled = false;
+    @observable isCanceling = false;
+
+    @action.bound cancelSubscription() {
+        this.isCanceling = true;
+        Tenant.current.subscription.destroy().then(() => {
+            this.isCanceling = false;
+            this.isCanceled = true;
+        });
+    }
+
+    @action.bound onCancelComplete() {
+        this.props.onCancel();
+        User.logout();
+        defer(() => { Tenant.current.subscription_id = null; });
+    }
+
+    renderCanceled() {
+        window.c = Config;
+        return (
+            <Box className="subscription-canceled">
+                <h3>Subscription canceled</h3>
+                <h5>
+                    We're sorry to see you go!  If you'd ever like to contact us and
+                    share any feedback we can be reached
+                    at <a href={`mailto:${Config.support_email}`}>{Config.support_email}</a>
+                </h5>
+                <p>
+                    Your subscription to {Config.product_name} has been canceled.
+                    You can regain access to your account information by
+                    logging in and choosing a new plan.
+                </p>
+                <Box align="end">
+                    <Button
+                        critical
+                        icon={<ClearIcon />}
+                        onClick={this.onCancelComplete}
+                        label="Logout"
+                    />
+                </Box>
+            </Box>
+        );
+    }
+
+    render() {
+        if (this.isCanceled) { return this.renderCanceled(); }
+
+        return (
+            <Box
+                className="subscription-cancel"
+                justify="around"
+                size="large"
+            >
+                <NetworkActivityOverlay
+                    message="Canceling…"
+                    model={Tenant.current.subscription}
+                    visible={this.isCanceling}
+                />
+                <h3>Cancel subscription?</h3>
+                <h5>
+                    We're sorry to see you go!  If you'd ever like to contact us and
+                    share any feedback we can be reached
+                    at <a href={`mailto:${Config.support_email}`}>{Config.support_email}</a>
+                </h5>
+                <p>
+                    Canceling your subscription will immediately revoke
+                    your access to {Config.product_name}, and will suspend
+                    all of your current listings.
+                </p>
+                <p>
+                    Your data will remain intact and can be accessed once you
+                    re-subscribe to a plan.
+                </p>
+                <Box
+                    justify="between"
+                    direction="row"
+                    pad={{ between: 'small' }}
+                >
+                    <Button
+                        critical
+                        icon={<ClearIcon />}
+                        onClick={this.cancelSubscription}
+                        label="Cancel Subscription"
+                    />
+                    <Button
+                        label="Close"
+                        icon={<CloseIcon />}
+                        onClick={this.props.onCancel}
+                    />
+                </Box>
+            </Box>
+        );
+    }
+
+}

data/client/hippo/access/subscription-choice-layer/payment-form.jsx

@@ -0,0 +1,154 @@
+import React from 'react';
+import { each, every } from 'lodash';
+import { action, observable, computed } from 'mobx';
+import { observer } from 'mobx-react';
+import PaymentFields from 'payment-fields';
+import Button from 'grommet/components/Button';
+import CreditCardIcon from 'grommet/components/icons/base/CreditCard';
+import Box from 'grommet/components/Box';
+import NetworkActivityOverlay from '../../components/network-activity-overlay';
+import CardField from '../../components/payments/field';
+import WarningNotification from '../../components/warning-notification';
+
+@observer
+export default class PaymentForm extends React.Component {
+
+    @observable isTokenizing = false;
+    @observable getToken;
+    @observable fields = {
+        postalCode: false,
+        cardNumber: false,
+        expirationDate: false,
+        cvv: false,
+    }
+
+    componentWillMount() {
+        this.props.subscription.fetch();
+    }
+
+    @action.bound setFieldRef(ref) {
+        if (ref) {
+            this.fields[ref.props.type] = ref;
+        }
+    }
+
+    @action.bound onSubscribe() {
+        if (!every(this.fields, 'isValid')) {
+            each(this.fields, f => f.exposeError());
+            return;
+        }
+        this.subscribeToSubscription();
+    }
+
+    @action.bound onFormReady(ev) {
+        this.getToken = ev.tokenize;
+    }
+
+    @action.bound subscribeToSubscription() {
+        this.isTokenizing = true;
+        const { subscription } = this.props;
+        this.getToken().then(({ token: { nonce } }) => {
+            subscription.nonce = nonce;
+            return subscription.save().then(() => {
+                this.isTokenizing = false;
+                if (!subscription.errorMessage) {
+                    this.props.onSuccess();
+                }
+            });
+        }).catch(({ message }) => {
+            subscription.errors = { base: message };
+            this.isTokenizing = false;
+        });
+    }
+
+    @computed get isBusy() {
+        return !this.getToken || this.isTokenizing;
+    }
+
+    render() {
+        const { subscription } = this.props;
+        if (!subscription) { return <span />; }
+
+        return (
+            <PaymentFields
+                className="payment-form"
+                vendor="Braintree"
+                onReady={this.onFormReady}
+                ref={this.setPaymentRef}
+                authorization={subscription.authorization}
+                styles={{
+                    base: {
+                        color: '#3a3a3a',
+                        'line-height': '40px',
+                        'font-size': '16px',
+                    },
+                    focus: {
+                        color: 'black',
+                    },
+                }}
+            >
+                <NetworkActivityOverlay
+                    message={this.isTokenizing ? 'Subscribing…' : 'Initializing'}
+                    visible={this.isBusy}
+                    model={subscription}
+                />
+                <Box
+                    margin="medium"
+                    pad={{ between: 'small' }}
+                >
+                    <h4>
+                        Card to bill for “{subscription.name}” plan
+                        (${subscription.formattedPrice}/mo)
+                    </h4>
+
+                    <CardField
+                        errorMessage="Invalid Card"
+                        label="Card Number"
+                        type="cardNumber"
+                        placeholder="•••• •••• •••• ••••"
+                        ref={this.setFieldRef}
+                    />
+                    <CardField
+                        label="Expiration"
+                        placeholder="MM / YY"
+                        type="expirationDate"
+                        errorMessage="Invalid Date"
+                        ref={this.setFieldRef}
+                    />
+                    <CardField
+                        label="CVV"
+                        type="cvv"
+                        errorMessage="Invalid"
+                        ref={this.setFieldRef}
+                    />
+                    <CardField
+                        label="Postal Code"
+                        type="postalCode"
+                        errorMessage="Invalid"
+                        ref={this.setFieldRef}
+                    />
+
+                    <WarningNotification
+                        flex margin="medium"
+                        message={subscription.errorMessage}
+                    />
+
+                </Box>
+
+                <Box
+                    justify="end"
+                    direction="row"
+                    margin="medium"
+                    pad={{ between: 'small' }}
+                >
+                    <Button label="Back" onClick={this.props.onCancel} />
+                    <Button
+                        onClick={this.isBusy ? null : this.onSubscribe}
+                        primary icon={<CreditCardIcon />}
+                        label="Start Subscription" />
+                </Box>
+            </PaymentFields>
+        );
+    }
+
+}

data/client/hippo/access/subscription-choice-layer/subscription-choice.scss

@@ -0,0 +1,29 @@
+.subscription-choice-layer {
+
+    .subscriptions-listing {
+        min-height: 350px;
+        polyline {
+            transition: all 0.2s;
+        }
+        .subscription {
+            &:hover {
+                polyline {
+                    stroke-width: 3px;
+                    stroke: black;
+                }
+            }
+        }
+    }
+
+    .payment-fields-wrapper {
+        min-height: 400px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .grommetux-control-icon-next {
+        margin-left: 1rem;
+    }
+
+}