@openeventkit/event-site 2.1.49 → 2.1.50

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

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

@@ -1,64 +0,0 @@
-import React, { useRef, useState } from 'react'
-import { useTranslation } from "react-i18next";
-import classNames from 'classnames';
-import { calculateOrderTotals, getWindowScroll } from '../../util';
-import { OrderSummaryTable } from './OrderSummaryTable';
-
-import './order-summary.scss';
-
-export const OrderSummary = ({ type = 'desktop', order, summit, tickets, className }) => {
-    const previousScrollPosition = useRef(getWindowScroll());
-    const { t } = useTranslation();
-    const [showTable, setShowTable] = useState(false);
-    const { amountTotal } = calculateOrderTotals({ order, summit, tickets });
-
-    const isMobile = type === 'mobile';
-
-    // TODO: Determine if we need to finish implementing a separate a `mobile` version of this component.
-    const toggleTable = () => setShowTable(!showTable);
-
-    const handleToggleClick = () => {
-        if (!isMobile) return;
-
-        if (!showTable) {
-            // Update the previousScrollPosition before showing the mobile table.
-            previousScrollPosition.current = getWindowScroll();
-            document.body.style.overflow = "hidden";
-        } else {
-            document.body.style.overflow = "visible";
-
-            window.scrollTo({
-                top: previousScrollPosition.current.top
-            });
-        }
-
-        toggleTable();
-    };
-
-    return (
-        <div className={classNames(
-            `order-summary order-summary-${type}`,
-            {
-                'open': showTable,
-                'closed': !showTable
-            },
-            className
-        )}>
-            {isMobile && (
-                <div className="order-summary-mobile-title" onClick={handleToggleClick}>
-                    <span>{t("order_summary.order_summary")}</span>
-                    <span>
-                        {amountTotal} &nbsp; <i className={`fa fa-chevron-${showTable ? 'up' : 'down'}`} aria-hidden="true"></i>
-                    </span>
-                </div>
-            )}
-
-            {(!isMobile || showTable) && (
-                <div className="order-summary-content">
-                    <OrderSummaryTable order={order} summit={summit} tickets={tickets} />
-                </div>
-            )}
-        </div>
-
-    );
-};

package/src/components/summit-my-orders-tickets/components/OrderSummary/OrderSummaryTable.js

@@ -1,97 +0,0 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { calculateOrderTotals, formatCurrency } from '../../util';
-
-export const OrderSummaryTable = ({ order, summit, tickets }) => {
-    const { t } = useTranslation();
-    const {
-        discountTotal,
-        refundTotal,
-        taxesTotal,
-        amountTotal,
-        ticketSummary
-    } = calculateOrderTotals({ order, summit, tickets });
-
-    return (
-        <div className="order-summary-table">
-            <div className="row">
-                <div className="col-xs-12">
-                    <h4>{t("order_summary.order_summary")}</h4>
-                </div>
-            </div>
-
-            {ticketSummary.length > 0 && (
-                <>
-                    {ticketSummary.map(ticket => {
-                        const ticketTotal = (ticket.qty * (ticket.ticket_type.cost * 100))/100;
-
-                        return (
-                            <div className="row order-row" key={`tixorder_${ticket.ticket_type.created}`}>
-                                <div className="col-xs-7">
-                                    <span>{ticket.ticket_type.name}</span>
-                                    <span>x{ticket.qty}</span>
-                                </div>
-                                <div className="col-xs-5 text-right subtotal">
-                                    {formatCurrency(ticketTotal, { currency: order.currency })}
-                                </div>
-                            </div>
-                        )
-                    })}
-                </>
-            )}
-
-            {order.discount_amount > 0 && (
-                <div className="row order-discounts order-row">
-                    <div className="col-xs-7 text-left">
-                        {t("order_summary.discounts")}
-                    </div>
-                    <div className="col-xs-5 text-right subtotal">
-                        -{discountTotal}
-                    </div>
-                </div>
-            )}
-
-            {order.taxes_amount > 0 && (
-                <div className="row order-taxes order-row">
-                    <div className="col-xs-7 text-left">
-                        {t("order_summary.taxes")}
-                    </div>
-                    <div className="col-xs-5 text-right subtotal">
-                        {taxesTotal}
-                    </div>
-                </div>
-            )}
-
-            {order.status === 'Paid' && (
-                <div className="row order-amount-paid order-row amount-paid-row">
-                    <div className="col-xs-7 text-left">
-                        {t("order_summary.amount_paid")}
-                    </div>
-                    <div className="col-xs-5 text-right subtotal">
-                        -{amountTotal}
-                    </div>
-                </div>
-            )}
-
-            {refundTotal > 0 && (
-                <div className="row order-refunds order-row">
-                    <div className="col-xs-7 text-left">
-                        {t("order_summary.refunds")}
-                    </div>
-                    <div className="col-xs-5 text-right subtotal">
-                        {refundTotal}
-                    </div>
-                </div>
-            )}
-
-            <div className="row total-row">
-                <div className="col-xs-6 text-left">
-                    {t("order_summary.total")}
-                </div>
-                <div className="col-xs-6 text-right total">
-                    {order.status === 'Paid' ? '$0.00' : amountTotal}
-                </div>
-            </div>
-        </div>
-    );
-};

