Add warning message when user has no birthdate

core/static/core/style.scss

@@ -135,6 +135,10 @@ a {
   width: 23%;
 }
 
+.clickable:hover {
+  cursor: pointer;
+}
+
 /*--------------------------------HEADER-------------------------------*/
 
 #header_language_chooser {
@@ -452,6 +456,24 @@ header {
     overflow: auto;
   }
 
+  .alert {
+    margin: 10px;
+    border: #fc8181 1px solid;
+    background-color: rgb(255,245,245);
+    border-radius: 4px;
+    color: #c53030;
+    padding: 12px 16px;
+    display: flex;
+    gap: 16px;
+    max-width: 100%;
+    align-items: center;
+    text-align: justify;
+
+    .alert-main {
+      flex: 2;
+    }
+  }
+
   .tool_bar {
     overflow: auto;
     padding: 4px;

core/static/eboutic/css/eboutic.css

@@ -16,7 +16,7 @@
 }
 
 #basket {
-    width: 300px;
+    min-width: 300px;
     border-radius: 8px;
     box-shadow: rgb(60 64 67 / 30%) 0 1px 3px 0, rgb(60 64 67 / 15%) 0 4px 8px 3px;
     padding: 10px;

counter/templates/counter/counter_main.jinja

@@ -20,7 +20,6 @@
 
 {% block content %}
 <h3>{% trans counter_name=counter %}{{ counter_name }} counter{% endtrans %}</h3>
-
     <div>
         <h3>{% trans %}Sellings{% endtrans %}</h3>
         {% if last_basket %}

eboutic/templates/eboutic/eboutic_main.jinja

@@ -74,6 +74,20 @@
             </div>
         </div>
         <div id="catalog">
+            {% if not request.user.date_of_birth %}
+                <div class="alert" x-data="{show_alert: true}" x-show="show_alert" x-transition>
+                    <span class="alert-main">
+                        {% trans %}You have not filled in your date of birth. As a result, you may not have access to all the products in the online shop. To fill in your date of birth, you can go to{% endtrans %}
+                        <a href="{{ url("core:user_edit", user_id=request.user.id) }}">
+                            {% trans %}this page{% endtrans %}
+                        </a>
+                    </span>
+                    <span class="clickable" @click="show_alert = false">
+                        <i class="fa fa-close"></i>
+                    </span>
+                </div>
+            {% endif %}
+
             {% for category, items in products|groupby('category') %}
                 {% if items|count > 0 %}
                     <section>