From 3b61f3a45dc675684bb8b2d540f2ea84441b0487 Mon Sep 17 00:00:00 2001
From: Perside Rosalie <perside.rosalie@wikimedia.de>
Date: Fri, 6 Mar 2026 17:59:52 +0100
Subject: [PATCH 1/2] UI: Refactor Create Wizard Cards in Platform UI and Add
 Step 4

Bug: T419207
---
 ...o.vue => AudienceAndPurposeWizardStep.vue} |   0
 src/components/Cards/CreateWiki.vue           |  29 +++-
 ...ue => SiteDetailsCreateWikiWizardStep.vue} |   0
 .../Cards/TemporalityCreateWikiWizardStep.vue | 135 ++++++++++++++++++
 ...e => TemporalityProfileEditWizardStep.vue} |   3 +-
 .../Pages/ManageWiki/Cards/Profile.vue        |   8 +-
 6 files changed, 162 insertions(+), 13 deletions(-)
 rename src/components/Cards/{CreateWikiWizardStepTwo.vue => AudienceAndPurposeWizardStep.vue} (100%)
 rename src/components/Cards/{CreateWikiWizardStepOne.vue => SiteDetailsCreateWikiWizardStep.vue} (100%)
 create mode 100644 src/components/Cards/TemporalityCreateWikiWizardStep.vue
 rename src/components/Cards/{CreateWikiWizardStepThree.vue => TemporalityProfileEditWizardStep.vue} (98%)

diff --git a/src/components/Cards/CreateWikiWizardStepTwo.vue b/src/components/Cards/AudienceAndPurposeWizardStep.vue
similarity index 100%
rename from src/components/Cards/CreateWikiWizardStepTwo.vue
rename to src/components/Cards/AudienceAndPurposeWizardStep.vue
diff --git a/src/components/Cards/CreateWiki.vue b/src/components/Cards/CreateWiki.vue
index e5cc4e45..2c6aff35 100644
--- a/src/components/Cards/CreateWiki.vue
+++ b/src/components/Cards/CreateWiki.vue
@@ -28,26 +28,37 @@
       :inFlight="inFlight"
       :error="error"
       :dismissable="false"
-      submitButtonText="Create Wiki"
       v-model="stepThree"
       @previous-step="goToStep(2)"
       @submit="createWiki"
     />
+    <step-four-card
+      v-show="step === 4"
+      :title="title"
+      :inFlight="inFlight"
+      :error="error"
+      :dismissable="false"
+      v-model="stepThree"
+      @previous-step="goToStep(3)"
+      @submit="createWiki"
+    />
   </v-form>
 </template>
 
 <script>
 import config from '~/config'