package/src/components/summit-my-orders-tickets/components/OrderSummary/order-summary.scss

@@ -1,178 +0,0 @@
-@import "../../styles/variables";
-
-.order-summary-mobile {
-  // TODO: Use a color variable rather than a hard-coded color
-  background-color: $color-primary;
-  color: $color-white;
-
-  &.open {
-    z-index: 10000;
-    position: fixed;
-    top: 0;
-    left: 0;
-    height: 100vh;
-    width: 100vw;
-    overflow-y: scroll;
-  }
-
-  &.closed {
-    border-radius: 0 0 4px 4px;
-  }
-
-  &-title {
-    display: flex;
-    justify-content: space-between;
-    line-height: 50px;
-    font-weight: bold;
-    padding: 0 15px;
-    cursor: pointer;
-  }
-
-  &-close-text {
-    text-align: center;
-    margin: 15px;
-    padding: 0 0 15px;
-    cursor: pointer;
-  }
-
-  .order-summary-table {
-    text-align: left;
-    border: 1px solid $color-gray-light;
-    padding: 0 15px 15px 15px;
-    background-color: $color-white;
-    color: $color-text-dark;
-    margin: 0 15px 15px;
-
-    h4 {
-      font-weight: bold;
-      margin: 15px 0 20px 0;
-    }
-
-    .order-row {
-      padding: 10px 0;
-      margin: 0 5px;
-      flex-direction: row;
-
-      div:first-child {
-        margin-right: auto;
-        display: flex;
-        justify-content: space-between;
-      }
-
-      div:last-child {
-        margin-left: auto;
-      }
-    }
-
-    .total-row {
-      border-top: 1px solid $color-gray-light;
-      padding: 10px 0;
-      margin: 0 5px;
-      flex-direction: row;
-
-      div:first-child {
-        margin-right: auto;
-      }
-
-      div:last-child {
-        margin-left: auto;
-      }
-    }
-
-    .order-discounts {
-      color: $color-success;
-
-      .discount-desc {
-        font-size: 12px;
-        margin-bottom: 0;
-      }
-    }
-
-    .order-refunds {
-      color: $color-success;
-    }
-
-    .subtotal {
-      font-weight: bold;
-    }
-
-    .total {
-      font-weight: bold;
-      font-size: 16px;
-    }
-  }
-}
-
-.order-summary-table {
-  border: 1px solid $color-gray-light;
-  padding: 0 15px 15px 15px;
-
-  h4 {
-    font-weight: bold;
-    margin: 15px 0 20px 0;
-  }
-
-  .order-row {
-    padding: 10px 0;
-    margin: 0 5px;
-
-    div:first-child {
-      margin-right: auto;
-      display: flex;
-      justify-content: space-between;
-    }
-  }
-
-  .total-row {
-    border-top: 1px solid $color-gray-light;
-    padding: 10px 0;
-    margin: 0 5px;
-  }
-
-  .order-discounts {
-    color: $color-success;
-
-    .discount-desc {
-      font-size: 12px;
-    }
-  }
-
-  .order-refunds {
-    color: $color-success;
-  }
-
-  .order-taxes {
-    color: $color-danger;
-  }
-
-  .subtotal {
-    font-weight: bold;
-  }
-
-  .total {
-    font-weight: bold;
-    font-size: 16px;
-  }
-}
-
-@media (max-width: 991px) {
-  .order-summary-mobile {
-    .order-summary-table {
-      display: block;
-    }
-  }
-
-  .order-summary-table {
-    display: none;
-  }
-}
-
-@media (min-width: 992px) {
-  .order-summary-mobile {
-    display: none;
-  }
-
-  .order-summary-mobile-title {
-    display: none;
-  }
-}

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

