feat: backup layout + others

scss/components/form/_render-field.scss

@@ -35,6 +35,10 @@ $e: ".render-field";
       gap: 0.25rem;
     }
 
+    &--no-desc {
+      align-items: center;
+    }
+
     @container render-field (max-width: 400px) {
       &__infos {
         flex-basis: 100%;

scss/layouts/_backup.scss

@@ -0,0 +1,13 @@
+@use "../variables" as *;
+
+$e: ".backup-page";
+
+#{$ua-id} {
+  #{$e} {
+    &__container {
+      display: flex;
+      flex-direction: column;
+      gap: 2rem;
+    }
+  }
+}

scss/layouts/_index.scss

@@ -1,3 +1,4 @@
+@use "backup";
 @use "layout";
 @use "page";
 @use "version-choice";

scss/layouts/_welcome.scss

@@ -5,7 +5,8 @@ $e: ".welcome-page";
 #{$ua-id} {
   #{$e} {
     &__card-list {
-      display: grid;
+      display: flex;
+      flex-direction: column;
       gap: 0.5rem;
     }
   }

storybook/stories/layouts/Backup.stories.js

@@ -0,0 +1,49 @@
+/**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/AFL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to [email protected] so we can send you a copy immediately.
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+ * versions in the future. If you wish to customize PrestaShop for your
+ * needs please refer to https://devdocs.prestashop.com/ for more information.
+ *
+ * @author    PrestaShop SA and Contributors <[email protected]>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
+ */
+
+import BackupLayout from "../../../views/templates/layouts/backup.html.twig";
+
+export default {
+  component: BackupLayout,
+  title: "Layouts/Pages/Backup",
+  args: {
+    steps: [
+      {
+        state: "current",
+        title: "Backup selection",
+      },
+      {
+        state: "normal",
+        title: "Restore",
+      },
+      {
+        state: "normal",
+        title: "Post-restore",
+      },
+    ],
+  },
+};
+
+export const Default = {};

storybook/stories/layouts/BackupSelection.stories.js → storybook/stories/layouts/Restore.stories.js

@@ -23,12 +23,12 @@
  * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
  */
 
-import BackupSelectionLayout from "../../../views/templates/layouts/backup-selection.html.twig";
+import RestoreLayout from "../../../views/templates/layouts/restore.html.twig";
 import BackupSelection from "../components/BackupSelection.stories";
 
 export default {
-  component: BackupSelectionLayout,
-  title: "Layouts/Pages/Backup selection",
+  component: RestoreLayout,
+  title: "Layouts/Pages/Restore",
   args: {
     ...BackupSelection.args,
     steps: [

views/templates/components/render-field.html.twig

@@ -1,10 +1,13 @@
-<div class="render-field render-field--{{ field.type }}" {% if field.id %}id="{{ field.id }}"{% endif %}
+<div class="render-field render-field--{{ field.type }} {% if not field.desc %}render-field--no-desc{% endif %}" {% if field.id %}id="{{ field.id }}"{% endif %}
 >
 	<div class="render-field__infos">
 		<p class="render-field__title">
       {{ field.title }} {% if field.required %}<sup class="text-danger">*</sup>{% endif %}
     </p>
-		<p class="render-field__desc text-muted">{{ field.desc }}</p>
+
+		{% if field.desc %}
+			<p class="render-field__desc text-muted">{{ field.desc }}</p>
+		{% endif %}
 	</div>
 
 	<div class="render-field__action">

views/templates/layouts/backup.html.twig

@@ -0,0 +1,57 @@
+{% extends '@ModuleAutoUpgrade/layouts/page.html.twig' %}
+
+{% block page_class %}backup-page{% endblock %}
+
+{% block title %}
+  <h1>{{ 'Back up your store'|trans({}) }}</h1>
+{% endblock %}
+
+{% block content %}
+  <div class="backup-page__container">
+    <div class="backup-page__section">
+      <p>{{ 'Backing up your store\'s files, database, and images means you can restore to a previous version if something goes wrong during the update. This keeps your data safe and ensures your business stays up and running.'|trans({}) }}</p>
+    </div>
+
+    <div class="backup-page__section">
+      {% include '@ModuleAutoUpgrade/components/render-bool.html.twig' with {
+        field: {
+          id: "backup_files_db",
+          title: "Back up files and database",
+          desc: "",
+          js: {
+            on: 'onclick="enableFeature()"',
+            off: 'onclick="disableFeature()"',
+          },
+          type: 'bool',
+          required: true,
+          disabled: true,
+        },
+        key: "PS_AUTOUP_BACKUP_FILES_DB",
+        val: true,
+      } %}
+
+      {% include '@ModuleAutoUpgrade/components/render-bool.html.twig' with {
+        field: {
+          id: "backup_files_db",
+          title: "Include images",
+          desc: "",
+          js: {
+            on: 'onclick="enableFeature()"',
+            off: 'onclick="disableFeature()"',
+          },
+          type: 'bool',
+          required: true,
+          disabled: true,
+        },
+        key: "PS_AUTOUP_BACKUP_WITH_IMAGES",
+        val: false,
+      } %}
+    </div>
+  </div>
+{% endblock %}
+
+{% block buttons_inner %}
+  <button class="btn btn-lg btn-primary" type="button">
+    {{ 'Launch backup'|trans({}) }}
+  </button>
+{% endblock %}

views/templates/layouts/update-options.html.twig

@@ -3,7 +3,7 @@
 {% block page_class %}update-options-page{% endblock %}
 
 {% block title %}
-  <h1>Update options</h1>
+  <h1>{{ 'Update options'|trans({}) }}</h1>
 {% endblock %}
 
 {% block content %}

views/templates/layouts/update.html.twig

@@ -15,6 +15,8 @@
 {% block buttons_inner %}
   <button class="btn btn-lg btn-primary" type="button">
     {{ 'Next'|trans({}) }}
-    <i class="material-icons">arrow_forward</i>
+    <i class="material-icons">
+      arrow_forward
+    </i>
   </button>
 {% endblock %}

views/templates/layouts/welcome.html.twig

@@ -5,7 +5,7 @@
 {% block page_class %}welcome-page{% endblock %}
 
 {% block title %}
-  <h1>Welcome to PrestaShop Update Assistant</h1>
+  <h1>{{ 'Welcome to PrestaShop Update Assistant'|trans({}) }}</h1>
 {% endblock %}
 
 {% block content %}
@@ -30,6 +30,6 @@
 
 {% block buttons_inner %}
   <button class="btn btn-lg btn-primary" type="button">
-    Get Started
+    {{ 'Get Started'|trans({}) }}
   </button>
 {% endblock %}