@openeventkit/event-site 2.1.48 → 2.1.50

package/src/components/summit-my-orders-tickets/components/OrderTicketDetails/order-ticket-details.scss

@@ -1,129 +0,0 @@
-@import "../../styles/variables";
-
-.order-ticket-details {
-  position: relative;
-  display: flex;
-  flex-flow: row nowrap;
-  background-color: var(--color_background_light);
-  border: 1px solid var(--color_gray_light);
-  border-radius: 4px;
-  margin-top: 0.5em;
-  min-height: 6em;
-  padding: 16px 16px 16px 32px;
-  cursor: pointer;
-  gap: 12px;
-
-  @media screen and (min-width: 768px) {
-    padding-left: 48px;
-  }
-
-  &:hover {
-    background-color: var(--color_gray_light);
-    color: var(--color_text_light)
-  }
-
-  * {
-    margin: 0;
-  }
-
-  ul {
-    padding: 0;
-    list-style-type: none;
-  }
-
-  h4 {
-    font-size: 12px;
-  }
-
-  &__content {
-    display: flex;
-    flex-direction: column;
-    flex-basis: calc(80% - 6px);
-    max-width: calc(80% - 6px);
-    gap: 12px;
-  }
-
-  &__header {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-
-    @media screen and (min-width: 768px) {
-      flex-flow: row nowrap;
-    }
-
-    > div {
-      @media screen and (min-width: 768px) {
-        flex-basis: calc(50% - 6px);
-        max-width: calc(50% - 6px);
-      }
-    }
-  }
-
-  &__footer {
-    display: flex;
-    flex-basis: calc(20% - 6px);
-    max-width: calc(20% - 6px);
-    text-align: right;
-    justify-content: end;
-    text-align: right;
-
-    @media screen and (min-width: 768px) {
-      align-items: center;
-    }
-  }
-
-  &__icon {
-    position: absolute;
-    top: 20px;
-    left: -12px;
-
-    &::before {
-      background: $color-white;
-      border-radius: 50%;
-      height: 1em;
-      width: 1em;
-    }
-  }
-
-  &__status {
-    margin-top: auto;
-    font-size: 0.7em;
-    color: $color-black;
-    text-transform: uppercase;
-    margin-bottom: 5px;
-  }
-
-  &__number {
-    word-wrap: break-word;
-  }
-
-  &--warning {
-    border-color: $color-warning;
-  }
-
-  &--warning &__icon,
-  &--warning &__status {
-    color: $color-warning;
-  }
-
-  &--complete &__icon,
-  &--complete &__status {
-    color: $color-success;
-  }
-
-  &--unset &__icon,
-  &--unset &__status {
-    color: $color-black;
-  }
-
-  &--cancel {
-    cursor: not-allowed;
-  }
-
-  &--cancel &__icon,
-  &--cancel &__status {
-    font-weight: bold;
-    color: $color-danger;
-  }
-}

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

@@ -1,19 +0,0 @@
-import React from "react"
-import classNames from 'classnames';
-import { OrderTicketListItem } from './OrderTicketListItem';
-
-import './order-ticket-list.scss';
-
-export const OrderTicketList = ({ ticketType, tickets, summit, order, className }) => (
-    <>
-        <div className="order-ticket-list__type">{ticketType.name} Tickets ({tickets.length})</div>
-
-        {tickets.length > 0 && (
-            <ul className={classNames('order-ticket-list', className)}>
-                {tickets.map((ticket) => (
-                    <OrderTicketListItem key={ticket.id} ticket={ticket} summit={summit} order={order} />
-                ))}
-            </ul>
-        )}
-    </>
-);

package/src/components/summit-my-orders-tickets/components/OrderTicketList/OrderTicketListItem.js

@@ -1,13 +0,0 @@
-import React from "react"
-import classNames from 'classnames';
-import { OrderTicketDetails } from "../OrderTicketDetails/OrderTicketDetails";
-
-export const OrderTicketListItem = ({ ticket, summit, order, className }) => {
-    if (!ticket || !summit || !order) return null;
-
-    return (
-        <li className={classNames('order-ticket-list__item', className)}>
-            <OrderTicketDetails ticket={ticket} summit={summit} order={order} />
-        </li>
-    );
-};