@@ -1,102 +0,0 @@
-import React from "react"
-import classNames from 'classnames';
-import { useTicketDetails } from "../../util";
-import { TicketPopup } from "../TicketPopup/TicketPopup";
-
-import './order-ticket-details.scss';
-
-export const OrderTicketDetails = ({ ticket, summit, order, className }) => {
-    const {
-        status,
-        role,
-        isActive,
-        isUnassigned,
-        handleClick,
-        showPopup,
-        handlePopupClose,
-        isReassignable
-    } = useTicketDetails({ ticket, summit });
-
-    return (
-        <>
-            <div
-                className={classNames(
-                    'order-ticket-details',
-                    `order-ticket-details--${status.className}`,
-                    {
-                        'disabled': isUnassigned && !isReassignable,
-                        [status.className]: isReassignable,
-                    },
-                    className
-                )}
-                onClick={handleClick}
-            >
-                <i
-                    className={classNames(
-                        'order-ticket-details__icon',
-                        status.icon,
-                        `fa fa-2x`
-                    )}
-                />
-
-                <div className="order-ticket-details__content">
-                    <div className="order-ticket-details__header">
-                        <div>
-                            <h4 className="order-ticket-details__role">
-                                Attendee
-                            </h4>
-
-                            {ticket.discount > 0 && (
-                                <div className="order-ticket-details__role">
-                                    {((ticket.discount_in_cents / ticket.raw_cost_in_cents)*100).toFixed(0)}% discount
-                                </div>
-                            )}
-
-                            <div className="order-ticket-details__status">
-                                {status.text}
-                            </div>
-                        </div>
-
-                        <div>
-                            {ticket.owner?.email && (
-                                <h5 className="order-ticket-details__email">
-                                    {ticket.owner?.email}
-                                </h5>
-                            )}
-                        </div>
-                    </div>
-
-                    <div className="order-ticket-details__meta">
-                        <h5 className="order-ticket-details__number">
-                            {ticket.number}
-                        </h5>
-                    </div>
-
-                    {role && 
-                        <div className="order-ticket-details__badge">
-                            <h5 className="order-ticket-details__number">
-                                Badge Features: {role}
-                            </h5>
-                        </div>
-                    }
-
-                </div>
-
-                <div className="order-ticket-details__footer">
-                    {isActive && (
-                        <i className="order-ticket-details__arrow fa fa-angle-right" />
-                    )}
-                </div>
-            </div>
-
-            {showPopup && (
-                <TicketPopup
-                    ticket={ticket}
-                    summit={summit}
-                    order={order}
-                    onClose={handlePopupClose}
-                />
-            )}
-        </>
-    )
-}

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