@openeventkit/event-site 2.1.48 → 2.1.50

package/src/components/summit-my-orders-tickets/components/ConfirmPopup/confirm-popup.scss

@@ -1,57 +0,0 @@
-@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/DelegatePopup/DelegatePopup.js

@@ -1,50 +0,0 @@
-/**
- * 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 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

@@ -1,57 +0,0 @@
-@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/MyOrdersTickets.js

@@ -1,79 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { useDispatch, useSelector, shallowEqual } from 'react-redux';
-import { useTranslation } from "react-i18next";
-import classNames from 'classnames';
-import AjaxLoader from "openstack-uicore-foundation/lib/components/ajaxloader";
-import { getUserOrders } from '../store/actions/order-actions';
-import { getUserTickets } from '../store/actions/ticket-actions';
-import { OrderList } from './OrderList/OrderList';
-import { TicketList } from './TicketList/TicketList';
-
-export const MyOrdersTickets = ({ className }) => {
-    const { t } = useTranslation();
-    const dispatch = useDispatch();
-
-    const userState = useSelector(state => state.userState || {}, shallowEqual);
-    const orderState = useSelector(state => state.orderState || {}, shallowEqual);
-    const ticketState = useSelector(state => state.ticketState || {}, shallowEqual);
-    const summitState = useSelector(state => state.summitState || {}, shallowEqual);
-    const globalState = useSelector(state => state.globalState || {}, shallowEqual);
-
-    const [isInitializing, setIsInitializing] = useState(true);
-
-    const fetchData = async () => {
-        setIsInitializing(true);
-        dispatch(getUserOrders({ page: orderState.current_page, perPage: orderState.per_page }))
-            .then(() => {
-                dispatch(getUserTickets({ page: ticketState.current_page, perPage: ticketState.per_page }))
-                .then(() =>  setIsInitializing(false))
-                .catch((e) => {
-                    console.log(e);
-                    setIsInitializing(false);
-                })
-        }).catch((e) => {
-            console.log(e);
-            setIsInitializing(false);
-        })
-    };
-
-    useEffect(() => {
-        fetchData();
-    }, []);
-
-    const isLoading = isInitializing || userState.loading || orderState.loading || ticketState.loading || summitState.loading;
-    const hasOrders = orderState.memberOrders?.length > 0;
-    const hasTickets = ticketState.memberTickets?.length > 0;
-
-    return (
-        <>
-            <AjaxLoader show={isLoading} size={120} />
-
-            {isLoading && (!hasOrders && !hasTickets) && (
-                <div className="orders-tickets-loading">
-                    <p>{t('orders-tickets.loading')}</p>
-                </div>
-            )}
-
-            {!isLoading && (!hasOrders && !hasTickets) && (
-                <div className="orders-tickets-empty">
-                    <h2>{t('orders-tickets.empty-title')}</h2>
-                    <p dangerouslySetInnerHTML={{ __html: t('orders-tickets.empty-text', { support_email : globalState.supportEmail }) }}></p>
-                </div>
-            )}
-
-            <div className={classNames('my-orders-tickets', className)}>
-                {hasOrders && (
-                    <OrderList />
-                )}
-
-                {(hasOrders && hasTickets) && (
-                    <hr className="orders-tickets-divider" />
-                )}
-
-                {hasTickets && (
-                    <TicketList />
-                )}
-            </div>
-        </>
-    );
-};

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

@@ -1,112 +0,0 @@
-import React, { useEffect, useRef } from "react"
-import { useDispatch, useSelector } from "react-redux";
-import { useTranslation } from "react-i18next";
-import classNames from 'classnames';
-import { getNow } from "../../store/actions/timer-actions";
-import {
-    checkSummitPast,
-    getDocumentOffset,
-    getFormattedDate,
-    getOrderStatusData,
-    getSummitFormattedDate,
-    formatCurrency
-} from "../../util";
-import { setActiveOrderId } from "../../store/actions/order-actions";
-
-import './order-details.scss';
-
-export const OrderDetails = ({ order, summit, className }) => {
-    const elementRef = useRef(null);
-
-    const { t } = useTranslation();
-    const dispatch = useDispatch();
-
-    const {
-        activeOrderId
-    } = useSelector(state => state.orderState || {});
-
-    const isSummitPast = checkSummitPast(summit, dispatch(getNow()));
-    const statusData = getOrderStatusData(order, isSummitPast);
-    const isActive = activeOrderId === order.id;
-
-    const handleSetOrderActive = (orderId) => dispatch(setActiveOrderId( orderId ));
-
-    const handleClick = (event) => {
-        if (isActive) return handleSetOrderActive(null);
-
-        handleSetOrderActive(order.id);
-
-        setTimeout(() => {
-            const offset = getDocumentOffset(elementRef.current);
-
-            window.scroll({
-                top: offset.top - 30,
-                behavior: 'smooth'
-            });
-        }, 50);
-    };
-
-    // Clear active order on unmount (i.e., when page pagination changes)
-    useEffect(() => () => setActiveOrderId(null), []);
-
-    return (
-        <div
-            ref={elementRef}
-            className={classNames(
-                'order-details',
-                `order-details--${statusData.className}`,
-                { 'order-details--active': isActive },
-                className
-            )}
-            onClick={handleClick}
-        >
-            <i className={classNames(`order-details__icon fa fa-2x ${statusData.icon}`)} />
-
-            <div className="order-details__content">
-                <div className="order-details__header">
-                    <h4 className="order-details__event-name">
-                        {summit.name}
-                        <br />
-                        {getSummitFormattedDate(summit)}
-                    </h4>
-
-                    <p className="order-details__status">
-                        {statusData.text}
-                    </p>
-                </div>
-
-                <div className="order-details__meta">
-                    <h5 className="order-details__purchase-date">
-                        {t("orders.purchased")}{` `}
-                        {getFormattedDate(order.created)}
-                    </h5>
-
-                    <ul className="order-details__tickets">
-                        {Object.keys(order.tickets_excerpt_by_ticket_type).map((ticket, index) => {
-                            return (
-                                <li key={index}>
-                                    x{order.tickets_excerpt_by_ticket_type[ticket]} {ticket}
-                                </li>
-                            )
-                        })}
-                    </ul>
-
-                    <div className="order-details__number">
-                        {order.number}
-                    </div>
-                </div>
-            </div>
-
-            <div className="order-details__footer">
-                <h4 className="order-details__amount">{formatCurrency(order.amount, { currency: order.currency })}</h4>
-                <i className={classNames(
-                    'order-details__arrow fa',
-                    {
-                        'fa-angle-down': !isActive,
-                        'fa-angle-up': isActive
-                    }
-                )} />
-            </div>
-        </div>
-    );
-};

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

@@ -1,128 +0,0 @@
-@import "../../styles/variables";
-
-.order-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;
-  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_lightest);
-  }
-
-  &--active {
-    color: var(--color_text_med);
-    background-color: var(--color_gray_lighter) !important;
-  }
-
-  * {
-    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-direction: column;
-    justify-content: space-between;
-    flex-basis: calc(20% - 6px);
-    max-width: calc(20% - 6px);
-    text-align: right;
-  }
-
-  &__arrow {
-    margin-bottom: -4px;
-  }
-
-  &__header,
-  &__meta {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-
-    @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.7em;
-    color: $color-black;
-    text-transform: uppercase;
-    margin-top: auto;
-  }
-
-  &__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;
-  }
-
-  &--pending &__icon,
-  &--pending &__status {
-    color: $color-black;
-  }
-
-  &--cancel &__icon,
-  &--cancel &__status {
-    color: $color-danger;
-  }
-}

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

@@ -1,80 +0,0 @@
-import React, { useEffect } from "react"
-import { useDispatch, useSelector } from 'react-redux';
-import Pager from '../../../Pager/index';
-import { useTranslation } from "react-i18next";
-import classNames from 'classnames';
-import { getUserOrders } from "../../store/actions/order-actions";
-import { getTicketsByOrder } from "../../store/actions/ticket-actions";
-import { OrderListItem } from './OrderListItem';
-
-import './order-list.scss';
-
-export const OrderList = ({ className }) => {
-    const { t } = useTranslation();
-    const dispatch = useDispatch();
-
-    const {
-        memberOrders: orders,
-        current_page: currentPage,
-        last_page: lastPage,
-        per_page: perPage,
-        activeOrderId,
-        total
-    } = useSelector(state => state.orderState || {});
-
-    const {
-        orderTickets: {
-            current_page: orderTicketsCurrentPage,
-        }        
-    } = useSelector(state => state.ticketState || {});
-
-    const handlePageChange = (page) => dispatch(getUserOrders({ page, perPage }));
-
-    const handleTicketPageChange = (orderId, page) => dispatch(getTicketsByOrder({ orderId, page }));
-
-    const hasOrders = orders.length > 0;
-    const hasMultiplePages = total > perPage;
-
-    useEffect(() => {
-        if(activeOrderId) fetchData(activeOrderId);
-    }, [activeOrderId])
-    
-    if (!hasOrders) return null;
-
-
-    const fetchData = async (orderId) => {
-        await dispatch(getTicketsByOrder({ orderId, orderTicketsCurrentPage }));
-    };
-
-    return (
-        <>
-            <h2 className="order-list__title">
-                {t("orders.title")}
-            </h2>
-
-            <ul className={classNames('order-list', className)}>
-                {orders.map(order => (
-                    <OrderListItem key={order.id} order={order} changeTicketsPage={handleTicketPageChange} />
-                ))}
-            </ul>
-
-            {hasMultiplePages && (
-                <div className="order-list__pagination">
-                    
-                    <div className="row">
-                        <div className="col-md-8">
-                            <Pager
-                                totPages={lastPage}
-                                currentPage={currentPage}
-                                items={orders}
-                                pageClicked={(ele) => {
-                                    handlePageChange(ele);
-                                }}
-                            />
-                        </div>
-                    </div>
-                </div>
-            )}
-        </>
-    );
-};

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

@@ -1,85 +0,0 @@
-import React from "react";
-import { useSelector } from 'react-redux';
-import classNames from 'classnames';
-import { OrderDetails } from '../OrderDetails/OrderDetails';
-import { OrderSummary } from '../OrderSummary/OrderSummary';
-import { OrderTicketList } from '../OrderTicketList/OrderTicketList';
-import { OrderOptions } from "../OrderOptions/OrderOptions";
-import Pager from "../../../Pager";
-
-export const OrderListItem = ({ order, className, changeTicketsPage }) => {
-    const summit = useSelector(state => state.summitState.summit);
-
-    const {
-        orderTickets: {
-            total, per_page, current_page, last_page, tickets
-        },
-        loading,
-    } = useSelector(state => state.ticketState || {});
-
-    const {
-        activeOrderId,
-        isOrderLoading
-    } = useSelector(state => state.orderState || {});
-
-    const isActive = activeOrderId === order.id;
-
-    return (
-        <li className={classNames('order-list__item', { 'order-list__item--active': isActive }, className)}>
-            <div className="order-list__item__content row">
-                <div className="col-md-8">
-                    <OrderDetails order={order} summit={summit} />
-
-                    {!isOrderLoading && isActive && tickets.length > 0 && (
-                        <>
-                            <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);
-
-                                if (orderTickets.length < 1) return null;
-
-                                return (
-                                    <OrderTicketList
-                                        key={index}
-                                        ticketType={ticketType}
-                                        tickets={orderTickets}
-                                        summit={summit}
-                                        order={order}
-                                    />
-                                )
-                            })}
-
-                            {total > 5 &&(
-                                <div className="order-list__pagination">
-
-                                    <div className="row">
-                                        <div className="col-md-12">
-                                            <Pager
-                                                totPages={last_page}
-                                                currentPage={current_page}
-                                                items={tickets}
-                                                pageClicked={(ele) => {
-                                                    changeTicketsPage(order.id, ele);
-                                                }}
-                                            />
-                                        </div>
-                                    </div>
-                                </div>
-                            )}
-                        </>
-                    )}
-                </div>
-
-                <div className="col-md-4">
-                    {isActive && tickets.length > 0 && (
-                        <div className="order-list__item__sidebar">
-                            <OrderSummary order={order} summit={summit} tickets={tickets} />
-                            <OrderOptions order={order} summit={summit} />
-                        </div>
-                    )}
-                </div>
-            </div>
-        </li>
-    );
-};