GOOGLE PAY

app/reducers/registrations.js

@@ -1,6 +1,6 @@
 // @flow
 
-import { union } from 'lodash';
+import { union, get } from 'lodash';
 import { Event } from '../actions/ActionTypes';
 import createEntityReducer from 'app/utils/createEntityReducer';
 import { normalize } from 'normalizr';
@@ -34,13 +34,22 @@ export default createEntityReducer({
         if (!registration) {
           return state;
         }
+        console.log('dsada');
+        let paymentErrorData = {};
+        if (action.type === Event.SOCKET_PAYMENT.FAILURE) {
+          paymentErrorData.paymentError = get(action, 'meta.errorMessage');
+        }
         return {
           ...state,
           byId: {
             ...state.byId,
             [registration.id]: {
-              ...omit(state.byId[registration.id], 'unregistrationDate'),
-              ...registration
+              ...omit(state.byId[registration.id], [
+                'unregistrationDate',
+                'paymentError'
+              ]),
+              ...registration,
+              ...paymentErrorData
             }
           },
           items: union(state.items, [registration.id])

app/routes/events/components/JoinEventForm.js

@@ -5,7 +5,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { reduxForm, Field, SubmissionError } from 'redux-form';
-import { Form, Captcha, TextEditor } from 'app/components/Form';
+import { Form, Captcha, TextInput } from 'app/components/Form';
 import Button from 'app/components/Button';
 import PaymentRequestForm from './StripeElement';
 import { ConfirmModalWithParent } from 'app/components/Modal/ConfirmModal';
@@ -224,26 +224,13 @@ class JoinEventForm extends Component<Props> {
                     id={feedbackName}
                     placeholder="Melding til arrangører"
                     name={feedbackName}
-                    component={TextEditor.Field}
+                    component={TextInput.Field}
+                    suffix={'Lagre'}
                     labelClassName={styles.feedbackLabel}
                     className={styles.feedbackText}
                     fieldClassName={styles.feedbackField}
                     rows={1}
                   />
-                  {registration && (
-                    <Button
-                      type="button"
-                      onClick={this.submitWithType(
-                        handleSubmit,
-                        feedbackName,
-                        'feedback'
-                      )}
-                      className={styles.feedbackUpdateButton}
-                      disabled={pristine}
-                    >
-                      Oppdater
-                    </Button>
-                  )}
                 </Flex>
                 {showCaptcha && (
                   <Field
@@ -261,7 +248,11 @@ class JoinEventForm extends Component<Props> {
                 )}
                 {buttonOpen && !submitting && (
                   <>
-                    <Flex alignItems="center" justifyContent="space-between">
+                    <Flex
+                      column
+                      alignItems="center"
+                      justifyContent="space-between"
+                    >
                       <SubmitButton
                         disabled={disabledButton}
                         onSubmit={this.submitWithType(
@@ -274,12 +265,16 @@ class JoinEventForm extends Component<Props> {
                         showPenaltyNotice={showPenaltyNotice}
                       />
                       {registration && showStripe && (
-                        <PaymentRequestForm
-                          onToken={onToken}
-                          event={event}
-                          currentUser={currentUser}
-                          chargeStatus={registration.chargeStatus}
-                        />
+                        <div style={{ width: '100%' }}>
+                          <div className={styles.joinHeader}>Betaling</div>
+                          Du skal betale 254,-
+                          <PaymentRequestForm
+                            onToken={onToken}
+                            event={event}
+                            currentUser={currentUser}
+                            chargeStatus={registration.chargeStatus}
+                          />
+                        </div>
                       )}
                     </Flex>
                     {!registration && (

app/routes/events/components/Stripe.css

@@ -0,0 +1,68 @@
+.Checkout {
+  margin: 0 auto;
+  max-width: 800px;
+  box-sizing: border-box;
+  padding: 0 5px;
+}
+
+label {
+  color: #6b7c93;
+  font-weight: 300;
+  letter-spacing: 0.025em;
+}
+
+button {
+  white-space: nowrap;
+  border: 0;
+  outline: 0;
+  display: inline-block;
+  height: 40px;
+  line-height: 40px;
+  padding: 0 14px;
+  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
+  color: #fff;
+  border-radius: 4px;
+  font-size: 15px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+  background-color: #6772e5;
+  text-decoration: none;
+  -webkit-transition: all 150ms ease;
+  transition: all 150ms ease;
+  margin-top: 10px;
+}
+
+button:hover {
+  color: #fff;
+  cursor: pointer;
+  background-color: #7795f8;
+  transform: translateY(-1px);
+  box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
+}
+
+.StripeElement {
+  display: block;
+  margin: 10px 0 20px 0;
+  max-width: 500px;
+  padding: 10px 14px;
+  font-size: 1em;
+  font-family: 'Source Code Pro', monospace;
+  box-shadow: rgba(50, 50, 93, 0.14902) 0px 1px 3px,
+    rgba(0, 0, 0, 0.0196078) 0px 1px 0px;
+  border: 0;
+  outline: 0;
+  border-radius: 4px;
+  background: white;
+}
+
+input::placeholder {
+  color: #aab7c4;
+}
+
+.StripeElement--focus {
+  box-shadow: rgba(50, 50, 93, 0.109804) 0px 4px 6px,
+    rgba(0, 0, 0, 0.0784314) 0px 1px 3px;
+  -webkit-transition: all 150ms ease;
+  transition: all 150ms ease;
+}