@openeventkit/event-site 2.1.49 → 2.1.51

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

@@ -1,468 +0,0 @@
-import React, {  useEffect, useMemo, useRef, useState } from 'react';
-import { useDispatch, useSelector } from "react-redux";
-import { useTranslation } from "react-i18next";
-import { CSSTransition } from "react-transition-group";
-import Alert from 'react-bootstrap/lib/Alert';
-import { useFormik } from 'formik';
-import * as Yup from 'yup';
-import Input from 'openstack-uicore-foundation/lib/components/inputs/text-input'
-import RegistrationCompanyInput from 'openstack-uicore-foundation/lib/components/inputs/registration-company-input';
-import RawHTML from 'openstack-uicore-foundation/lib/components/raw-html';
-import ExtraQuestionsForm from 'openstack-uicore-foundation/lib/components/extra-questions';
-import QuestionsSet from 'openstack-uicore-foundation/lib/utils/questions-set';
-import { getMainOrderExtraQuestions } from '../../../store/actions/summit-actions';
-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 = () => {};
-
-export const TicketPopupEditDetailsForm = ({
-                                               ticket,
-                                               summit,
-                                               order,
-                                               canEditTicketData,
-                                               goToReassignPanel,
-                                               context
-                                           }) => {
-    const formRef = useRef(null);
-    const { t } = useTranslation();
-    const dispatch = useDispatch();
-    const userProfile = useSelector(state => state.userState.userProfile);
-    const extraQuestions = useSelector(state => state.summitState.extra_questions || []);
-    const isLoading = useSelector(state => state.orderState.loading || state.summitState.loading || state.ticketState.loading);
-    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,
-        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,
-            first_name,
-            last_name,
-            company,
-            disclaimer_accepted_date,
-            extra_questions
-        } = ticket.owner || {};
-
-        const formattedExtraQuestions = extra_questions ?
-          extra_questions.map(({ question_id, value }) => (
-            { question_id, value }
-          )) : [];
-
-        return {
-            [TicketKeys.email]: email,
-            [TicketKeys.firstName]: first_name,
-            [TicketKeys.lastName]: last_name,
-            [TicketKeys.company]: { id: null, name: company },
-            [TicketKeys.disclaimerAccepted]: !!disclaimer_accepted_date,
-            [TicketKeys.extraQuestions]: formattedExtraQuestions
-        };
-    }, [ticket]);
-
-    const validationSchema = useMemo(() => Yup.object().shape({
-        [TicketKeys.firstName]: Yup.string().required(),
-        [TicketKeys.lastName]: Yup.string().required(),
-        [TicketKeys.company]: showCompanyInput && Yup.object().shape({
-            id: Yup.number().nullable(),
-            name: Yup.string().required(),
-        }),
-        ...(summit.registration_disclaimer_mandatory && {
-            [TicketKeys.disclaimerAccepted]: Yup.boolean().oneOf([true]).required()
-        })
-    }), [summit]);
-
-    const hasExtraQuestions = extraQuestions.length > 0;
-    const isUserTicketOwner = order.owner_id === userProfile.id;
-
-    useEffect(() => {
-        const attendeeId = ticket?.owner?.id;
-        dispatch(getMainOrderExtraQuestions({ summit, attendeeId }));
-    }, [ticket]);
-
-    const toggleSaveMessage = () => {
-        setTimeout(() => setShowSaveMessage(true), 50);
-        setTimeout(() => setShowSaveMessage(false), 5000);
-    };
-
-    const toggleUnassignMessage = () => {
-        setTimeout(() => setShowUnassignMessage(true), 50);
-        setTimeout(() => setShowUnassignMessage(false), 5000);
-    };
-
-    const updateTicket = (values, formikHelpers) => {
-        formikHelpers.setSubmitting(true);
-
-        const params = {
-            ticket,
-            order,
-            context,
-            data: values,
-        };
-
-        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 () => {
-        setShowConfirm(false);
-        dispatch(removeAttendee({ticket, context})).then((updatedTicket) => {
-            onTicketAssignChange(updatedTicket);
-            toggleUnassignMessage()
-        });
-    };
-
-    const handleConfirmReject = () => {
-        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({
-        initialValues,
-        onSubmit: handleSubmit,
-        validationSchema,
-        // Note: We need `enableReinitialize` to be `true` so the extra questions aren't cleared after saving.
-        enableReinitialize: true
-    });
-
-    const scrollToError = (error) => document.querySelector(`label[for="${error}"]`).scrollIntoView(ScrollBehaviour);
-
-    const validateForm = (errorId = null) => {
-        // Validate the formik form
-        formik.validateForm().then((errors) => {
-            const errorKeys = Object.keys(errors);
-            // attendee data
-            if (errorKeys.length > 0 && errorKeys[0] != TicketKeys.disclaimerAccepted) {
-                scrollToError(errorKeys[0]);
-                return;
-            }
-            // extra question
-            if (errorId) {
-                formRef.current.scroll2QuestionById(errorId);
-                return;
-            }
-            // disclaimer
-            if (errorKeys.length > 0) {
-                scrollToError(errorKeys[0]);
-                return;
-            }
-            // submit the formik form
-            formik.handleSubmit();
-        });
-    };
-
-    const triggerSubmit = () => {
-        setTriedSubmitting(true);
-        if (hasExtraQuestions) {
-            // TODO: We shouldn't have to do this to get the changes from the `ExtraQuestionsForm`.
-            // We should just be able to pass an `onChange` event handler to the `ExtraQuestionsForm`.
-            formRef.current.doSubmit();
-            return;
-        }
-        validateForm();
-    };
-
-    const handleExtraQuestionError = (errors, ref, errorId) => {
-        validateForm(errorId);
-    }
-
-    const onExtraQuestionsAnswersSet = (answersForm) => {
-        const questionSet = new QuestionsSet(extraQuestions);
-        const newAnswers = Object.keys(answersForm).reduce((acc, name) => {
-            let question = questionSet.getQuestionByName(name);
-            if (!question) {
-                console.error(`Missing question for answer ${name}.`);
-                return acc;
-            }
-            if (answersForm[name] || answersForm[name].length > 0) {
-                acc.push({ question_id: question.id, answer: `${answersForm[name]}` });
-            }
-            return acc;
-        }, []);
-        // Set the extra question answers on the formik state.
-        formik.setFieldValue(TicketKeys.extraQuestions, newAnswers);
-        validateForm();
-    };
-
-    const canSubmitChanges = () => {
-        const qs = new QuestionsSet(extraQuestions, initialValues[TicketKeys.extraQuestions]);
-        const unansweredExtraQuestions = !qs.completed();
-        return canEditTicketData || isReassignable || unansweredExtraQuestions || isDelegating;
-    }
-
-    return (
-      <div className="ticket-popup-edit-details-form">
-          {showSaveMessage &&
-            <CSSTransition
-              unmountOnExit
-              in={showSaveMessage}
-              timeout={2000}
-              classNames="fade-in-out"
-            >
-                <Alert bsStyle="success" className="ticket-popup-form-alert text-center">
-                    {t("tickets.save_message")}
-                </Alert>
-            </CSSTransition>
-          }
-
-          {showUnassignMessage &&
-            <CSSTransition
-              unmountOnExit
-              in={showUnassignMessage}
-              timeout={2000}
-              classNames="fade-in-out"
-            >
-                <Alert bsStyle="success" className="ticket-popup-form-alert text-center">
-                    {t("tickets.unassign_success_message")}
-                </Alert>
-            </CSSTransition>
-          }
-
-          <div className="ticket-popup-form-body columns is-multiline">
-
-              <div className="attendee-info column is-full">
-                  <h4 className="pb-3">{t("ticket_popup.edit_basic_info")}</h4>
-                  <label htmlFor={TicketKeys.email}>Email</label>
-                  <Input
-                    id={TicketKeys.email}
-                    name={TicketKeys.email}
-                    className="form-control"
-                    value={initialValues[TicketKeys.email]}
-                    disabled={true}
-                  />
-                  {isUserTicketOwner && isReassignable &&
-                    <div className="mt-1">
-                        <span onClick={() => goToReassignPanel()}>
-                            <u>Reassign</u>
-                        </span>
-                        {` | `}
-                        <span onClick={() => setShowConfirm(true)}>
-                            <u>Unassign</u>
-                        </span>
-                    </div>
-                  }
-              </div>
-
-              <div className="attendee-info column is-full">
-                  <label htmlFor={TicketKeys.firstName}>
-                      {t("ticket_popup.edit_first_name")}
-                      {!initialValues[TicketKeys.firstName] && <b> *</b>}
-                  </label>
-                  <Input
-                    id={TicketKeys.firstName}
-                    name={TicketKeys.firstName}
-                    className="form-control"
-                    placeholder={t("ticket_popup.edit_first_name_placeholder")}
-                    value={formik.values[TicketKeys.firstName]}
-                    onBlur={formik.handleBlur}
-                    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>
-                  }
-              </div>
-
-              <div className="attendee-info column is-full">
-                  <label htmlFor={TicketKeys.lastName}>
-                      {t("ticket_popup.edit_last_name")}
-                      {!initialValues[TicketKeys.lastName] && <b> *</b>}
-                  </label>
-                  <Input
-                    id={TicketKeys.lastName}
-                    name={TicketKeys.lastName}
-                    className="form-control"
-                    placeholder={t("ticket_popup.edit_last_name_placeholder")}
-                    value={formik.values[TicketKeys.lastName]}
-                    onBlur={formik.handleBlur}
-                    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>
-
-              {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}
-                      styles={{
-                          menu: (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">
-                    {t("ticket_popup.assign_note")}
-                </div>
-              }
-
-              {hasExtraQuestions &&
-                <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 || isDelegating}
-                      questionContainerClassName={`columns is-multiline extra-question pt-3`}
-                      questionLabelContainerClassName={'column is-full pb-0'}
-                      questionControlContainerClassName={`column is-full pt-0`}
-                      shouldScroll2FirstError={false}
-                      onError={handleExtraQuestionError}
-                    />
-                </div>
-              }
-
-              {summit.registration_disclaimer_content &&
-                <div className="column is-full attendee-info abc-checkbox disclaimer mt-3">
-                    <div className='input-wrapper'>
-                        <input
-                          type="checkbox"
-                          id={TicketKeys.disclaimerAccepted}
-                          name={TicketKeys.disclaimerAccepted}
-                          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>
-                    </div>
-                    <div>
-                        <RawHTML>
-                            {summit.registration_disclaimer_content}
-                        </RawHTML>
-                    </div>
-                    {(formik.touched[TicketKeys.disclaimerAccepted] || triedSubmitting) && formik.errors[TicketKeys.disclaimerAccepted] &&
-                      <p className="error-label">{t("ticket_popup.edit_required")}</p>
-                    }
-                </div>
-              }
-          </div>
-
-          {canSubmitChanges() &&
-            <div className="ticket-popup-footer">
-                <button
-                  type="button"
-                  className="btn btn-primary"
-                  disabled={formik.isSubmitting}
-                  onClick={triggerSubmit}
-                >
-                    {!formik.isSubmitting && <>{t("ticket_popup.save_changes")}</>}
-                    {formik.isSubmitting && <>{t("ticket_popup.saving_changes")}...</>}
-                </button>
-            </div>
-          }
-          <ConfirmPopup
-            isOpen={showConfirm}
-            popupCase={CONFIRM_POPUP_CASE.UNASSIGN_TICKET}
-            onAccept={handleConfirmAccept}
-            onReject={handleConfirmReject}
-          />
-          <DelegatePopup
-            isOpen={showDelegate}
-            onAccept={handleDelegateAccept}
-            onReject={handleDelegateReject}
-          />
-      </div>
-    );
-};

package/src/components/summit-my-orders-tickets/components/TicketPopup/TicketPopupEditDetailsForm/ticket-popup-edit-details-form.scss

@@ -1,71 +0,0 @@
-@import "../../../styles/variables";
-
-.ticket-popup-edit-details-form {
-  h4 {
-    font-weight: 700;
-  }
-  .attendee-info {    
-    label {
-      font-weight: 600;
-      b {
-        color: red;
-      }
-    }
-    u {
-      cursor: pointer;
-    }
-    &.disclaimer {
-      display: grid;
-      grid-template-columns: 0fr 14fr;
-      grid-template-rows: 1fr;
-      gap: 15px;
-      .input-wrapper {
-        width: 35px;
-      }
-    }
-  } 
-  .questions-form {
-    padding-bottom: 2em;
-  }
-  .extra-question {
-    label {
-      font-weight: 600;
-      b {
-        color: red;
-      }
-    }
-    [id^=rl_wrapper] div {
-      padding-top: 5px;
-      &~ div {
-        padding-top: 10px;
-      }
-    }
-    input[type="checkbox"] {
-      margin-right: 3px;
-      &~ label {
-        padding-left: 13px !important;
-      }
-    }
-    h4 {
-      font-weight: 400;
-      font-size: 1em !important;
-      line-height: 1;
-      padding-top: 4px;
-      margin-bottom: 0px;
-    }
-  }
-  .error-label {
-    color: red;
-    display: block;
-    font-size: 12px;
-    font-weight: 700;
-    margin: auto 0;
-    padding: 0;
-    grid-column: span 2;
-    &::before {
-      content: "\f071";
-      font-family: FontAwesome;
-      padding-right: 5px;
-    }
-  }
-}

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

@@ -1,64 +0,0 @@
-import React, { useState } from 'react';
-import { useDispatch } from "react-redux";
-import { useTranslation } from "react-i18next";
-import { CSSTransition } from "react-transition-group";
-import Alert from 'react-bootstrap/lib/Alert';
-import { resendNotification } from '../../store/actions/ticket-actions';
-import { getSummitFormattedReassignDate } from '../../util';
-
-export const TicketPopupNotifyForm = ({ ticket, summit }) => {
-    const { t } = useTranslation();
-    const dispatch = useDispatch();
-    const [showSaveMessage, setShowSaveMessage] = useState(false);
-    const [message, setMessage] = useState('')
-
-    const toggleSaveMessage = () => {
-        setTimeout(() => { 
-            setShowSaveMessage(true)
-            setMessage('');
-        }, 50);
-        setTimeout(() => setShowSaveMessage(false), 5000);
-    };
-
-    const handleNotifyButtonClick = () => {
-        dispatch(resendNotification({ ...ticket, message })).then(() => {
-            toggleSaveMessage();
-            setMessage('');
-        });
-    }
-
-    return (
-        <div className="ticket-notify-form">
-            <div className="ticket-popup-form-body">
-                {showSaveMessage && (
-                    <CSSTransition
-                        unmountOnExit
-                        in={showSaveMessage}
-                        timeout={2000}
-                        classNames="fade-in-out"
-                    >
-                        <Alert bsStyle="success" className="ticket-popup-form-alert text-center">
-                            {t("tickets.notify_success_message")}
-                        </Alert>
-                    </CSSTransition>
-                )}
-
-                <p>{t("ticket_popup.notify_text_1")} {getSummitFormattedReassignDate(summit)}.</p>
-                
-                <p>
-                    {t("ticket_popup.notify_text_2")} <b>{ticket.owner.email} </b> 
-                    {t("ticket_popup.notify_text_3")} <b>{ticket.owner.email}</b>
-                </p>
-
-                <p>
-                    <label>{t("ticket_popup.notify_message")} </label> {t("ticket_popup.notify_message_condition")}
-                    <br />
-                    <textarea value={message} rows="4" onChange={(e) => setMessage(e.target.value)} style={{width: '80%', padding: 5}} />
-                </p>
-                <button className="btn btn-primary" onClick={handleNotifyButtonClick}>
-                    {t("ticket_popup.notify_button")}
-                </button>
-            </div>
-        </div>
-    );
-};