Add permanent total to the bottom of checkout, move cart button to above total

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

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 && <CheckoutSidebar event={event} order={order} className={classes.sidebar}/>}
 
                 <div className={classes.buttons}>
+                    <div className={classes.orderTotal}>
+                        <div className={classes.itemRow}>
+                            <div className={classes.itemName}><b className={classes.total}>{t`Total`}</b></div>
+                            <div className={classes.itemValue}>
+                                <Currency
+                                    currency={event.currency}
+                                    price={order.total_gross}
+                                    freeLabel={showFreeWhenZeroTotal ? t`Free` : null}
+                                />
+                            </div>
+                        </div>
+                    </div>
                     {!isOrderComplete && (
                         <Button
                             className={classes.continueButton}
@@ -41,8 +55,7 @@ export const CheckoutFooter = ({isLoading, buttonText, event, order, isOrderComp
                                 size={'md'}
                                 className={classes.orderSummaryToggle}
                     >
-                        {isSidebarOpen && <IconShoppingCartDown stroke={2}/>}
-                        {!isSidebarOpen && <IconShoppingCartUp stroke={2}/>}
+                        {isSidebarOpen ? <IconChevronsDown stroke={2}/> : <IconChevronsUp stroke={2}/>}
                     </ActionIcon>
                 </div>
             </div>

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"
 

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"
 

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"
 

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"
 

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"
 

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"
 

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 ""
 

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 "总计"