package/src/components/summit-my-orders-tickets/components/OrderTicketList/order-ticket-list.scss

@@ -1,21 +0,0 @@
-@import "../../styles/variables";
-
-.order-ticket-list {
-  padding-left: 30px;
-  margin-top: 15px;
-
-  &__type {
-    display: none;
-    padding: 15px 20px;
-    font-size: 18px;
-    font-weight: 600;
-  }
-
-  &__item {
-    margin-bottom: 10px;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-}

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

@@ -1,93 +0,0 @@
-import React from 'react';
-import { useSelector } from 'react-redux';
-import classNames from 'classnames';
-import { useTicketDetails } from "../../util";
-import { TicketPopup } from '../TicketPopup/TicketPopup';
-
-import './ticket-details.scss';
-
-export const TicketDetails = ({ ticket, className }) => {
-    const summit = useSelector(state => state.summitState.summit);
-    const {
-        status,
-        type,
-        role,
-        isActive,
-        isUnassigned,
-        handleClick,
-        showPopup,
-        handlePopupClose,
-        isReassignable,
-        formattedDate
-    } = useTicketDetails({ ticket, summit });
-
-    return (
-        <>
-            <div
-                className={classNames(
-                    'ticket-details',
-                    `ticket-details--${status.className}`,
-                    {
-                        'ticket-details--disabled': isUnassigned && !isReassignable,
-                        [status.className]: isReassignable,
-                    },
-                    className
-                )}
-                onClick={handleClick}
-            >
-                <i className={`ticket-details__icon fa fa-2x ${status.icon}`} />
-
-                <div className="ticket-details__content">
-                    <div className="ticket-details__header">
-                        <h4 className="ticket-details__name">{type.name}</h4>
-
-                        <h5 className="ticket-details__date">{formattedDate}</h5>
-
-                        <p className="ticket-details__status">
-                            {status.text}
-                        </p>
-                    </div>
-
-                    <div className="ticket-details__meta">
-                        <h4 className="ticket-details__type">
-                            {type.name}
-                        </h4>
-
-                        <h5 className="ticket-details__number" style={{ fontSize: 10 }}>
-                            {ticket.number}
-                        </h5>
-
-                        <p className="ticket-details__owner">
-                            Purchased By {ticket.order.owner_first_name} {ticket.order.owner_last_name} ({ticket.order.owner_email})
-                        </p>
-
-                        {role && 
-                            <p className="ticket-details__badge">
-                                Badge Features: {role}
-                            </p>
-                        }
-                    </div>
-                </div>
-
-
-                <div className="ticket-details__footer">
-                    {isActive && (
-                        <i className="ticket-details__arrow fa fa-angle-right" />
-                    )}
-                </div>
-            </div>
-
-            {
-                showPopup && (
-                    <TicketPopup
-                        ticket={ticket}
-                        summit={summit}
-                        order={ticket.order}
-                        fromTicketList={true}
-                        onClose={handlePopupClose}
-                    />
-                )
-            }
-        </>
-    );
-};

package/src/components/summit-my-orders-tickets/components/TicketDetails/ticket-details.scss

@@ -1,129 +0,0 @@
-@import "../../styles/variables";
-
-.ticket-details {
-  position: relative;
-  display: flex;
-  background-color: var(--color_background_light);
-  border: 1px solid var(--color_gray_light);
-  border-radius: 4px;
-  min-height: 6em;
-  padding: 16px 16px 16px 32px;
-  cursor: pointer;
-  gap: 12px;
-
-  @media screen and (min-width: 768px) {
-    padding-left: 48px;
-  }
-
-  &:hover {
-    background-color: $color-gray-lightest;
-  }
-
-  * {
-    margin: 0;
-  }
-
-  ul {
-    padding: 0;
-    list-style-type: none;
-  }
-
-  &__content {
-    display: flex;
-    flex-direction: column;
-    flex-basis: calc(80% - 6px);
-    max-width: calc(80% - 6px);
-    gap: 12px;
-
-    @media screen and (min-width: 768px) {
-      flex-flow: row nowrap;
-    }
-  }
-
-  &__footer {
-    display: flex;
-    flex-basis: calc(20% - 6px);
-    max-width: calc(20% - 6px);
-    text-align: right;
-    justify-content: end;
-    text-align: right;
-
-    @media screen and (min-width: 768px) {
-      align-items: center;
-    }
-  }
-
-  &__header,
-  &__meta {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-
-    > * {
-      margin: 0;
-    }
-
-    @media screen and (min-width: 768px) {
-      flex-basis: calc(50% - 6px);
-      max-width: calc(50% - 6px);
-    }
-  }
-
-  &__icon {
-    position: absolute;
-    top: 20px;
-    left: -12px;
-
-    &::before {
-      background: $color-white;
-      border-radius: 50%;
-      height: 1em;
-      width: 1em;
-    }
-  }
-
-  &__status {
-    margin-top: auto;
-    font-size: 0.8em !important;
-    color: $color-black;
-    text-transform: uppercase;
-  }
-
-  &--warning {
-    border-color: $color-warning;
-  }
-
-  &--warning &__icon,
-  &--warning &__status {
-    color: $color-warning;
-  }
-
-  &--complete &__icon,
-  &--complete &__status {
-    color: $color-success;
-  }
-
-  &--unset &__icon,
-  &--unset &__status {
-    color: $color-black;
-  }
-
-  &--cancel &__icon,
-  &--cancel &__status {
-    color: $color-danger;
-  }
-
-  &--disabled &__icon,
-  &--disabled &__status {
-    color: $color-black;
-  }
-
-  &--disabled {
-    opacity: 0.6;
-
-    &:hover {
-      cursor: default;
-      background-color: $color-white;
-    }
-  }
-}

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

@@ -1,65 +0,0 @@
-import React from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { Pagination } from 'react-bootstrap';
-import { useTranslation } from "react-i18next";
-import classNames from 'classnames';
-import { getUserTickets } from "../../store/actions/ticket-actions";
-import { TicketListItem } from './TicketListItem';
-
-import './ticket-list.scss';
-
-export const TicketList = ({ className }) => {
-    const { t } = useTranslation();
-    const dispatch = useDispatch();
-
-    const {
-        memberTickets: tickets,
-        current_page: currentPage,
-        last_page: lastPage,
-        per_page: perPage,
-        total
-    } = useSelector(state => state.ticketState || {});
-
-    const handlePageChange = (page) => dispatch(getUserTickets({ page, perPage }));
-
-    const hasTickets = tickets.length > 0;
-    const hasMultiplePages = total > perPage;
-
-    if (!hasTickets) return null;
-
-    return (
-        <>
-            <h2 className="ticket-list__title">
-                {t("tickets.title")}
-            </h2>
-
-            <ul className={classNames('ticket-list', className)}>
-                {tickets.map(ticket => (
-                    <TicketListItem key={ticket.id} ticket={ticket} />
-                ))}
-            </ul>
-
-            {hasMultiplePages && (
-                <div className="ticket-list__pagination">
-                    <div className="row">
-                        <div className="col-md-8">
-                            <Pagination
-                                bsSize="medium"
-                                prev
-                                next
-                                first
-                                last
-                                ellipsis
-                                boundaryLinks
-                                maxButtons={5}
-                                items={lastPage}
-                                activePage={currentPage}
-                                onSelect={handlePageChange}
-                            />
-                        </div>
-                    </div>
-                </div>
-            )}
-        </>
-    );
-}

package/src/components/summit-my-orders-tickets/components/TicketList/TicketListItem.js

@@ -1,16 +0,0 @@
-import React from 'react';
-import { TicketDetails } from '../TicketDetails/TicketDetails';
-
-export const TicketListItem = ({ ticket, className }) => {
-    if (!ticket) return null;
-
-    return (
-        <li className="ticket-list__item">
-            <div className="ticket-list__item__content row">
-                <div className="col-md-8">
-                    <TicketDetails ticket={ticket} className={className} />
-                </div>
-            </div>
-        </li>
-    );
-};

package/src/components/summit-my-orders-tickets/components/TicketList/ticket-list.scss

@@ -1,21 +0,0 @@
-@import "../../styles/variables";
-
-.ticket-list {
-  &__title {
-    margin-top: 30px;
-    margin-bottom: 30px;
-  }
-
-  &__pagination {
-    margin: 30px 0;
-    text-align: center;
-
-    .pagination {
-      margin: 0;
-    }
-  }
-
-  &__item {
-    margin-top: 15px;
-  }
-}

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

@@ -1,186 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { Tabs, TabList, Tab, TabPanel } from 'react-tabs';
-import { useTranslation } from "react-i18next";
-import classNames from 'classnames';
-import { getTicketById, getTicketPDF } from '../../store/actions/ticket-actions';
-import { getWindowScroll, useTicketDetails } from '../../util';
-import { TicketPopupReassignForm } from './TicketPopupReassignForm';
-import { TicketPopupAssignForm } from './TicketPopupAssignForm';
-import { TicketPopupNotifyForm } from './TicketPopupNotifyForm';
-import { TicketPopupRefundForm } from './TicketPopupRefundForm';
-import { TicketPopupEditDetailsForm } from './TicketPopupEditDetailsForm/TicketPopupEditDetailsForm';
-
-import QRCode from "react-qr-code";
-
-import './ticket-popup.scss';
-
-export const TicketPopup = ({ ticket, order, summit, onClose, fromTicketList, fromOrderList, className }) => {
-    const previousScrollPosition = useRef(getWindowScroll());
-    const { t } = useTranslation();
-    const dispatch = useDispatch();
-    const userProfile = useSelector(state => state.userState.userProfile);
-
-    const {
-        isSummitStarted,
-        type: ticketType,
-        role: ticketRole,
-        status: statusData,
-        isUnassigned,
-        isReassignable,
-        isRefundable
-    } = useTicketDetails({ ticket, summit });
-
-    const ticketName = ticketType.name;
-    const isUserOrderOwner = order.owner_id === userProfile.id;
-    const isUserTicketOwner = ticket.owner?.email === userProfile.email;
-
-    const canEditTicketData = (isUserTicketOwner || isUserOrderOwner) && summit.allow_update_attendee_extra_questions;
-
-    const [tabIndex, setTabIndex] = useState(0);
-
-    useEffect(() => {
-        dispatch(getTicketById({order, ticket}));
-    }, []);
-
-    useEffect(() => {
-        document.body.style.overflow = 'hidden';
-
-        return () => {
-            document.body.style.overflow = 'visible';
-
-            window.scrollTo({
-                top: previousScrollPosition.current.top
-            });
-        };
-    }, []);
-
-    const closePopup = () => {
-        if (onClose) onClose();
-    };
-
-    const handleDownloadClick = () => dispatch(getTicketPDF({ ticket }));
-
-    const handleCloseClick = () => closePopup();
-
-    return (
-        <div className={classNames('ticket-popup', className)}>
-            <div className="ticket-popup-content">
-                <header className="ticket-popup-header">
-                    <div className="ticket-popup-title">
-                        <h4>{ticketName}</h4>
-
-                        <h5>
-                            {ticket.number}
-                        </h5>
-
-                        <p>
-                            Purchased By {order.owner_first_name} {order.owner_last_name} ({order.owner_email})
-                        </p>
-
-                        <p>
-                            {ticketRole}
-                        </p>
-
-                        <p className={`status status-${statusData.className}`}>
-                            {statusData.text}
-                        </p>
-                    </div>
-
-                    <div className="ticket-popup-icons">
-                        <div className='ticket-popup-row-icon'>
-                        {!summit.is_virtual && statusData.type === 'STATUS_COMPLETE' && (
-                            <i onClick={handleDownloadClick} className="fa fa-file-pdf-o" />
-                        )}
-
-                        <i onClick={handleCloseClick} className="fa fa-times" />
-                        </div>
-                        {statusData.type === 'STATUS_COMPLETE' &&
-                            <div className='ticket-popup-qr'>
-                                <QRCode
-                                    size={256}
-                                    style={{ height: "auto", maxWidth: "100%", width: "100%" }}
-                                    value={ticket.qr_code}
-                                    viewBox={`0 0 256 256`}
-                                />
-                            </div>
-                        }
-                    </div>
-                </header>
-
-                <section className="ticket-popup-body">
-                    <Tabs selectedIndex={tabIndex} onSelect={(index) => setTabIndex(index)} selectedTabClassName="ticket-popup-tabs--active">
-                        <TabList className="ticket-popup-tabs">
-                            {isUnassigned && (
-                                <Tab>{t("ticket_popup.tab_assign")}</Tab>
-                            )}
-
-                            {!isUnassigned && (
-                                <Tab>{t("ticket_popup.tab_edit")}</Tab>
-                            )}
-
-                            {!isUnassigned && isReassignable && isUserOrderOwner && (
-                                <Tab>{t("ticket_popup.tab_reassign")}</Tab>
-                            )}
-
-                            {!isUnassigned && (isReassignable && !isUserTicketOwner && isUserOrderOwner) && (
-                                <Tab>{t("ticket_popup.tab_notify")}</Tab>
-                            )}
-
-                            {isUserOrderOwner && !isSummitStarted && isRefundable && (
-                                <Tab>{t("ticket_popup.tab_refund")}</Tab>
-                            )}
-                        </TabList>
-
-                        {isUnassigned && (
-                            <TabPanel className="ticket-popup-panel ticket-popup-panel--assign">
-                                <div className="ticket-popup-scroll">
-                                    <TicketPopupAssignForm ticket={ticket} summit={summit} order={order} />
-                                </div>
-                            </TabPanel>
-                        )}
-
-                        {!isUnassigned && (
-                            <TabPanel className="ticket-popup-panel ticket-popup-panel--edit">
-                                <div className="ticket-popup-scroll">
-                                    <TicketPopupEditDetailsForm
-                                        ticket={ticket}
-                                        summit={summit}
-                                        order={order}
-                                        canEditTicketData={canEditTicketData}
-                                        goToReassignPanel={() => setTabIndex(1)}
-                                        context={fromTicketList ? 'ticket-list' : 'order-list'}
-                                    />
-                                </div>
-                            </TabPanel>
-                        )}
-
-                        {!isUnassigned && isReassignable && isUserOrderOwner && (
-                            <TabPanel className="ticket-popup-panel ticket-popup-panel--reassign">
-                                <div className="ticket-popup-scroll">
-                                    <TicketPopupReassignForm ticket={ticket} summit={summit} order={order} />
-                                </div>
-                            </TabPanel>
-                        )}
-
-                        {!isUnassigned && (isReassignable && !isUserTicketOwner && isUserOrderOwner) && (
-                            <TabPanel className="ticket-popup-panel ticket-popup-panel--notify">
-                                <div className="ticket-popup-scroll">
-                                    <TicketPopupNotifyForm ticket={ticket} summit={summit} order={order} />
-                                </div>
-                            </TabPanel>
-                        )}
-
-                        {isUserOrderOwner && !isSummitStarted && isRefundable && (
-                            <TabPanel className="ticket-popup-panel ticket-popup-panel--refund">
-                                <div className="ticket-popup-scroll">
-                                    <TicketPopupRefundForm ticket={ticket} summit={summit} order={order} />
-                                </div>
-                            </TabPanel>
-                        )}
-                    </Tabs>
-                </section>
-            </div>
-        </div>
-    )
-};