@openeventkit/event-site 2.0.76 → 2.0.77

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openeventkit/event-site",
   "description": "Event Site",
-  "version": "2.0.76",
+  "version": "2.0.77",
   "author": "Tipit LLC",
   "dependencies": {
     "@mui/base": "^5.0.0-alpha.114",
@@ -78,7 +78,7 @@
     "netlify-cms-app": "^2.15.72",
     "netlify-cms-lib-widgets": "^1.8.0",
     "node-sass-utils": "^1.1.3",
-    "openstack-uicore-foundation": "4.1.55",
+    "openstack-uicore-foundation": "4.1.57",
     "path-browserify": "^1.0.1",
     "prop-types": "^15.6.0",
     "react": "^18.2.0",
@@ -120,7 +120,7 @@
     "stream-browserify": "^3.0.0",
     "stream-chat": "^2.7.2",
     "stream-chat-react": "3.1.7",
-    "summit-registration-lite": "5.0.13",
+    "summit-registration-lite": "5.0.15",
     "superagent": "8.0.9",
     "sweetalert2": "^9.17.0",
     "upcoming-events-widget": "3.0.5",

package/src/actions/extra-questions-actions.js

@@ -0,0 +1,51 @@
+import {
+    getAccessToken,
+    clearAccessToken,
+} from 'openstack-uicore-foundation/lib/security/methods';
+
+import {
+    getRequest,
+    createAction,
+    startLoading,
+    stopLoading,
+} from 'openstack-uicore-foundation/lib/utils/actions';
+
+import { customErrorHandler } from '../utils/customErrorHandler';
+
+export const GET_ATTENDEE_DATA = 'GET_ATTENDEE_DATA';
+export const REQUEST_ATTENDEE_DATA = 'REQUEST_ATTENDEE_DATA';
+
+export const getAttendeeData = (attendeeId) => async (dispatch, getState) => {
+
+    let accessToken;
+    try {
+      accessToken = await getAccessToken();
+    } catch (e) {
+      console.log('getAccessToken error: ', e);
+      return Promise.reject();
+    }
+  
+    let params = {
+      access_token: accessToken,
+      expand: 'tickets,tickets.owner,extra_questions'
+    };    
+  
+    dispatch(startLoading());
+  
+    return getRequest(
+      createAction(REQUEST_ATTENDEE_DATA),
+      createAction(GET_ATTENDEE_DATA),
+      `${window.API_BASE_URL}/api/v1/summits/${window.SUMMIT_ID}/attendees/${attendeeId}/me`,
+      customErrorHandler
+    )(params)(dispatch)
+      .then((payload) => {
+        dispatch(stopLoading())
+        return payload;
+      })
+      .catch((e) => {
+        dispatch(stopLoading());
+        console.log('ERROR: ', e);
+        clearAccessToken();
+        return (e);
+      });
+  }

package/src/actions/summit-actions.js

@@ -16,7 +16,7 @@ import { customErrorHandler } from '../utils/customErrorHandler';
 
 export const GET_EXTRA_QUESTIONS = 'GET_EXTRA_QUESTIONS';
 
-export const getExtraQuestions = () => async (dispatch, getState) => {
+export const getExtraQuestions = (attendeeId = null) => async (dispatch, getState) => {
 
     dispatch(startLoading());
 
@@ -28,7 +28,7 @@ export const getExtraQuestions = () => async (dispatch, getState) => {
         return Promise.reject(e);
     }
 
-    let apiUrl = URI(`${window.API_BASE_URL}/api/v1/summits/${window.SUMMIT_ID}/attendees/me/allowed-extra-questions`);
+    let apiUrl = URI(`${window.API_BASE_URL}/api/v1/summits/${window.SUMMIT_ID}/attendees/${attendeeId ? attendeeId : 'me'}/allowed-extra-questions`);
     apiUrl.addQuery('expand', '*sub_question_rules,*sub_question,*values')
     apiUrl.addQuery('access_token', accessToken);
     apiUrl.addQuery('order', 'order');

package/src/actions/user-actions.js

@@ -434,7 +434,7 @@ export const updatePassword = (password) => async (dispatch) => {
     });
 }
 
-export const saveAttendeeQuestions = (values) => async (dispatch, getState) => {
+export const saveAttendeeQuestions = (values, ticketId = null) => async (dispatch, getState) => {
 
   const { userState: { userProfile: { summit_tickets } } } = getState();  
 
@@ -465,7 +465,7 @@ export const saveAttendeeQuestions = (values) => async (dispatch, getState) => {
   return putRequest(
     null,
     createAction(UPDATE_EXTRA_QUESTIONS),
-    `${window.API_BASE_URL}/api/v1/summits/all/orders/all/tickets/${summit_tickets[0].id}`,
+    `${window.API_BASE_URL}/api/v1/summits/all/orders/all/tickets/${ticketId ? ticketId : summit_tickets[0].id}`,
     normalizedEntity,
     customErrorHandler
   )(params)(dispatch).then(() => {

package/src/components/RegistrationLiteComponent.js

@@ -112,14 +112,14 @@ const RegistrationLiteComponent = ({
     const inPersonDisclaimer = getSettingByKey(MARKETING_SETTINGS_KEYS.registrationInPersonDisclaimer);
     const allowPromoCodes = !!Number(getSettingByKey(MARKETING_SETTINGS_KEYS.regLiteAllowPromoCodes));
     const companyDDLPlaceholder = getSettingByKey(MARKETING_SETTINGS_KEYS.regLiteCompanyDDLPlaceholder);
-    const showCompanyInputDefaultOptions = getSettingByKey(MARKETING_SETTINGS_KEYS.regLiteShowCompanyInputDefaultOptions)
-    const showCompanyInput = getSettingByKey(MARKETING_SETTINGS_KEYS.regLiteShowCompanyInput)
-    const initialOrderComplete1stParagraph = getSettingByKey(MARKETING_SETTINGS_KEYS.regLiteInitialOrderComplete1stParagraph)
-    const initialOrderComplete2ndParagraph = getSettingByKey(MARKETING_SETTINGS_KEYS.regLiteInitialOrderComplete2ndParagraph)
-    const initialOrderCompleteButton = getSettingByKey(MARKETING_SETTINGS_KEYS.regLiteInitialOrderCompleteButton)
-    const orderComplete1stParagraph = getSettingByKey(MARKETING_SETTINGS_KEYS.regLiteOrderComplete1stParagraph)
-    const orderComplete2ndParagraph = getSettingByKey(MARKETING_SETTINGS_KEYS.regLiteOrderComplete2ndParagraph)
-    const orderCompleteButton = getSettingByKey(MARKETING_SETTINGS_KEYS.regLiteOrderCompleteButton)
+    const showCompanyInputDefaultOptions = !!Number(getSettingByKey(MARKETING_SETTINGS_KEYS.regLiteShowCompanyInputDefaultOptions));
+    const showCompanyInput = !!Number(getSettingByKey(MARKETING_SETTINGS_KEYS.regLiteShowCompanyInput));
+    const initialOrderComplete1stParagraph = getSettingByKey(MARKETING_SETTINGS_KEYS.regLiteInitialOrderComplete1stParagraph);
+    const initialOrderComplete2ndParagraph = getSettingByKey(MARKETING_SETTINGS_KEYS.regLiteInitialOrderComplete2ndParagraph);
+    const initialOrderCompleteButton = getSettingByKey(MARKETING_SETTINGS_KEYS.regLiteInitialOrderCompleteButton);
+    const orderComplete1stParagraph = getSettingByKey(MARKETING_SETTINGS_KEYS.regLiteOrderComplete1stParagraph);
+    const orderComplete2ndParagraph = getSettingByKey(MARKETING_SETTINGS_KEYS.regLiteOrderComplete2ndParagraph);
+    const orderCompleteButton = getSettingByKey(MARKETING_SETTINGS_KEYS.regLiteOrderCompleteButton);
     const noAllowedTicketsMessage = getSettingByKey(MARKETING_SETTINGS_KEYS.regLiteNoAllowedTicketsMessage);
 
     const widgetProps = {
@@ -143,18 +143,16 @@ const RegistrationLiteComponent = ({
             getUserProfile().catch((e) => console.log("getUserProfile error. Not logged in?"));
             setIsActive(false);
         },
-        goToExtraQuestions: () => {
-            navigate("/a/extra-questions");
+        goToExtraQuestions: (attendeeId) => {
+            navigate(`/a/extra-questions${attendeeId ? `/#attendee=${attendeeId}` : ''}`);
         },
         goToEvent: () => navigate("/a/"),
         goToRegistration: () => navigate(`${getEnvVariable(REGISTRATION_BASE_URL)}/a/${summit.slug}`),
         goToMyOrders: () => navigate("/a/my-tickets"),
-        completedExtraQuestions: async (order) => {
-            const currentUserTicket = order?.tickets.find(t => t?.owner?.email == userProfile?.email);
-            const currentAttendee = attendee ? attendee : (currentUserTicket ? currentUserTicket?.owner : null);
-            if(!currentAttendee) return true;
-            await getExtraQuestions();
-            return checkRequireExtraQuestionsByAttendee(currentAttendee);
+        completedExtraQuestions: async (attendee) => {            
+            if(!attendee) return true;
+            await getExtraQuestions(attendee?.id);
+            return checkRequireExtraQuestionsByAttendee(attendee);
         },
         onPurchaseComplete: (order) => {
             // check if it"s necessary to update profile
@@ -188,8 +186,8 @@ const RegistrationLiteComponent = ({
         orderComplete2ndParagraph: orderComplete2ndParagraph,
         orderCompleteButton: orderCompleteButton,
         noAllowedTicketsMessage: noAllowedTicketsMessage,
-        showCompanyInput: showCompanyInput.toString().toLowerCase() == "1",
-        showCompanyInputDefaultOptions: showCompanyInputDefaultOptions.toString().toLowerCase() == "1",
+        showCompanyInput: showCompanyInput,
+        showCompanyInputDefaultOptions: showCompanyInputDefaultOptions,
     };
 
     const { registerButton } = marketingPageSettings.hero.buttons;

package/src/pages/a/[...].js

@@ -14,7 +14,6 @@ import ShowOpenRoute from "../../routes/ShowOpenRoute";
 import WithBadgeRoute from "../../routes/WithBadgeRoute";
 import PosterDetailPage from "../../templates/poster-detail-page";
 import MyTicketsPage from "../../templates/my-tickets-page";
-import WithTicketRoute from "../../routes/WithTicketRoute";
 import withRealTimeUpdates from "../../utils/real_time_updates/withRealTimeUpdates";
 import withFeedsWorker from "../../utils/withFeedsWorker";
 import Seo from "../../components/Seo";
@@ -38,9 +37,7 @@ const App = ({ isLoggedUser, user, summitPhase, allowClick = true }) => {
           <WithAuthRoute path="/" isLoggedIn={isLoggedUser} location={location}>
             <MyTicketsPage path="/my-tickets" isLoggedIn={isLoggedUser} user={user} location={location} />
             <FullProfilePage path="/profile" summitPhase={summitPhase} isLoggedIn={isLoggedUser} user={user} location={location} />
-            <WithTicketRoute path="/extra-questions" location={location}>
-                <ExtraQuestionsPage path="/" isLoggedIn={isLoggedUser} user={user} location={location} />
-            </WithTicketRoute>
+            <ExtraQuestionsPage path="/extra-questions" isLoggedIn={isLoggedUser} user={user} location={location} />
             <WithAuthzRoute path="/" summitPhase={summitPhase} isLoggedIn={isLoggedUser} user={user} location={location}>
                 <PostersPage path="/posters" trackGroupId={0} location={location} />
                 <PostersPage path="/posters/:trackGroupId" location={location} />

package/src/reducers/extra-questions-reducer.js

@@ -0,0 +1,38 @@
+import { LOGOUT_USER } from 'openstack-uicore-foundation/lib/security/actions';
+import { START_LOADING, STOP_LOADING } from "openstack-uicore-foundation/lib/utils/actions";
+import {
+    GET_ATTENDEE_DATA, REQUEST_ATTENDEE_DATA
+} from '../actions/extra-questions-actions';
+import { RESET_STATE } from '../actions/base-actions-definitions';
+import { UPDATE_EXTRA_QUESTIONS } from '../actions/user-actions';
+
+const DEFAULT_STATE = {
+    loading: false,
+    attendee: null
+}
+
+const extraQuestionReducer = (state = DEFAULT_STATE, action) => {
+    const { type, payload } = action;
+    switch (type) {
+        case RESET_STATE:
+        case UPDATE_EXTRA_QUESTIONS:
+        case LOGOUT_USER: {
+            return DEFAULT_STATE;
+        }
+        case START_LOADING:
+            return { ...state, loading: true };
+        case STOP_LOADING:
+            return { ...state, loading: false };
+        case REQUEST_ATTENDEE_DATA: {
+            return { ...state, attendee: null }
+        }
+        case GET_ATTENDEE_DATA: {
+            const attendee = payload.response;
+            return { ...state, attendee }
+        }
+        default:
+            return state;
+    }
+};
+
+export default extraQuestionReducer;

package/src/state/store.js

@@ -13,6 +13,7 @@ import presentationsReducer from "../reducers/presentations-reducer";
 import eventReducer from "../reducers/event-reducer";
 import speakerReducer from "../reducers/speaker-reducer";
 import sponsorReducer from "../reducers/sponsor-reducer";
+import extraQuestionReducer from "../reducers/extra-questions-reducer";
 
 // get from process.env bc window is not set yet
 const clientId = process.env.GATSBY_OAUTH2_CLIENT_ID;
@@ -44,6 +45,7 @@ const persistedReducers = persistCombineReducers(config, {
   summitState: summitReducer,
   speakerState: speakerReducer,
   sponsorState: sponsorReducer,
+  extraQuestionState: extraQuestionReducer
 });
 
 function appendLoggedUser({ getState }) {

package/src/styles/extra-questions.module.scss

@@ -3,6 +3,12 @@
 @import "bulma/sass/form/_all.sass";
 
 @import "colors.scss";
+
+.extraQuestionsAttendeeWarning {
+  padding: 2rem 6rem;
+  font-weight: bold;  
+}
+
 .extraQuestionsContainer {
 
   h2, h1, h3{

package/src/templates/extra-questions-page.js

@@ -1,32 +1,35 @@
 import React, { useEffect, useState, useRef, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { navigate } from "gatsby";
 import Layout from '../components/Layout';
 import { useFormik } from 'formik';
 import { useTranslation } from "react-i18next";
 import * as Yup from 'yup';
+import { isEmpty } from "lodash";
 
 import { getExtraQuestions } from '../actions/summit-actions';
 import { saveAttendeeQuestions } from '../actions/user-actions';
 import { TICKET_ATTENDEE_KEYS as TicketKeys } from '../components/summit-my-orders-tickets/store/actions/ticket-actions';
 import { Input, RegistrationCompanyInput, RawHTML } from 'openstack-uicore-foundation/lib/components';
+import FragmentParser from "openstack-uicore-foundation/lib/utils/fragment-parser";
 import QuestionsSet from 'openstack-uicore-foundation/lib/utils/questions-set';
 import ExtraQuestionsForm from 'openstack-uicore-foundation/lib/components/extra-questions';
 
 import { DefaultScrollBehaviour as ScrollBehaviour } from '@utils/scroll';
 
 import styles from '../styles/extra-questions.module.scss';
+import { getAttendeeData } from '../actions/extra-questions-actions';
+import HeroComponent from "../components/HeroComponent";
 
 const noOpFn = () => {};
 
-export const ExtraQuestionsPageTemplate = ({ user, summit, extraQuestions, saveAttendeeQuestions }) => {
+export const ExtraQuestionsPageTemplate = ({ user, summit, extraQuestions, attendee, attendeeId, saveAttendeeQuestions, someoneElseLoaded }) => {
 
     const { t } = useTranslation();
     const formRef = useRef(null);
     const [triedSubmitting, setTriedSubmitting] = useState(false);
 
-    const ticket = user.summit_tickets.length > 0 ? user.summit_tickets[user.summit_tickets.length - 1] : null;
+    const ticket = attendee ? attendee.tickets[0]  : user.summit_tickets.length > 0 ? user.summit_tickets[user.summit_tickets.length - 1] : null;
     const hasExtraQuestions = extraQuestions.length > 0;
 
     const initialValues = useMemo(() => {
@@ -69,7 +72,8 @@ export const ExtraQuestionsPageTemplate = ({ user, summit, extraQuestions, saveA
 
     const handleSubmit = (values, formikHelpers) => {
         formikHelpers.setSubmitting(true);
-        saveAttendeeQuestions(values).then(() => {
+        const ticketId = attendee ? attendee.tickets[0]?.id : null;
+        saveAttendeeQuestions(values, ticketId).then(() => {
             formikHelpers.setSubmitting(false);
         });
     };
@@ -141,133 +145,145 @@ export const ExtraQuestionsPageTemplate = ({ user, summit, extraQuestions, saveA
         validateForm();
     };
 
-    if (!ticket) {
-        navigate('/');
-        return null;
+    if ((!ticket && !attendeeId) || (attendeeId && someoneElseLoaded === false)) {
+        return <HeroComponent title={"Sorry. You don't have a ticket for this event."} redirectTo={"/"} />;
+    }
+
+    const getAttendeeFullname = (attendee) => {
+        return !isEmpty(attendee.first_name) && !isEmpty(attendee.last_name) ? `${attendee.first_name} ${attendee.last_name}` : attendee.email
     }
 
     return (
-        <div className={`content columns ${styles.extraQuestionsContainer}`}>
-            <div className="column is-three-fifths is-offset-one-fifth px-6-desktop py-6-desktop mb-6">
-                <h2>Attendee Information</h2>
-                <div className="columns is-multiline pt-4 pb-5">
-                    <div className={`column is-full-mobile is-half ${styles.extraQuestion}`}>
-                        <label htmlFor={TicketKeys.firstName}>First Name</label>
-                        <Input
-                            id={TicketKeys.firstName}
-                            name={TicketKeys.firstName}
-                            className="form-control"
-                            type="text"
-                            placeholder={'Your First Name'}
-                            value={formik.values[TicketKeys.firstName]}
-                            onBlur={formik.handleBlur}
-                            onChange={!!initialValues[TicketKeys.firstName] ? noOpFn : formik.handleChange}
-                            disabled={!!initialValues[TicketKeys.firstName]}
-                        />
-                        {(formik.touched[TicketKeys.firstName] || triedSubmitting) && formik.errors[TicketKeys.firstName] &&
-                        <p className={styles.errorLabel}>{t("ticket_popup.edit_required")}</p>
-                        }
-                    </div>
-                    <div className={`column is-full-mobile is-half ${styles.extraQuestion}`}>
-                        <label htmlFor={TicketKeys.lastName}>Last Name</label>
-                        <Input
-                            id={TicketKeys.lastName}
-                            name={TicketKeys.lastName}
-                            className="form-control"
-                            type="text"
-                            placeholder={'Your Last Name'}
-                            value={formik.values[TicketKeys.lastName]}
-                            onBlur={formik.handleBlur}
-                            onChange={!!initialValues[TicketKeys.lastName] ? noOpFn : formik.handleChange}
-                            disabled={!!initialValues[TicketKeys.lastName]}
-                        />
-                        {(formik.touched[TicketKeys.lastName] || triedSubmitting) && formik.errors[TicketKeys.lastName] &&
-                        <p className={styles.errorLabel}>{t("ticket_popup.edit_required")}</p>
-                        }
-                    </div>
-                    <div className={`column is-full-mobile is-half ${styles.extraQuestion}`}>
-                        <label htmlFor={TicketKeys.email}>Email</label>
-                        <Input
-                            id={TicketKeys.email}
-                            name={TicketKeys.email}
-                            className="form-control"
-                            type="text"
-                            value={initialValues[TicketKeys.email]}
-                            disabled={true}
-                        />
-                    </div>
-                    <div className={`column is-full-mobile is-half ${styles.extraQuestion}`}>
-                        <label htmlFor={TicketKeys.company}>Company</label>
-                        <RegistrationCompanyInput
-                            id={TicketKeys.company}
-                            name={TicketKeys.company}
-                            summitId={summit.id}
-                            placeholder={'Your Company'}
-                            value={formik.values[TicketKeys.company]}
-                            onBlur={formik.handleBlur}
-                            onChange={!!initialValues[TicketKeys.company].name ? noOpFn : formik.handleChange}
-                            disabled={!!initialValues[TicketKeys.company].name}
-                            tabSelectsValue={false}
-                        />
-                        {(formik.touched[TicketKeys.company] || triedSubmitting) && formik.errors[TicketKeys.company] &&
-                        <p className={styles.errorLabel}>{t("ticket_popup.edit_required")}</p>
-                        }
-                    </div>
+        <>
+            {attendee &&
+                <div className={styles.extraQuestionsAttendeeWarning}>
+                    {`Attention: The info below is for ${getAttendeeFullname(attendee)}. No additional action is required if you 
+                    prefer ${attendee.first_name || attendee.email} to complete this info; they have received an email with instructions. 
+                    You can manage this ticket on the "My Orders / Tickets" page.`}                    
                 </div>
-                { hasExtraQuestions &&
-                <>
-                    <h2 className="mb-3">Additional Information</h2>
-                    <p>Please answer these additional questions.</p>
-                    <ExtraQuestionsForm
-                        extraQuestions={extraQuestions}
-                        userAnswers={formik.values[TicketKeys.extraQuestions]}
-                        onAnswerChanges={onExtraQuestionsAnswersSet}
-                        ref={formRef}
-                        allowExtraQuestionsEdit={summit.allow_update_attendee_extra_questions}
-                        questionContainerClassName={`columns is-multiline ${styles.extraQuestion} pt-3`}
-                        questionLabelContainerClassName={'column is-full pb-0'}
-                        questionControlContainerClassName={`column is-full pt-0`}
-                        shouldScroll2FirstError={false}
-                        onError={handleExtraQuestionError}
-                    />
-                </>
-                }
-                { summit.registration_disclaimer_content &&
-                <div className="columns">
-                    <div className={`column ${styles.extraQuestion} abc-checkbox`}>
-                        <input
-                            id={TicketKeys.disclaimerAccepted}
-                            name={TicketKeys.disclaimerAccepted}
-                            type="checkbox"
-                            onBlur={formik.handleBlur}
-                            onChange={(e) =>
-                                formik.setFieldTouched(TicketKeys.disclaimerAccepted, true) && formik.handleChange(e)
+            }
+            <div className={`content columns ${styles.extraQuestionsContainer}`}>
+                <div className="column is-three-fifths is-offset-one-fifth px-6-desktop py-6-desktop mb-6">
+                    <h2>Attendee Information</h2>
+                    <div className="columns is-multiline pt-4 pb-5">
+                        <div className={`column is-full-mobile is-half ${styles.extraQuestion}`}>
+                            <label htmlFor={TicketKeys.firstName}>First Name</label>
+                            <Input
+                                id={TicketKeys.firstName}
+                                name={TicketKeys.firstName}
+                                className="form-control"
+                                type="text"
+                                placeholder={'Your First Name'}
+                                value={formik.values[TicketKeys.firstName]}
+                                onBlur={formik.handleBlur}
+                                onChange={!!initialValues[TicketKeys.firstName] ? noOpFn : formik.handleChange}
+                                disabled={!!initialValues[TicketKeys.firstName]}
+                            />
+                            {(formik.touched[TicketKeys.firstName] || triedSubmitting) && formik.errors[TicketKeys.firstName] &&
+                            <p className={styles.errorLabel}>{t("ticket_popup.edit_required")}</p>
                             }
-                            checked={formik.values[TicketKeys.disclaimerAccepted]}
+                        </div>
+                        <div className={`column is-full-mobile is-half ${styles.extraQuestion}`}>
+                            <label htmlFor={TicketKeys.lastName}>Last Name</label>
+                            <Input
+                                id={TicketKeys.lastName}
+                                name={TicketKeys.lastName}
+                                className="form-control"
+                                type="text"
+                                placeholder={'Your Last Name'}
+                                value={formik.values[TicketKeys.lastName]}
+                                onBlur={formik.handleBlur}
+                                onChange={!!initialValues[TicketKeys.lastName] ? noOpFn : formik.handleChange}
+                                disabled={!!initialValues[TicketKeys.lastName]}
+                            />
+                            {(formik.touched[TicketKeys.lastName] || triedSubmitting) && formik.errors[TicketKeys.lastName] &&
+                            <p className={styles.errorLabel}>{t("ticket_popup.edit_required")}</p>
+                            }
+                        </div>
+                        <div className={`column is-full-mobile is-half ${styles.extraQuestion}`}>
+                            <label htmlFor={TicketKeys.email}>Email</label>
+                            <Input
+                                id={TicketKeys.email}
+                                name={TicketKeys.email}
+                                className="form-control"
+                                type="text"
+                                value={initialValues[TicketKeys.email]}
+                                disabled={true}
+                            />
+                        </div>
+                        <div className={`column is-full-mobile is-half ${styles.extraQuestion}`}>
+                            <label htmlFor={TicketKeys.company}>Company</label>
+                            <RegistrationCompanyInput
+                                id={TicketKeys.company}
+                                name={TicketKeys.company}
+                                summitId={summit.id}
+                                placeholder={'Your Company'}
+                                value={formik.values[TicketKeys.company]}
+                                onBlur={formik.handleBlur}
+                                onChange={!!initialValues[TicketKeys.company].name ? noOpFn : formik.handleChange}
+                                disabled={!!initialValues[TicketKeys.company].name}
+                                tabSelectsValue={false}
+                            />
+                            {(formik.touched[TicketKeys.company] || triedSubmitting) && formik.errors[TicketKeys.company] &&
+                            <p className={styles.errorLabel}>{t("ticket_popup.edit_required")}</p>
+                            }
+                        </div>
+                    </div>
+                    { hasExtraQuestions &&
+                    <>
+                        <h2 className="mb-3">Additional Information</h2>
+                        <p>Please answer these additional questions.</p>
+                        <ExtraQuestionsForm
+                            extraQuestions={extraQuestions}
+                            userAnswers={formik.values[TicketKeys.extraQuestions]}
+                            onAnswerChanges={onExtraQuestionsAnswersSet}
+                            ref={formRef}
+                            allowExtraQuestionsEdit={summit.allow_update_attendee_extra_questions}
+                            questionContainerClassName={`columns is-multiline ${styles.extraQuestion} pt-3`}
+                            questionLabelContainerClassName={'column is-full pb-0'}
+                            questionControlContainerClassName={`column is-full pt-0`}
+                            shouldScroll2FirstError={false}
+                            onError={handleExtraQuestionError}
                         />
-                        <label htmlFor={TicketKeys.disclaimerAccepted}>
-                            {summit.registration_disclaimer_mandatory && <b> *</b>}
-                        </label>
-                        {(formik.touched[TicketKeys.disclaimerAccepted] || triedSubmitting) && formik.errors[TicketKeys.disclaimerAccepted] &&
-                        <p className={styles.errorLabel}>{t("ticket_popup.edit_required")}</p>
-                        }
-                        <div className="mt-3">
-                            <RawHTML>
-                                {summit.registration_disclaimer_content}
-                            </RawHTML>
+                    </>
+                    }
+                    { summit.registration_disclaimer_content &&
+                    <div className="columns">
+                        <div className={`column ${styles.extraQuestion} abc-checkbox`}>
+                            <input
+                                id={TicketKeys.disclaimerAccepted}
+                                name={TicketKeys.disclaimerAccepted}
+                                type="checkbox"
+                                onBlur={formik.handleBlur}
+                                onChange={(e) =>
+                                    formik.setFieldTouched(TicketKeys.disclaimerAccepted, true) && formik.handleChange(e)
+                                }
+                                checked={formik.values[TicketKeys.disclaimerAccepted]}
+                            />
+                            <label htmlFor={TicketKeys.disclaimerAccepted}>
+                                {summit.registration_disclaimer_mandatory && <b> *</b>}
+                            </label>
+                            {(formik.touched[TicketKeys.disclaimerAccepted] || triedSubmitting) && formik.errors[TicketKeys.disclaimerAccepted] &&
+                            <p className={styles.errorLabel}>{t("ticket_popup.edit_required")}</p>
+                            }
+                            <div className="mt-3">
+                                <RawHTML>
+                                    {summit.registration_disclaimer_content}
+                                </RawHTML>
+                            </div>
                         </div>
                     </div>
+                    }
+                    <button
+                        className={`${styles.buttonSave} button is-large`}
+                        disabled={formik.isSubmitting}
+                        onClick={triggerSubmit}>
+                        {!formik.isSubmitting && <>Save and Continue</>}
+                        {formik.isSubmitting && <>Saving...</>}
+                    </button>
                 </div>
-                }
-                <button
-                    className={`${styles.buttonSave} button is-large`}
-                    disabled={formik.isSubmitting}
-                    onClick={triggerSubmit}>
-                    {!formik.isSubmitting && <>Save and Continue</>}
-                    {formik.isSubmitting && <>Saving...</>}
-                </button>
             </div>
-        </div>
+        </>
     )
 };
 
@@ -277,13 +293,22 @@ const ExtraQuestionsPage = (
         user,
         summit,
         extraQuestions,
+        attendee,
         saveAttendeeQuestions,
         getExtraQuestions,
+        getAttendeeData
     }
 ) => {
 
+    const fragmentParser = new FragmentParser();
+
+    const attendeeId = fragmentParser.getParam('attendee') || null;
+
+    const [someoneElseLoaded, setSomeoneElseLoaded] = useState(null);
+
     useEffect(() => {
-        getExtraQuestions();
+        getExtraQuestions(attendeeId);
+        if(attendeeId) getAttendeeData(attendeeId).then(()=> setSomeoneElseLoaded(true)).catch(()=> setSomeoneElseLoaded(false));
     }, [])
 
     return (
@@ -292,7 +317,11 @@ const ExtraQuestionsPage = (
                 user={user}
                 summit={summit}
                 extraQuestions={extraQuestions}
-                saveAttendeeQuestions={saveAttendeeQuestions} />
+                attendeeId={attendeeId || null}
+                attendee={attendeeId ? attendee : null}
+                saveAttendeeQuestions={saveAttendeeQuestions}
+                someoneElseLoaded={someoneElseLoaded}
+            />
         </Layout>
     )
 }
@@ -307,16 +336,18 @@ ExtraQuestionsPageTemplate.propTypes = {
     saveAttendeeQuestions: PropTypes.func,
 }
 
-const mapStateToProps = ({ userState, summitState }) => ({
+const mapStateToProps = ({ userState, summitState, extraQuestionState }) => ({
     user: userState.userProfile,
     loading: userState.loading,
     summit: summitState.summit,
     extraQuestions: summitState.extra_questions,
+    attendee: extraQuestionState.attendee
 })
 
 export default connect(mapStateToProps,
     {
         saveAttendeeQuestions,
         getExtraQuestions,
+        getAttendeeData
     }
-)(ExtraQuestionsPage);
+)(ExtraQuestionsPage);