diff --git a/frontend/src/components/layouts/Checkout/CheckoutFooter/CheckoutFooter.module.scss b/frontend/src/components/layouts/Checkout/CheckoutFooter/CheckoutFooter.module.scss index b31dd1f7..e074f988 100644 --- a/frontend/src/components/layouts/Checkout/CheckoutFooter/CheckoutFooter.module.scss +++ b/frontend/src/components/layouts/Checkout/CheckoutFooter/CheckoutFooter.module.scss @@ -30,21 +30,45 @@ } .buttons { - .orderSummaryToggle { - display: block; + .orderTotal { + .itemRow { + display: flex; + align-content: center; + justify-content: space-between; + + .itemName { + text-align: left; + flex: 1; + + .total { + font-size: 1.1em; + } + } + + .itemValue { + text-align: right; + font-weight: 500; + white-space: nowrap; + } + } @include respond-above(md) { display: none; } + + width: 100%; } .continueButton { margin-top: 20px; flex: 1; max-width: 700px; + flex-width: 100%; } + position: relative; display: flex; + flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; @@ -57,6 +81,23 @@ .continueButton { margin-top: 0; } + + .orderSummaryToggle { + position: absolute; + background-color: var(--tk-color-white); + top: 0; + left: 0; + right: 0; + margin-inline: auto; + width: fit-content; + transform:translateY(-50%); + border: 1px solid #e0e0e0; + box-shadow: 0px -5px 5px 0 rgba(0, 0, 0, 0.0392156863); + + @include respond-above(md) { + display: none; + } + } } } diff --git a/frontend/src/components/layouts/Checkout/CheckoutFooter/index.tsx b/frontend/src/components/layouts/Checkout/CheckoutFooter/index.tsx index fcc41419..b9da1e42 100644 --- a/frontend/src/components/layouts/Checkout/CheckoutFooter/index.tsx +++ b/frontend/src/components/layouts/Checkout/CheckoutFooter/index.tsx @@ -1,11 +1,13 @@ import {ActionIcon, Button} from "@mantine/core"; import {t} from "@lingui/macro"; -import {IconShoppingCartDown, IconShoppingCartUp} from "@tabler/icons-react"; +import {IconChevronsDown, IconChevronsUp} from "@tabler/icons-react"; import classes from "./CheckoutFooter.module.scss"; import {Event, Order} from "../../../../types.ts"; import {CheckoutSidebar} from "../CheckoutSidebar"; import {useState} from "react"; import classNames from "classnames"; +import {Currency} from "../../../common/Currency"; + interface ContinueButtonProps { isLoading: boolean; @@ -15,7 +17,7 @@ interface ContinueButtonProps { isOrderComplete?: boolean; } -export const CheckoutFooter = ({isLoading, buttonText, event, order, isOrderComplete = false}: ContinueButtonProps) => { +export const CheckoutFooter = ({isLoading, buttonText, event, order, isOrderComplete = false, showFreeWhenZeroTotal = true}: ContinueButtonProps) => { const [isSidebarOpen, setIsSidebarOpen] = useState(false); return ( @@ -26,6 +28,18 @@ export const CheckoutFooter = ({isLoading, buttonText, event, order, isOrderComp {isSidebarOpen && }
+
+
+
{t`Total`}
+
+ +
+
+
{!isOrderComplete && (
diff --git a/frontend/src/locales/de.po b/frontend/src/locales/de.po index 74e6cfbf..2b8209ab 100644 --- a/frontend/src/locales/de.po +++ b/frontend/src/locales/de.po @@ -867,7 +867,7 @@ msgstr "Hintergrundfarbe des Inhalts" #: src/components/common/WidgetEditor/index.tsx:31 #: src/components/common/WidgetEditor/index.tsx:217 -#: src/components/layouts/Checkout/CheckoutFooter/index.tsx:36 +#: src/components/layouts/Checkout/CheckoutFooter/index.tsx:50 #: src/components/routes/ticket-widget/SelectTickets/index.tsx:387 msgid "Continue" msgstr "Weitermachen" @@ -1585,6 +1585,7 @@ msgstr "Passwort vergessen?" #: src/components/common/OrderSummary/index.tsx:99 #: src/components/common/TicketsTable/SortableTicket/index.tsx:88 #: src/components/common/TicketsTable/SortableTicket/index.tsx:102 +#: src/components/layouts/Checkout/CheckoutFooter/index.tsx:38 #: src/components/routes/ticket-widget/SelectTickets/Prices/Tiered/index.tsx:54 msgid "Free" msgstr "Frei" @@ -3515,6 +3516,7 @@ msgid "Tools" msgstr "Werkzeuge" #: src/components/common/OrderSummary/index.tsx:92 +#: src/components/layouts/Checkout/CheckoutFooter/index.tsx:33 msgid "Total" msgstr "Gesamt" diff --git a/frontend/src/locales/en.po b/frontend/src/locales/en.po index eb8dce72..5d27ea12 100644 --- a/frontend/src/locales/en.po +++ b/frontend/src/locales/en.po @@ -1022,7 +1022,7 @@ msgstr "Content background color" #: src/components/common/WidgetEditor/index.tsx:31 #: src/components/common/WidgetEditor/index.tsx:217 -#: src/components/layouts/Checkout/CheckoutFooter/index.tsx:36 +#: src/components/layouts/Checkout/CheckoutFooter/index.tsx:50 #: src/components/routes/ticket-widget/SelectTickets/index.tsx:387 msgid "Continue" msgstr "Continue" @@ -1820,6 +1820,7 @@ msgstr "Forgot password?" #: src/components/common/OrderSummary/index.tsx:99 #: src/components/common/TicketsTable/SortableTicket/index.tsx:88 #: src/components/common/TicketsTable/SortableTicket/index.tsx:102 +#: src/components/layouts/Checkout/CheckoutFooter/index.tsx:38 #: src/components/routes/ticket-widget/SelectTickets/Prices/Tiered/index.tsx:54 msgid "Free" msgstr "Free" @@ -4128,6 +4129,7 @@ msgid "Tools" msgstr "Tools" #: src/components/common/OrderSummary/index.tsx:92 +#: src/components/layouts/Checkout/CheckoutFooter/index.tsx:33 msgid "Total" msgstr "Total" diff --git a/frontend/src/locales/es.po b/frontend/src/locales/es.po index 0bef4f73..415794ab 100644 --- a/frontend/src/locales/es.po +++ b/frontend/src/locales/es.po @@ -867,7 +867,7 @@ msgstr "Color de fondo del contenido" #: src/components/common/WidgetEditor/index.tsx:31 #: src/components/common/WidgetEditor/index.tsx:217 -#: src/components/layouts/Checkout/CheckoutFooter/index.tsx:36 +#: src/components/layouts/Checkout/CheckoutFooter/index.tsx:50 #: src/components/routes/ticket-widget/SelectTickets/index.tsx:387 msgid "Continue" msgstr "Continuar" @@ -1585,6 +1585,7 @@ msgstr "¿Has olvidado tu contraseña?" #: src/components/common/OrderSummary/index.tsx:99 #: src/components/common/TicketsTable/SortableTicket/index.tsx:88 #: src/components/common/TicketsTable/SortableTicket/index.tsx:102 +#: src/components/layouts/Checkout/CheckoutFooter/index.tsx:38 #: src/components/routes/ticket-widget/SelectTickets/Prices/Tiered/index.tsx:54 msgid "Free" msgstr "Gratis" @@ -3515,6 +3516,7 @@ msgid "Tools" msgstr "Herramientas" #: src/components/common/OrderSummary/index.tsx:92 +#: src/components/layouts/Checkout/CheckoutFooter/index.tsx:33 msgid "Total" msgstr "Total" diff --git a/frontend/src/locales/fr.po b/frontend/src/locales/fr.po index de62c710..7caef614 100644 --- a/frontend/src/locales/fr.po +++ b/frontend/src/locales/fr.po @@ -867,7 +867,7 @@ msgstr "Couleur d'arrière-plan du contenu" #: src/components/common/WidgetEditor/index.tsx:31 #: src/components/common/WidgetEditor/index.tsx:217 -#: src/components/layouts/Checkout/CheckoutFooter/index.tsx:36 +#: src/components/layouts/Checkout/CheckoutFooter/index.tsx:50 #: src/components/routes/ticket-widget/SelectTickets/index.tsx:387 msgid "Continue" msgstr "Continuer" @@ -1585,6 +1585,7 @@ msgstr "Mot de passe oublié?" #: src/components/common/OrderSummary/index.tsx:99 #: src/components/common/TicketsTable/SortableTicket/index.tsx:88 #: src/components/common/TicketsTable/SortableTicket/index.tsx:102 +#: src/components/layouts/Checkout/CheckoutFooter/index.tsx:38 #: src/components/routes/ticket-widget/SelectTickets/Prices/Tiered/index.tsx:54 msgid "Free" msgstr "Gratuit" @@ -3515,6 +3516,7 @@ msgid "Tools" msgstr "Outils" #: src/components/common/OrderSummary/index.tsx:92 +#: src/components/layouts/Checkout/CheckoutFooter/index.tsx:33 msgid "Total" msgstr "Total" diff --git a/frontend/src/locales/pt-br.po b/frontend/src/locales/pt-br.po index 23a80a8e..d0424105 100644 --- a/frontend/src/locales/pt-br.po +++ b/frontend/src/locales/pt-br.po @@ -867,7 +867,7 @@ msgstr "Cor de fundo do conteúdo" #: src/components/common/WidgetEditor/index.tsx:31 #: src/components/common/WidgetEditor/index.tsx:217 -#: src/components/layouts/Checkout/CheckoutFooter/index.tsx:36 +#: src/components/layouts/Checkout/CheckoutFooter/index.tsx:50 #: src/components/routes/ticket-widget/SelectTickets/index.tsx:387 msgid "Continue" msgstr "Continuar" @@ -1585,6 +1585,7 @@ msgstr "Esqueceu a senha?" #: src/components/common/OrderSummary/index.tsx:99 #: src/components/common/TicketsTable/SortableTicket/index.tsx:88 #: src/components/common/TicketsTable/SortableTicket/index.tsx:102 +#: src/components/layouts/Checkout/CheckoutFooter/index.tsx:38 #: src/components/routes/ticket-widget/SelectTickets/Prices/Tiered/index.tsx:54 msgid "Free" msgstr "Grátis" @@ -3515,6 +3516,7 @@ msgid "Tools" msgstr "Ferramentas" #: src/components/common/OrderSummary/index.tsx:92 +#: src/components/layouts/Checkout/CheckoutFooter/index.tsx:33 msgid "Total" msgstr "Total" diff --git a/frontend/src/locales/pt.po b/frontend/src/locales/pt.po index 0b49ad40..9e9ddfd3 100644 --- a/frontend/src/locales/pt.po +++ b/frontend/src/locales/pt.po @@ -867,7 +867,7 @@ msgstr "Cor de fundo do conteúdo" #: src/components/common/WidgetEditor/index.tsx:31 #: src/components/common/WidgetEditor/index.tsx:217 -#: src/components/layouts/Checkout/CheckoutFooter/index.tsx:36 +#: src/components/layouts/Checkout/CheckoutFooter/index.tsx:50 #: src/components/routes/ticket-widget/SelectTickets/index.tsx:387 msgid "Continue" msgstr "Continuar" @@ -1585,6 +1585,7 @@ msgstr "Esqueceu sua senha?" #: src/components/common/OrderSummary/index.tsx:99 #: src/components/common/TicketsTable/SortableTicket/index.tsx:88 #: src/components/common/TicketsTable/SortableTicket/index.tsx:102 +#: src/components/layouts/Checkout/CheckoutFooter/index.tsx:38 #: src/components/routes/ticket-widget/SelectTickets/Prices/Tiered/index.tsx:54 msgid "Free" msgstr "Livre" @@ -3515,6 +3516,7 @@ msgid "Tools" msgstr "Ferramentas" #: src/components/common/OrderSummary/index.tsx:92 +#: src/components/layouts/Checkout/CheckoutFooter/index.tsx:33 msgid "Total" msgstr "Total" diff --git a/frontend/src/locales/ru.po b/frontend/src/locales/ru.po index dacd9723..56565a4e 100644 --- a/frontend/src/locales/ru.po +++ b/frontend/src/locales/ru.po @@ -1022,7 +1022,7 @@ msgstr "" #: src/components/common/WidgetEditor/index.tsx:31 #: src/components/common/WidgetEditor/index.tsx:217 -#: src/components/layouts/Checkout/CheckoutFooter/index.tsx:36 +#: src/components/layouts/Checkout/CheckoutFooter/index.tsx:50 #: src/components/routes/ticket-widget/SelectTickets/index.tsx:387 msgid "Continue" msgstr "" @@ -1820,6 +1820,7 @@ msgstr "" #: src/components/common/OrderSummary/index.tsx:99 #: src/components/common/TicketsTable/SortableTicket/index.tsx:88 #: src/components/common/TicketsTable/SortableTicket/index.tsx:102 +#: src/components/layouts/Checkout/CheckoutFooter/index.tsx:38 #: src/components/routes/ticket-widget/SelectTickets/Prices/Tiered/index.tsx:54 msgid "Free" msgstr "" @@ -4117,6 +4118,7 @@ msgid "Tools" msgstr "" #: src/components/common/OrderSummary/index.tsx:92 +#: src/components/layouts/Checkout/CheckoutFooter/index.tsx:33 msgid "Total" msgstr "" diff --git a/frontend/src/locales/zh-cn.po b/frontend/src/locales/zh-cn.po index bce62a1d..795e35cb 100644 --- a/frontend/src/locales/zh-cn.po +++ b/frontend/src/locales/zh-cn.po @@ -867,7 +867,7 @@ msgstr "内容背景颜色" #: src/components/common/WidgetEditor/index.tsx:31 #: src/components/common/WidgetEditor/index.tsx:217 -#: src/components/layouts/Checkout/CheckoutFooter/index.tsx:36 +#: src/components/layouts/Checkout/CheckoutFooter/index.tsx:50 #: src/components/routes/ticket-widget/SelectTickets/index.tsx:387 msgid "Continue" msgstr "继续" @@ -1585,6 +1585,7 @@ msgstr "忘记密码?" #: src/components/common/OrderSummary/index.tsx:99 #: src/components/common/TicketsTable/SortableTicket/index.tsx:88 #: src/components/common/TicketsTable/SortableTicket/index.tsx:102 +#: src/components/layouts/Checkout/CheckoutFooter/index.tsx:38 #: src/components/routes/ticket-widget/SelectTickets/Prices/Tiered/index.tsx:54 msgid "Free" msgstr "免费" @@ -3515,6 +3516,7 @@ msgid "Tools" msgstr "工具" #: src/components/common/OrderSummary/index.tsx:92 +#: src/components/layouts/Checkout/CheckoutFooter/index.tsx:33 msgid "Total" msgstr "总计"