@openeventkit/event-site 2.0.131 → 2.0.133

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openeventkit/event-site",
   "description": "Event Site",
-  "version": "2.0.131",
+  "version": "2.0.133",
   "author": "Tipit LLC",
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.5.2",

package/src/actions/fetch-entities-actions.js

@@ -143,8 +143,6 @@ export const fetchSummitById =  async(summitId, accessToken = null) => {
     let apiUrl = URI(`${process.env.GATSBY_SUMMIT_API_BASE_URL}/api/public/v1/summits/${summitId}`);
 
     apiUrl.addQuery('expand', 'event_types,tracks,track_groups,presentation_levels,locations.rooms,locations.floors,order_extra_questions.values,schedule_settings,schedule_settings.filters,schedule_settings.pre_filters');
-    apiUrl.addQuery('t', Date.now());
-    apiUrl.addQuery('evict_cache', 1);
 
     return fetch(apiUrl.toString(), {
         method: 'GET'

package/src/components/summit-my-orders-tickets/components/DelegatePopup/DelegatePopup.js

@@ -0,0 +1,51 @@
+/**
+ * Copyright 2022
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ **/
+import React, { useState } from 'react'
+import { useTranslation } from "react-i18next";
+import { Input } from 'openstack-uicore-foundation/lib/components';
+import usePortal from 'react-useportal';
+
+import './delegate-popup.scss';
+
+export const DelegatePopup = ({ isOpen, onAccept, onReject }) => {
+    var { Portal } = usePortal();
+    const { t } = useTranslation();
+
+    const handleAcceptClick = () => {
+        if (onAccept) onAccept();
+    };
+
+    const handleRejectClick = () => {
+        if (onReject) onReject();
+    };
+
+    return (
+        <>
+            {isOpen && (
+                <Portal>
+                    <div className="confirm-popup-bg">
+                        <div className="confirm-popup">
+                            <h4>Delegate Ticket</h4>
+                            <p>Delegation will create a new attendee and require to you to fill the first Name, last Name and to answer the extra questions again</p>
+                            
+                            <div className="buttons">
+                                <span onClick={handleRejectClick}>{t("confirm_popup.cancel")}</span>
+                                <span onClick={handleAcceptClick}>{t("confirm_popup.accept")}</span>
+                            </div>
+                        </div>
+                    </div>
+                </Portal>
+            )}
+        </>
+    );
+};

package/src/components/summit-my-orders-tickets/components/DelegatePopup/delegate-popup.scss

@@ -0,0 +1,57 @@
+@import "../../styles/variables";
+
+.confirm-popup-bg {
+  z-index: 1000;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+}
+
+.confirm-popup {
+  position: absolute;
+  right: 1%;
+  top: 5%;
+  padding: 40px 20px 20px;
+  background: $color-white;
+  z-index: 35;
+  text-align: center;
+  box-shadow: 1px 1px 5px grey;
+  min-width: 300px;
+
+  h4 {
+    font-weight: bold;
+  }
+
+  p {
+    margin: 0 40px 20px;
+  }
+
+  .buttons {
+    margin-top: 35px;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: baseline;
+
+    span {
+      cursor: pointer;
+    }
+
+    span:last-child {
+      background: $color-secondary-contrast;
+      border-radius: 4px;
+      color: $color-white;
+      padding: 5px 30px;
+      text-align: center;
+
+      &:hover {
+        background-color: #286090;
+        border-color: #204d74;
+      }
+    }
+  }
+}

package/src/components/summit-my-orders-tickets/components/OrderList/OrderListItem.js

@@ -35,7 +35,7 @@ export const OrderListItem = ({ order, className, changeTicketsPage }) => {
                             <OrderSummary type="mobile" order={order} summit={summit} tickets={tickets}/>
 
                             {summit.ticket_types.map((ticketType, index) => {
-                                const orderTickets = tickets.filter(t => t.ticket_type_id == ticketType.id);
+                                const orderTickets = tickets.filter(t => t.ticket_type.id == ticketType.id);
 
                                 if (orderTickets.length < 1) return null;
 

package/src/components/summit-my-orders-tickets/components/TicketPopup/TicketPopupEditDetailsForm/TicketPopupEditDetailsForm.js

@@ -12,15 +12,18 @@ import { getMainOrderExtraQuestions } from '../../../store/actions/summit-action
 import {
     editOwnedTicket,
     removeAttendee,
+    delegateTicket,
     TICKET_ATTENDEE_KEYS as TicketKeys
 } from '../../../store/actions/ticket-actions';
 import { useTicketDetails } from '../../../util';
+import useMarketingSettings, { MARKETING_SETTINGS_KEYS }  from "@utils/useMarketingSettings";
 import { ConfirmPopup, CONFIRM_POPUP_CASE } from '../../ConfirmPopup/ConfirmPopup';
 
 import { DefaultScrollBehaviour as ScrollBehaviour } from '@utils/scroll';
 
 import './ticket-popup-edit-details-form.scss';
 import { useTicketAssignedContext } from '../../../context/TicketAssignedContext';
+import { DelegatePopup } from '../../DelegatePopup/DelegatePopup';
 
 const noop = () => {};
 
@@ -41,15 +44,24 @@ export const TicketPopupEditDetailsForm = ({
     const [triedSubmitting, setTriedSubmitting] = useState(false);
     const [showSaveMessage, setShowSaveMessage] = useState(false);
     const [showConfirm, setShowConfirm] = useState(false);
+    const [showDelegate, setShowDelegate] = useState(false);
+    const [isDelegating, setIsDelegating] = useState(false);
     const [showUnassignMessage, setShowUnassignMessage] = useState(false);
     const {
         isReassignable,
         formattedReassignDate,
-        daysUntilReassignDeadline
-    } = useTicketDetails({ ticket, summit });
+        daysUntilReassignDeadline,
+        isUnassigned,
+        allowsDelegate
+    } = useTicketDetails({ ticket, summit });    
 
     const { onTicketAssignChange } = useTicketAssignedContext();
 
+    const { getSettingByKey } = useMarketingSettings();
+
+    const showCompanyInputDefaultOptions = !!Number(getSettingByKey(MARKETING_SETTINGS_KEYS.regLiteShowCompanyInputDefaultOptions));
+    const showCompanyInput = !!Number(getSettingByKey(MARKETING_SETTINGS_KEYS.regLiteShowCompanyInput));
+
     const initialValues = useMemo(() => {
         const {
             email,
@@ -78,7 +90,7 @@ export const TicketPopupEditDetailsForm = ({
     const validationSchema = useMemo(() => Yup.object().shape({
         [TicketKeys.firstName]: Yup.string().required(),
         [TicketKeys.lastName]: Yup.string().required(),
-        [TicketKeys.company]: Yup.object().shape({
+        [TicketKeys.company]: showCompanyInput && Yup.object().shape({
             id: Yup.number().nullable(),
             name: Yup.string().required(),
         }),
@@ -115,14 +127,26 @@ export const TicketPopupEditDetailsForm = ({
             data: values,
         };
 
-        dispatch(editOwnedTicket(params))
-            .then(() => toggleSaveMessage())
-            .catch((error) => console.error(error))
-            .then(() => {
-                // Note: Need to do this to persist the extra question values
-                formikHelpers.resetForm({ values });
-                formikHelpers.setSubmitting(false);
-            });
+        if(isDelegating) {
+            dispatch(delegateTicket(params))
+                .then(() => toggleSaveMessage())
+                .catch((error) => console.error(error))
+                .then(() => {
+                    formikHelpers.resetForm({ values });
+                    formikHelpers.setSubmitting(false);
+                    setIsDelegating(false);
+                });
+        } else {
+            dispatch(editOwnedTicket(params))
+                .then(() => toggleSaveMessage())
+                .catch((error) => console.error(error))
+                .then(() => {
+                    // Note: Need to do this to persist the extra question values
+                    formikHelpers.resetForm({ values });
+                    formikHelpers.setSubmitting(false);
+                });
+        }
+
     };
 
     const handleConfirmAccept = async () => {
@@ -137,6 +161,24 @@ export const TicketPopupEditDetailsForm = ({
         setShowConfirm(false);
     };
 
+    const handleDelegateAccept = () => {
+        setShowDelegate(false);
+        setIsDelegating(true);        
+        formik.resetForm({
+            values: {
+              ...formik.values,
+              [TicketKeys.firstName]: "",
+              [TicketKeys.lastName]: "",
+              [TicketKeys.disclaimerAccepted]: false,
+              [TicketKeys.extraQuestions]: []
+            }
+          });
+    };
+
+    const handleDelegateReject = () => {
+        setShowDelegate(false);
+    };
+
     const handleSubmit = (values, formikHelpers) => updateTicket(values, formikHelpers);
 
     const formik = useFormik({
@@ -209,7 +251,7 @@ export const TicketPopupEditDetailsForm = ({
     const canSubmitChanges = () => {
         const qs = new QuestionsSet(extraQuestions, initialValues[TicketKeys.extraQuestions]);
         const unansweredExtraQuestions = !qs.completed();
-        return canEditTicketData || isReassignable || unansweredExtraQuestions;
+        return canEditTicketData || isReassignable || unansweredExtraQuestions || isDelegating;
     }
 
     return (
@@ -277,8 +319,8 @@ export const TicketPopupEditDetailsForm = ({
                         placeholder={t("ticket_popup.edit_first_name_placeholder")}
                         value={formik.values[TicketKeys.firstName]}
                         onBlur={formik.handleBlur}
-                        onChange={!!initialValues[TicketKeys.firstName] ? noop : formik.handleChange}
-                        disabled={!!initialValues[TicketKeys.firstName]}
+                        onChange={!!initialValues[TicketKeys.firstName] && !isDelegating ? noop : formik.handleChange}
+                        disabled={!!initialValues[TicketKeys.firstName] && !isDelegating}
                     />
                     {(formik.touched[TicketKeys.firstName] || triedSubmitting) && formik.errors[TicketKeys.firstName] &&
                     <p className="error-label">{t("ticket_popup.edit_required")}</p>
@@ -297,39 +339,50 @@ export const TicketPopupEditDetailsForm = ({
                         placeholder={t("ticket_popup.edit_last_name_placeholder")}
                         value={formik.values[TicketKeys.lastName]}
                         onBlur={formik.handleBlur}
-                        onChange={!!initialValues[TicketKeys.lastName] ? noop : formik.handleChange}
-                        disabled={!!initialValues[TicketKeys.lastName]}
+                        onChange={!!initialValues[TicketKeys.lastName] && !isDelegating ? noop : formik.handleChange}
+                        disabled={!!initialValues[TicketKeys.lastName] && !isDelegating}
                     />
                     {(formik.touched[TicketKeys.lastName] || triedSubmitting) && formik.errors[TicketKeys.lastName] &&
                     <p className="error-label">{t("ticket_popup.edit_required")}</p>
                     }
                 </div>
 
-                <div className="attendee-info column is-full">
-                    <label htmlFor={TicketKeys.company}>
-                        {t("ticket_popup.edit_company")}
-                        {!initialValues[TicketKeys.company].name && <b> *</b>}
-                    </label>
-                    <RegistrationCompanyInput
-                        id={TicketKeys.company}
-                        name={TicketKeys.company}
-                        summitId={summit.id}
-                        placeholder={t("ticket_popup.edit_company_placeholder")}
-                        value={formik.values[TicketKeys.company]}
-                        onBlur={formik.handleBlur}
-                        onChange={!!initialValues[TicketKeys.company].name ? noop : formik.handleChange}
-                        disabled={!!initialValues[TicketKeys.company].name}
-                        menuPortalTarget={document.body}
-                        menuPosition="fixed"
-                        styles={{
-                            menuPortal: (base) => ({ ...base, zIndex: 9999 }),                            
-                        }}
-                        tabSelectsValue={false}
-                    />
-                    {(formik.touched[TicketKeys.company] || triedSubmitting) && formik.errors[TicketKeys.company] &&
-                    <p className="error-label">{t("ticket_popup.edit_required")}</p>
-                    }
-                </div>
+                {allowsDelegate && 
+                    <div className="attendee-info column is-full">
+                        <button className="button-text" type='button' onClick={() => setShowDelegate(true)}>Delegate</button>
+                    </div>
+                }
+
+                {showCompanyInput &&
+                    <div className="attendee-info column is-full">
+                        <label htmlFor={TicketKeys.company}>
+                            {t("ticket_popup.edit_company")}
+                            {!initialValues[TicketKeys.company].name && <b> *</b>}
+                        </label>
+                        <RegistrationCompanyInput
+                            id={TicketKeys.company}
+                            name={TicketKeys.company}
+                            summitId={summit.id}
+                            placeholder={t("ticket_popup.edit_company_placeholder")}
+                            value={formik.values[TicketKeys.company]}
+                            onBlur={formik.handleBlur}
+                            onChange={!!initialValues[TicketKeys.company].name ? noop : formik.handleChange}
+                            disabled={!!initialValues[TicketKeys.company].name}
+                            defaultOptions={showCompanyInputDefaultOptions}
+                            openMenuOnFocus={showCompanyInputDefaultOptions}
+                            openMenuOnClick={showCompanyInputDefaultOptions}
+                            menuPortalTarget={document.body}
+                            menuPosition="fixed"
+                            styles={{
+                                menuPortal: (base) => ({ ...base, zIndex: 9999 }),                            
+                            }}
+                            tabSelectsValue={false}
+                        />
+                        {(formik.touched[TicketKeys.company] || triedSubmitting) && formik.errors[TicketKeys.company] &&
+                        <p className="error-label">{t("ticket_popup.edit_required")}</p>
+                        }
+                    </div>
+                }
 
                 {(initialValues[TicketKeys.firstName] || initialValues[TicketKeys.lastName] || initialValues[TicketKeys.company].name) &&
                 <div className="column is-full pb-5">
@@ -341,11 +394,13 @@ export const TicketPopupEditDetailsForm = ({
                 <div className="column is-full pt-5">
                     <h4 className="pb-2">{t("ticket_popup.edit_preferences")}</h4>
                     <ExtraQuestionsForm
+                        // This key is added to trigger a new render when the extra questions are resetted on delegation
+                        key={formik.values[TicketKeys.extraQuestions].length}
                         ref={formRef}
                         extraQuestions={extraQuestions}
                         userAnswers={formik.values[TicketKeys.extraQuestions]}
                         onAnswerChanges={onExtraQuestionsAnswersSet}
-                        allowExtraQuestionsEdit={canEditTicketData}
+                        allowExtraQuestionsEdit={canEditTicketData || isDelegating}
                         questionContainerClassName={`columns is-multiline extra-question pt-3`}
                         questionLabelContainerClassName={'column is-full pb-0'}
                         questionControlContainerClassName={`column is-full pt-0`}
@@ -403,6 +458,11 @@ export const TicketPopupEditDetailsForm = ({
                 onAccept={handleConfirmAccept}
                 onReject={handleConfirmReject}
             />
+            <DelegatePopup
+                isOpen={showDelegate}                
+                onAccept={handleDelegateAccept}
+                onReject={handleDelegateReject}
+            />
         </div>
     );
 };

package/src/components/summit-my-orders-tickets/store/actions/ticket-actions.js

@@ -38,6 +38,7 @@ export const GET_TICKETS_BY_ORDER = 'GET_TICKETS_BY_ORDER';
 export const GET_TICKETS_BY_ORDER_ERROR = 'GET_TICKETS_BY_ORDER_ERROR';
 export const GET_ORDER_TICKET_DETAILS = 'GET_ORDER_TICKET_DETAILS';
 export const GET_TICKET_DETAILS = 'GET_TICKET_DETAILS';
+export const DELEGATE_TICKET = 'DELEGATE_TICKET';
 
 export const TICKET_ATTENDEE_KEYS = {
     email: 'attendee_email',
@@ -90,9 +91,9 @@ export const getUserTickets = ({ page = 1, perPage = 5 }) => async (dispatch, ge
 
     const params = {
         access_token: accessToken,
-        expand: 'order, owner',
+        expand: 'order,owner,owner.manager,promo_code,ticket_type',
         order: '-id',
-        fields: 'order.id,order.owner_first_name,order.owner_last_name,order.owner_email,owner.first_name,owner.last_name,owner.status',
+        fields: 'order.id,order.owner_first_name,order.owner_last_name,order.owner_email,owner.first_name,owner.last_name,owner.email,owner.company,owner.status,owner.manager.id',
         'filter[]': [`status==Paid`, `order_owner_id<>${userProfile.id}`],
         relations: 'none',
         page: page,
@@ -130,7 +131,7 @@ export const getTicketById = ({order, ticket}) => async (dispatch, getState, { g
 
     const params = {
         access_token: accessToken,
-        expand: `${fromOrderList ? 'order' : ''}, owner, owner.extra_questions, badge, badge.features, refund_requests`,
+        expand: `${fromOrderList ? 'order' : ''},owner,owner.extra_questions,badge,badge.features,refund_requests,promo_code,ticket_type`,
         fields: 'order.id, order.owner_first_name, order.owner_last_name, order.owner_email'
     };
 
@@ -148,16 +149,16 @@ export const getTicketById = ({order, ticket}) => async (dispatch, getState, { g
 };
 
 export const getTicketsByOrder = ({ orderId, page = 1, perPage = 5 }) => async (dispatch, getState, { getAccessToken, apiBaseUrl, loginUrl }) => {
-    
+
     dispatch(startLoading());
-    
+
     const accessToken = await getAccessToken().catch(_ => history.replace(loginUrl));
 
     if (!accessToken) return;
 
     const params = {
-        access_token: accessToken,        
-        expand: 'refund_requests, owner, owner.extra_questions, badge, badge.features',
+        access_token: accessToken,
+        expand: 'refund_requests,owner,owner.extra_questions,badge,badge.features,promo_code,ticket_type',
         order: '+id',
         page: page,
         per_page: perPage
@@ -166,7 +167,7 @@ export const getTicketsByOrder = ({ orderId, page = 1, perPage = 5 }) => async (
     return getRequest(
         null,
         createAction(GET_TICKETS_BY_ORDER),
-        `${apiBaseUrl}/api/v1/summits/all/orders/${orderId}/tickets`,        
+        `${apiBaseUrl}/api/v1/summits/all/orders/${orderId}/tickets`,
         authErrorHandler
     )(params)(dispatch).then(() => {
         dispatch(stopLoading());
@@ -300,10 +301,12 @@ export const editOwnedTicket = ({
         `${apiBaseUrl}/api/v1/summits/all/orders/all/tickets/${ticket.id}`,
         normalizedEntity,
         authErrorHandler
-    )(params)(dispatch).then(async () => {
+    )(params)(dispatch).then(async () => {        
+        const hasManager = ticket.owner?.manager?.id || ticket.owner?.manager_id;
         // email should match ( only update my profile is ticket belongs to me!)
+        // and if the ticket doesn't have a manager
         // Check if there's changes in the ticket data to update the profile
-        if (userProfile.email == attendee_email && (
+        if (userProfile.email == attendee_email && !hasManager && (
             attendee_company.name !== company ||
             attendee_first_name !== userProfile.first_name ||
             attendee_last_name !== userProfile.last_name)) {
@@ -314,7 +317,6 @@ export const editOwnedTicket = ({
                 company: attendee_company.name
             };
             dispatch(updateProfile(newProfile));
-
         }
 
         // Note: make sure we re-fetch the user profile for the parent app.
@@ -324,7 +326,7 @@ export const editOwnedTicket = ({
         if (context === 'ticket-list') {
             dispatch(getUserTickets({ page: ticketPage }));
         } else {
-            dispatch(getUserOrders({ page: orderPage })).then(() => 
+            dispatch(getUserOrders({ page: orderPage })).then(() =>
                 dispatch(getTicketsByOrder({ orderId: ticket.order_id, page: orderTicketsCurrentPage }))
             );
         }
@@ -529,6 +531,67 @@ export const refundTicket = ({ ticket, order }) => async (dispatch, getState, {
     });
 };
 
+export const delegateTicket = ({
+    ticket,
+    context,
+    data: {
+        attendee_email,
+        attendee_first_name,
+        attendee_last_name,
+        attendee_company,
+        disclaimer_accepted,
+        extra_questions,
+    }
+}) => async (dispatch, getState, { getAccessToken, apiBaseUrl, loginUrl }) => {
+    const accessToken = await getAccessToken().catch(_ => history.replace(loginUrl));
+
+    if (!accessToken) return;
+
+    dispatch(startLoading());
+
+    const {
+        orderState: { current_page: orderPage },
+        ticketState: { current_page: ticketPage, orderTickets: { current_page : orderTicketsCurrentPage }},
+        summitState: { summit: { id : summitId } }
+    } = getState();
+
+    const orderId = ticket.order ? ticket.order.id : ticket.order_id;
+
+    const params = {
+        access_token: accessToken
+    };
+
+    const normalizedEntity = normalizeTicket({
+        attendee_email,
+        attendee_first_name,
+        attendee_last_name,
+        attendee_company,
+        disclaimer_accepted,
+        extra_questions
+    });
+
+    return putRequest(
+        null,
+        createAction(DELEGATE_TICKET),
+        `${apiBaseUrl}/api/v1/summits/${summitId}/orders/${orderId}/tickets/${ticket.id}/delegate`,        
+        normalizedEntity,
+        authErrorHandler    
+    )(params)(dispatch).then(() => {
+        dispatch(stopLoading());
+        // Note: refresh the list view after updating the ticket.
+        if (context === 'ticket-list') {
+            dispatch(getUserTickets({ page: ticketPage }));
+        } else {
+            dispatch(getUserOrders({ page: orderPage })).then(() => 
+                dispatch(getTicketsByOrder({ orderId: ticket.order_id, page: orderTicketsCurrentPage }))
+            );
+        }
+    }).catch(e => {
+        dispatch(stopLoading());
+        throw (e);
+    });
+}
+
 const normalizeTicket = (entity) => {
     const normalizedEntity = {...entity};
 
@@ -541,4 +604,4 @@ const normalizeTicket = (entity) => {
 
     return normalizedEntity;
 
-}
+}

package/src/components/summit-my-orders-tickets/util/ticket/useTicketDetails.js

@@ -19,12 +19,14 @@ export const useTicketDetails = ({ ticket, summit }) => {
 
     const status = getTicketStatusData(ticket, isPast);
     const role = getTicketRole(ticket);
-    const type = summit.ticket_types.find(type => type.id == ticket.ticket_type_id);
+    const type = summit.ticket_types.find(type => type.id == ticket.ticket_type.id);
 
     const isActive = ticket.is_active && status.type !== STATUS_CANCELLED;
     const isUnassigned = status.type === STATUS_UNASSIGNED;
     const isRefundable = ticket.final_amount > 0 && ticket.final_amount > ticket.refunded_amount;
 
+    const allowsDelegate = (ticket.ticket_type.allows_to_delegate || ticket.promo_code?.allows_to_delegate) && !isUnassigned && !ticket.owner?.manager?.id && !ticket.owner?.manager_id;
+
     const togglePopup = () => setShowPopup(!showPopup);
 
     const handleClick = () => {
@@ -45,6 +47,7 @@ export const useTicketDetails = ({ ticket, summit }) => {
         isUnassigned,
         isReassignable,
         isRefundable,
+        allowsDelegate,
         formattedDate,
         formattedReassignDate,
         daysUntilReassignDeadline,

package/src/styles/profile.module.scss

@@ -5,10 +5,16 @@
 
 @import 'colors.scss';
 
+.modal {
+  z-index: 100000;
+  background-color: rgba(0,0,0,0.8);
+}
+
 .modal-card {
   background-color: var(--color_background_light);
   color: var(--color_text_dark);
   margin: 0 5rem 0 auto;
+  border: 1px solid var(--color_input_border_color_dark);
 
   .modal-card-head {
     padding: 10px 20px;

package/src/styles/style.scss

@@ -506,4 +506,14 @@ div.event-feedback-container {
   }
 }
 
+.button-text {
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  font-weight: bold;
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
 @import "~openstack-uicore-foundation/lib/css/components/extra-questions.css";