@openeventkit/event-site 2.1.49 → 2.1.51

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>
-    );
-};

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

@@ -1,60 +0,0 @@
-@import "../../styles/variables";
-
-.order-list {
-  &__title {
-    margin-top: 30px;
-    margin-bottom: 30px;
-  }
-
-  &__pagination {
-    margin: 30px 0;
-    text-align: center;
-
-    .pagination {
-      margin: 0;
-    }
-  }
-
-  &__item {
-    position: relative;
-    margin-bottom: 15px;
-
-    &--active {
-      margin-top: 30px;
-      margin-bottom: 30px;
-      padding-top: 30px;
-      padding-bottom: 30px;
-      border-top: 1px solid $color-gray-light;
-      border-bottom: 1px solid $color-gray-light;
-    }
-
-    &:first-child {
-      margin-top: 0 !important;
-      padding-top: 0 !important;
-      border-top: 0 !important;
-    }
-
-    &:last-child {
-      margin-bottom: 0 !important;
-      padding-bottom: 0 !important;
-      border-bottom: 0 !important;
-    }
-
-    &__content {
-      position: relative;
-
-      @media screen and (min-width: 992px) {
-        display: flex;
-      }
-    }
-
-    &__sidebar {
-      position: sticky;
-      top: 30px;
-    }
-
-    [class*="col-"] {
-      position: static;
-    }
-  }
-}

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

@@ -1,83 +0,0 @@
-import React, { useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { useTranslation } from "react-i18next";
-import classNames from 'classnames';
-import { CSSTransition } from "react-transition-group";
-import Alert from 'react-bootstrap/lib/Alert';
-import { getSummitFormattedDate, getSummitLocation, getTicketRole, getTicketType } from '../../util';
-import { cancelOrder } from '../../store/actions/order-actions';
-import { getNow } from '../../store/actions/timer-actions';
-import { ConfirmPopup, CONFIRM_POPUP_CASE } from '../ConfirmPopup/ConfirmPopup';
-
-import './order-options.scss';
-
-export const OrderOptions = ({ order, summit, ticket, className }) => {
-    const { t } = useTranslation();
-    const dispatch = useDispatch();
-    const supportEmail = useSelector(state => state.globalState?.supportEmail || '');
-    const [showConfirm, setShowConfirm] = useState(false);
-    const [showRefundSuccess, setShowRefundSuccess] = useState(false);
-    const now = dispatch(getNow());
-
-    const handleCancelClick = () => setShowConfirm(true);
-
-    const handleConfirmAccept = () => {
-        dispatch(cancelOrder({ order })).then(() => {
-            setTimeout(() => setShowRefundSuccess(true), 500);
-            setTimeout(() => setShowRefundSuccess(false), 5000);
-        }).catch(() => { });
-
-        setShowConfirm(false);
-    };
-
-    const handleConfirmReject = () => setShowConfirm(false);
-
-    if (!summit) return null;
-
-    return (
-        <>
-            <div className={classNames('order-options', className)}>
-                <CSSTransition
-                    unmountOnExit
-                    in={showRefundSuccess}
-                    timeout={2000}
-                    classNames="fade-in-out"
-                >
-                    <>
-                        <br />
-                        <Alert bsStyle="success">
-                            {t("tickets.refund_request_success_message")}
-                        </Alert>
-                    </>
-                </CSSTransition>
-
-                {
-                    
-                    (summit.registration_allowed_refund_request_till_date ? 
-                        summit.registration_allowed_refund_request_till_date > now 
-                        :
-                        summit.start_date > now
-                    ) && 
-                    order && 
-                    order?.status === 'Paid' && 
-                    order?.amount > 0 && 
-                    order?.amount > order?.refunded_amount && (
-                    <button onClick={handleCancelClick} className="order-option cancel">
-                        {t("order_info.cancel_order")}
-                    </button>
-                )}
-
-                <a className="order-option cancel" target="_blank" href={`mailto:${supportEmail}`}>
-                    {t("order_info.email_support")}
-                </a>
-            </div>
-
-            <ConfirmPopup
-                isOpen={showConfirm}
-                popupCase={CONFIRM_POPUP_CASE.CANCEL_ORDER}
-                onAccept={handleConfirmAccept}
-                onReject={handleConfirmReject}
-            />
-        </>
-    );
-};

package/src/components/summit-my-orders-tickets/components/OrderOptions/order-options.scss

@@ -1,50 +0,0 @@
-@import "../../styles/variables";
-
-.order-info-wrapper,
-.order-option {
-  font-weight: bold;
-  padding: 15px;
-  margin-top: 20px;
-  border: 1px solid $color-gray-light;
-}
-
-.order-info-wrapper {
-  margin-top: 20px;
-
-  @media (max-width: 768px) {
-    margin-bottom: 100px;
-  }
-
-  .info {
-    font-weight: normal;
-
-    h4 {
-      font-weight: bold;
-    }
-
-    .role-badge {
-      text-transform: uppercase;
-    }
-  }
-
-  &:empty {
-    display: none;
-  }
-}
-
-.order-option {
-  display: block;
-  width: 100%;
-  text-align: center;
-  line-height: 2em;
-  cursor: pointer;
-  background-color: transparent;
-
-  &:hover {
-    background-color: $color-gray-lightest;
-  }
-
-  &.cancel {
-    color: $color-danger;
-  }
-}