-import StepOneCard from './CreateWikiWizardStepOne.vue'
-import StepTwoCard from './CreateWikiWizardStepTwo.vue'
-import StepThreeCard from './CreateWikiWizardStepThree.vue'
+import SiteDetailsCreateWikiWizardStep from './SiteDetailsCreateWikiWizardStep.vue'
+import AudienceAndPurposeWizardStep from './AudienceAndPurposeWizardStep.vue'
+import TemporalityProfileEditWizardStep from './TemporalityProfileEditWizardStep.vue'
+import TemporalityCreateWikiWizardStep from "@/components/Cards/TemporalityCreateWikiWizardStep.vue";
 
 export default {
   name: 'CreateWiki',
   components: {
-    StepOneCard,
-    StepTwoCard,
-    StepThreeCard
+    StepOneCard: SiteDetailsCreateWikiWizardStep,
+    StepTwoCard: AudienceAndPurposeWizardStep,
+    StepThreeCard: TemporalityProfileEditWizardStep,
+    StepFourCard: TemporalityCreateWikiWizardStep
   },
   props: [
     'title',
@@ -77,6 +88,10 @@ export default {
         temporality: '',
         otherTemporality: ''
       },
+      stepFour: {
+        selectedOption: '',
+        freeTextResponse: ''
+      },
       hasError: false,
       error: [],
       inFlight: false,
diff --git a/src/components/Cards/CreateWikiWizardStepOne.vue b/src/components/Cards/SiteDetailsCreateWikiWizardStep.vue
similarity index 100%
rename from src/components/Cards/CreateWikiWizardStepOne.vue
rename to src/components/Cards/SiteDetailsCreateWikiWizardStep.vue
diff --git a/src/components/Cards/TemporalityCreateWikiWizardStep.vue b/src/components/Cards/TemporalityCreateWikiWizardStep.vue
new file mode 100644
index 00000000..98b88ce8
--- /dev/null
+++ b/src/components/Cards/TemporalityCreateWikiWizardStep.vue
@@ -0,0 +1,135 @@
+<template>
+  <v-card class="elevation-12">
+    <v-toolbar dark color="primary">
+      <v-toolbar-title>{{ title }}</v-toolbar-title>
+      <v-spacer></v-spacer>
+      <v-btn v-if="dismissable" icon @click="$emit('close-dialog')">
+        <v-icon>mdi-close</v-icon>
+      </v-btn>
+    </v-toolbar>
+
+    <v-card-text>
+      <v-form ref="inputForm" v-on:submit.prevent>
+        <h3>How long do you plan to use this Wikibase?</h3>
+
+        <v-radio-group
+          v-model="value.temporality"
+          :error-messages=error
+          :rules="[() => !!value.temporality || 'Please select an option.']"
+        >
+          <v-radio value="permanent" ref="test">
+            <template v-slot:label>
+              I would prefer to keep it on a permanent basis
+            </template>
+          </v-radio>
+          <v-radio value="temporary">
+            <template v-slot:label>
+              It is temporary/disposable. I will no longer need it after it served its purpose
+            </template>
+          </v-radio>
+
+          <v-radio value="other">
+            <template v-slot:label>
+              Other: <v-text-field
+              dense
+              counter="200"
+              class="pl-1 mt-n1 mb-n2"
+              v-model="value.otherTemporality"
+              :rules="
+              [
+                () => value.temporality !== 'other'
+                  || !! value.otherTemporality
+                  || 'Please provide a response.',
+
+                () => value.temporality !== 'other'
+                  || !! (value.otherTemporality && value.otherTemporality.length < 201)
+                  || 'Text must be 200 characters or less.'
+              ]"
+            ></v-text-field>
+            </template>
+          </v-radio>
+          <v-radio value="decide_later">
+            <template v-slot:label>
+              I will decide later
+            </template>
+          </v-radio>
+        </v-radio-group>
+        <h3 class="mt-6">Terms of Use</h3>
+        <div class="body-2">
+          Previously accepted
+          <v-tooltip top>
+            <template v-slot:activator="{ on }">
+              <a
+                target="_blank"
+                href="/terms-of-use"
+                @click.stop
+                v-on="on"
+              >
+                Terms of Use</a>
+            </template>
+            Opens in new window
+          </v-tooltip> still apply.
+        </div>
+      </v-form>
+    </v-card-text>
+    <v-card-actions>
+      <v-btn
+        type="button"
+        :disabled="inFlight"
+        @click="previousStep"
+      >
+        &lt; Previous
+      </v-btn>
+
+      <v-btn
+        type="button"
+        color="primary"
+        :disabled="inFlight"
+        @click="submitWholeForm"
+      >
+        Create Wiki
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script>
+export default {
+  name: 'StepFourCard',
+  props: {
+    title: String,
+    inFlight: Boolean,
+    value: Object,
+    error: Array,
+    dismissable: Boolean,
+  },
+  methods: {
+    previousStep () {
+      if (this.value.temporality !== 'other') {
+        this.value.otherTemporality = undefined
+      }
+
+      this.$emit('previous-step')
+    },
+    submitWholeForm () {
+      if (this.value.temporality !== 'other') {
+        this.value.otherTemporality = undefined
+      }
+
+      this.$refs.inputForm.validate()
+      if (this.$refs.inputForm.validate() === true) {
+        this.$emit('submit')
+      }
+    }
+  }
+
+}
+</script>
+
+<style lang="css" scoped>
+.v-card__actions {
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 8px;
+}
+</style>
diff --git a/src/components/Cards/CreateWikiWizardStepThree.vue b/src/components/Cards/TemporalityProfileEditWizardStep.vue
similarity index 98%
rename from src/components/Cards/CreateWikiWizardStepThree.vue
rename to src/components/Cards/TemporalityProfileEditWizardStep.vue
index 0c1874f0..0b5d0e7a 100644
--- a/src/components/Cards/CreateWikiWizardStepThree.vue
+++ b/src/components/Cards/TemporalityProfileEditWizardStep.vue
@@ -87,7 +87,7 @@
           :disabled="inFlight"
           @click="submitWholeForm"
         >
-          {{ submitButtonText }}
+          Create Wiki
         </v-btn>
       </v-card-actions>
     </v-card>
@@ -102,7 +102,6 @@ export default {
     value: Object,
     error: Array,
     dismissable: Boolean,
-    submitButtonText: String
   },
   methods: {
     previousStep () {
diff --git a/src/components/Pages/ManageWiki/Cards/Profile.vue b/src/components/Pages/ManageWiki/Cards/Profile.vue
index 5a384ea4..b7b5bda4 100644
--- a/src/components/Pages/ManageWiki/Cards/Profile.vue
+++ b/src/components/Pages/ManageWiki/Cards/Profile.vue
@@ -78,8 +78,8 @@
 
 <script>
 import Message from '../Features/Message.vue'
-import StepTwoCard from '~/components/Cards/CreateWikiWizardStepTwo'
-import StepThreeCard from '~/components/Cards/CreateWikiWizardStepThree'
+import AudienceAndPurposeWizardStep from '@/components/Cards/AudienceAndPurposeWizardStep.vue'
+import TemporalityProfileEditWizardStep from '@/components/Cards/TemporalityProfileEditWizardStep.vue'
 
 const providedResponses = {
   purpose: {
@@ -104,8 +104,8 @@ export default {
   name: 'Profile',
   components: {
     Message,
-    StepTwoCard,
-    StepThreeCard
+    StepTwoCard: AudienceAndPurposeWizardStep,
+    StepThreeCard: TemporalityProfileEditWizardStep
   },
   props: [
     'wikiId'

From 06278dc6282e6a1046a3425cffa55a5eab8de4ca Mon Sep 17 00:00:00 2001
From: Perside Rosalie <perside.rosalie@wikimedia.de>
Date: Fri, 6 Mar 2026 18:07:55 +0100
Subject: [PATCH 2/2] fix linting

---
 src/components/Cards/CreateWiki.vue                       | 2 +-
 src/components/Cards/TemporalityCreateWikiWizardStep.vue  | 2 +-
 src/components/Cards/TemporalityProfileEditWizardStep.vue | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Cards/CreateWiki.vue b/src/components/Cards/CreateWiki.vue
index 2c6aff35..8a051c09 100644
--- a/src/components/Cards/CreateWiki.vue
+++ b/src/components/Cards/CreateWiki.vue
@@ -50,7 +50,7 @@ import config from '~/config'
 import SiteDetailsCreateWikiWizardStep from './SiteDetailsCreateWikiWizardStep.vue'
 import AudienceAndPurposeWizardStep from './AudienceAndPurposeWizardStep.vue'
 import TemporalityProfileEditWizardStep from './TemporalityProfileEditWizardStep.vue'
-import TemporalityCreateWikiWizardStep from "@/components/Cards/TemporalityCreateWikiWizardStep.vue";
+import TemporalityCreateWikiWizardStep from '@/components/Cards/TemporalityCreateWikiWizardStep.vue'
 
 export default {
   name: 'CreateWiki',
diff --git a/src/components/Cards/TemporalityCreateWikiWizardStep.vue b/src/components/Cards/TemporalityCreateWikiWizardStep.vue
index 98b88ce8..42b988ed 100644
--- a/src/components/Cards/TemporalityCreateWikiWizardStep.vue
+++ b/src/components/Cards/TemporalityCreateWikiWizardStep.vue
@@ -101,7 +101,7 @@ export default {
     inFlight: Boolean,
     value: Object,
     error: Array,
-    dismissable: Boolean,
+    dismissable: Boolean
   },
   methods: {
     previousStep () {
diff --git a/src/components/Cards/TemporalityProfileEditWizardStep.vue b/src/components/Cards/TemporalityProfileEditWizardStep.vue
index 0b5d0e7a..19f199f1 100644
--- a/src/components/Cards/TemporalityProfileEditWizardStep.vue
+++ b/src/components/Cards/TemporalityProfileEditWizardStep.vue
@@ -101,7 +101,7 @@ export default {
     inFlight: Boolean,
     value: Object,
     error: Array,
-    dismissable: Boolean,
+    dismissable: Boolean
   },
   methods: {
     previousStep () {