chore(app): ad missing file

components/purchasingFlow/CreditPaymentForm.js

@@ -0,0 +1,132 @@
+import React from 'react';
+import Cleave from 'cleave.js/react';
+import { Form, Input, InputNumber, Button, Tooltip, Icon, Switch } from 'antd';
+
+const FormItem = Form.Item;
+
+const ShowIconCard = ({ image }) => {
+  if (!image || image === 'unknown') {
+    return null;
+  }
+  return (
+    <img
+      className="zoom"
+      style={{ width: '32px' }}
+      src={`/static/cards/${image}.png`}
+    />
+  );
+};
+
+class CreditCardData extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      phoneRawValue: ''
+    };
+
+    this.onPhoneChange = this.onPhoneChange.bind(this);
+  }
+
+  onPhoneChange(event) {
+    this.setState({ phoneRawValue: event.target.rawValue });
+  }
+
+  render() {
+    const { getFieldDecorator } = this.props.form;
+    return (
+      <Form layout="horizontal">
+        <FormItem label="Nombre en la tarjeta">
+          {getFieldDecorator('userName', {
+            rules: [{ required: true, message: 'Please input your username!' }]
+          })(<Input size="large" placeholder="Fulanito de tal" />)}
+        </FormItem>
+
+        <FormItem label="Número de tarjeta">
+          {getFieldDecorator('card', {
+            rules: [
+              { required: true, message: 'Please input valid card number!' }
+            ]
+          })(
+            <span className="ant-input-affix-wrapper ant-input-affix-wrapper-lg">
+              <Cleave
+                className="ant-input ant-input-lg"
+                placeholder="1234 1234 1234 1234"
+                options={{
+                  creditCard: true,
+                  onCreditCardTypeChanged: this.onCreditCardTypeChanged
+                }}
+                onFocus={this.onCreditCardFocus}
+                onChange={this.onCreditCardChange}
+              />
+              <span className="ant-input-suffix">
+                {this.state.card}
+                <ShowIconCard image={this.state.creditCardRawValue} />
+              </span>
+            </span>
+          )}
+        </FormItem>
+        <FormItem label={<span>CVC</span>}>
+          {getFieldDecorator('cvc', {
+            rules: [{ required: true, message: 'Please use a valid cvc' }]
+          })(
+            <Input
+              size="large"
+              placeholder="123"
+              min={100}
+              max={9999}
+              suffix={
+                <Tooltip title="What do you want others to call you?">
+                  <Icon type="question-circle-o" />
+                </Tooltip>
+              }
+              // onChange={onChange}
+            />
+          )}
+        </FormItem>
+        <FormItem label="Expiración">
+          {getFieldDecorator('expiration', {
+            rules: [{ required: true, message: 'Please use a valid date' }]
+          })(
+            <Cleave
+              className="ant-input ant-input-lg"
+              placeholder="MM/AA"
+              options={{
+                date: true,
+                datePattern: ['m', 'y']
+              }}
+              onFocus={this.onCreditCardFocus}
+              onChange={this.onCreditCardChange}
+            />
+          )}
+        </FormItem>
+        <FormItem label="Cuotas">
+          {getFieldDecorator('installments', {
+            rules: [{ required: true, message: 'Please use a valid date' }]
+          })(
+            <InputNumber
+              size="large"
+              placeholder="1"
+              min={1}
+              max={48}
+              // onChange={onChange}
+            />
+          )}
+        </FormItem>
+        <FormItem label="Registrarse">
+          {getFieldDecorator('switch', { valuePropName: 'checked' })(
+            <Switch
+              size="large"
+              checkedChildren={<Icon type="check" />}
+              unCheckedChildren={<Icon type="close" />}
+            />
+          )}
+        </FormItem>
+      </Form>
+    );
+  }
+}
+
+const CreditPaymentForm = Form.create()(CreditCardData);
+
+export default CreditPaymentForm;

components/purchasingFlow/PersonalDataForm.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import Cleave from 'cleave.js/react';
+import { Form, Input, Button } from 'antd';
+import CleavePhone from 'cleave.js/dist/addons/cleave-phone.co';
+
+const FormItem = Form.Item;
+
+class PersonalData extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      creditCardRawValue: ''
+    };
+
+    this.onCreditCardTypeChanged = this.onCreditCardTypeChanged.bind(this);
+  }
+
+  handleSubmit = e => {
+    e.preventDefault();
+    this.props.form.validateFields((err, values) => {
+      if (!err) {
+        // console.log('Received values of form: ', values);
+      }
+    });
+  };
+
+  onCreditCardTypeChanged(type) {
+    this.setState({ creditCardRawValue: type });
+  }
+
+  render() {
+    const { getFieldDecorator } = this.props.form;
+    return (
+      <Form onSubmit={this.handleSubmit} layout="vertical">
+        <FormItem label="Correo Electronico" hasFeedback>
+          {getFieldDecorator('email', {
+            rules: [
+              {
+                type: 'email',
+                required: true,
+                message: 'Please input your email!'
+              }
+            ]
+          })(
+            <Input size="large" placeholder="[email protected]" id="success" />
+          )}
+        </FormItem>
+        <FormItem label="Número Celular" hasFeedback>
+          {getFieldDecorator('phone', {
+            rules: [{ required: true, message: 'Please input your cellphone!' }]
+          })(
+            <Cleave
+              className="ant-input ant-input-lg"
+              placeholder="316 4552112"
+              options={{ phone: true, phoneRegionCode: 'CO' }}
+              onChange={this.onPhoneChange}
+            />
+          )}
+        </FormItem>
+        <FormItem>
+          <Button
+            onClick={() => this.props.sendDataForm()}
+            block
+            size="large"
+            type="primary"
+            htmlType="submit"
+            className="login-form-button"
+          >
+            Pagar
+          </Button>
+        </FormItem>
+      </Form>
+    );
+  }
+}
+
+const PersonalDataForm = Form.create()(PersonalData);
+
+export default PersonalDataForm;

pages/checkout.js

@@ -0,0 +1,140 @@
+import React from 'react';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { Col, Row, Affix, Button, Steps, Icon } from 'antd';
+import { createUserRequest } from '../store/user/actions';
+import PersonalDataForm from '../components/purchasingFlow/PersonalDataForm.js';
+import TicketsDetails from '../components/events/TicketsDetails';
+import CreditPaymentForm from '../components/purchasingFlow/CreditPaymentForm.js';
+
+const { Step } = Steps;
+
+const personalDataForm = (createUser, currentStep) => {
+  return <PersonalDataForm sendDataForm={createUser} step={currentStep} />;
+};
+
+const steps = [
+  {
+    title: 'Información Personal',
+    content: personalDataForm,
+    description: 'Email y Celular',
+    icon: 'user'
+  },
+  {
+    title: 'Tipo de Pago',
+    content: <CreditPaymentForm />,
+    description: 'Debito o Crédito?',
+    icon: 'bank'
+  },
+  {
+    title: 'Información de Pago',
+    content: 'Second-content',
+    description: 'Los datos de tu tarjeta',
+    icon: 'credit-card'
+  },
+  {
+    title: 'Tickets',
+    content: 'Last-content',
+    description: 'Estás listo!',
+    icon: 'shake'
+  }
+];
+
+class Checkout extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      current: 0
+    };
+  }
+
+  next() {
+    const current = this.state.current + 1;
+    this.setState({ current });
+  }
+
+  prev() {
+    const current = this.state.current - 1;
+    this.setState({ current });
+  }
+
+  render() {
+    const { current } = this.state;
+    return (
+      <Row>
+        <Col span={15} offset={1} className="hero-section">
+          <Steps current={current}>
+            {steps.map(item => (
+              <Step
+                key={item.title}
+                title={item.title}
+                description={item.description}
+                icon={<Icon type={item.icon} theme="outlined" />}
+              />
+            ))}
+          </Steps>
+          <div className="steps-content">
+            {steps[current].content(this.props.createUserRequest, current)}
+          </div>
+          <div className="steps-action">
+            {current < steps.length - 1 && (
+              <Button type="primary" onClick={() => this.next()}>
+                Next
+              </Button>
+            )}
+            {current === steps.length - 1 && (
+              <Button
+                type="primary"
+                // onClick={() => message.success('Processing complete!')}
+              >
+                Done
+              </Button>
+            )}
+            {current > 0 && (
+              <Button style={{ marginLeft: 8 }} onClick={() => this.prev()}>
+                Previous
+              </Button>
+            )}
+          </div>
+        </Col>
+        <Col span={6} offset={1} className="hero-section tickets-price">
+          <Affix>
+            <TicketsDetails
+              ticketsInfo={this.props.tickets}
+              loading={this.props.loading}
+              total={this.props.total}
+              quantity={ticketId =>
+                this.props.cart.tickets[ticketId]
+                  ? this.props.cart.tickets[ticketId].quantity
+                  : '0'
+              }
+              handler={ticket => quantity =>
+                quantity === '0'
+                  ? this.props.removeTicket(ticket)
+                  : this.props.addTicket(ticket, quantity)}
+            />
+            <Button
+              type="primary"
+              size="large"
+              block
+              onClick={() => this.goTocheckout()}
+            >
+              Agregar
+            </Button>
+          </Affix>
+        </Col>
+      </Row>
+    );
+  }
+}
+
+const mapStateToProps = state => ({});
+
+const mapDispatchToProps = dispatch => {
+  return bindActionCreators({ createUserRequest }, dispatch);
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Checkout);

resources/sockets.js

@@ -0,0 +1,13 @@
+import io from 'socket.io-client';
+import store from '../store/configureStore';
+import { getUserId } from '../store/user/actions';
+
+const socket = io.connect('http://localhost:1234');
+console.log(store());
+export const confirmation = socket.on('news', function(data) {
+  console.log('DATA FROM SOCKETS=====>', data);
+  store().dispatch(getUserId(data));
+  socket.emit('my other event', { my: 'data' });
+});
+
+export default confirmation;

store/user/actions.js

@@ -0,0 +1,26 @@
+import {
+  GET_USER_ID,
+  CREATE_USER_REQUEST,
+  CREATE_USER_SUCCESS,
+  CREATE_USER_ERROR
+} from './constants';
+
+export const getUserId = id => ({
+  type: GET_USER_ID,
+  id
+});
+
+export const createUserRequest = email => ({
+  type: CREATE_USER_REQUEST,
+  email
+});
+
+export const createUserSuccess = action => ({
+  type: CREATE_USER_SUCCESS,
+  action
+});
+
+export const createUserFailure = error => ({
+  type: CREATE_USER_ERROR,
+  error
+});