Warn that new Wikis are temporary by default in the CreateWikiWizard

src/components/Cards/CreateWiki.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-form @submit="createWiki">
+  <v-form>
     <SiteDetailsCreateWikiWizardStep
       v-show="step === 1"
       :title="title"
@@ -22,24 +22,11 @@
       @next-step="goToStep(3)"
     />
 
-    <TemporalityCreateWikiWizardStep
+    <SubmitCreateWikiWizardStep
       v-show="step === 3"
       :title="title"
       :inFlight="inFlight"
-      :error="error"
-      v-model="stepThree"
       @previous-step="goToStep(2)"
-      @next-step="goToStep(4)"
-      @submit="createWiki"
-    />
-
-    <KnowledgeEquityCreateWikiWizardStep
-      v-show="step === 4"
-      v-model="stepFour"
-      :title="title"
-      :inFlight="inFlight"
-      :error="error"
-      @previous-step="goToStep(3)"
       @submit="createWiki"
     />
   </v-form>
@@ -49,16 +36,14 @@
 import config from '~/config'
 import SiteDetailsCreateWikiWizardStep from './SiteDetailsCreateWikiWizardStep.vue'
 import AudienceAndPurposeWizardStep from './AudienceAndPurposeWizardStep.vue'
-import TemporalityCreateWikiWizardStep from './TemporalityCreateWikiWizardStep.vue'
-import KnowledgeEquityCreateWikiWizardStep from './KnowledgeEquityCreateWikiWizardStep.vue'
+import SubmitCreateWikiWizardStep from './SubmitCreateWikiWizardStep.vue'
 
 export default {
   name: 'CreateWiki',
   components: {
     SiteDetailsCreateWikiWizardStep,
     AudienceAndPurposeWizardStep,
-    TemporalityCreateWikiWizardStep,
-    KnowledgeEquityCreateWikiWizardStep,
+    SubmitCreateWikiWizardStep,
   },
   props: [
     'title',
@@ -83,14 +68,6 @@ export default {
         audience: '',
         otherAudience: '',
       },
-      stepThree: {
-        temporality: '',
-        otherTemporality: '',
-      },
-      stepFour: {
-        selectedOption: '',
-        freeTextResponse: '',
-      },
       hasError: false,
       error: [],
       inFlight: false,
@@ -141,8 +118,9 @@ export default {
         ...(this.stepTwo.otherPurpose && { purpose_other: this.stepTwo.otherPurpose }),
         ...(this.stepTwo.audience && { audience: this.stepTwo.audience }),
         ...(this.stepTwo.otherAudience && { audience_other: this.stepTwo.otherAudience }),
-        temporality: this.stepThree.temporality,
-        ...(this.stepThree.otherTemporality && { temporality_other: this.stepThree.otherTemporality }),
+        // need to set this for now otherwise temporality defaults to 'permanent'
+        temporality: 'other',
+        temporality_other: 'T433687',
       }
 
       const requestBody = {
@@ -152,13 +130,6 @@ export default {
         profile: JSON.stringify(profileObject),
       }
 
-      if (this.stepThree.temporality === 'permanent' && this.stepFour.selectedOption) {
-        requestBody.knowledgeEquityResponse = {
-          selectedOption: this.stepFour.selectedOption,
-          freeTextResponse: this.stepFour.freeTextResponse,
-        }
-      }
-
       this.$api.createWiki(requestBody)
         .then(wikiDetails => this.createSuccess(wikiDetails))
         .catch(errors => this.createFail(errors))

src/components/Cards/SubmitCreateWikiWizardStep.vue

@@ -0,0 +1,110 @@
+<!-- This is the final step in the flow. It warns the user about the temporary nature of the Wiki and that the policies they have already accepted still apply -->
+
+<template>
+  <v-card class="elevation-12">
+    <v-toolbar dark color="primary">
+      <v-toolbar-title>{{ title }}</v-toolbar-title>
+    </v-toolbar>
+    <v-card-text>
+      <v-form ref="inputForm">
+        <div class="text-body-1">
+          This Wikibase will go offline on <span class="font-weight-bold d-inline-block">{{ suspensionDate }}</span>
+        </div>
+        <p class="text-body-2">unless it is submitted for review and approved.</p>
+
+        <v-alert text dense border="left" colored-border color="primary">
+          <p class="font-weight-bold">All Wikibases on our platform are temporary by default.</p>
+          <p>Once you're confident you want to keep this Wikibase longer, submit it for review.</p>
+          <p class="mb-0">
+            Some uses can't be approved for a longer stay - for example, primarily commercial or promotional projects,
+            or content under non-free licenses. To make sure your use case qualifies, check the
+            <a href="/hosting-policy">Hosting Policy</a> before you invest time in building anything.
+          </p>
+        </v-alert>
+
+        <RequiredCheckbox>I understand that this Wikibase will go offline on {{ suspensionDate }} unless it is submitted for review and approved to stay.</RequiredCheckbox>
+
+        <!-- TODO: should we refactor this out into a separate reusable component? -->
+        <div v-if="policiesError" class="body-2 red--text">
+          Failed to load policies. Please
+          <a class="text-decoration-underline red--text" @click.prevent="getCurrentPolicies()">click here</a>
+          to retry.
+        </div>
+        <v-skeleton-loader v-else type="image" :loading="policiesLoading" height="50px">
+          <div class="body-2">
+            Previously accepted <PolicyList :policies="policies" article="" /> still apply.
+          </div>
+        </v-skeleton-loader>
+      </v-form>
+    </v-card-text>
+    <v-card-actions>
+      <v-spacer />
+      <v-btn type="button" :disabled="inFlight" @click="$emit('previous-step')">
+        &lt; Previous
+      </v-btn>
+      <v-btn type="button" color="primary" :disabled="inFlight || policiesLoading || policiesError" @click="createWiki">
+        Create Wiki
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script>
+import PolicyList from '../Components/PolicyList'
+import RequiredCheckbox from '../Components/RequiredCheckbox'
+
+export default {
+  name: 'SubmitCreateWikiWizardStep',
+  components: {
+    RequiredCheckbox,
+    PolicyList,
+  },
+  props: {
+    title: String,
+    inFlight: Boolean,
+  },
+  computed: {
+    suspensionDate () {
+      const date = new Date()
+      // TODO: don't hard-code the temporary wiki duration of 91 days here
+      date.setDate(date.getDate() + 91)
+
+      return date.toLocaleDateString(
+        'en-GB',
+        { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' },
+      )
+    },
+  },
+  methods: {
+    createWiki () {
+      if (this.$refs.inputForm.validate() === true) {
+        this.$emit('submit')
+      }
+    },
+    async getCurrentPolicies () {
+      this.policiesLoading = true
+      this.policiesError = false
+
+      try {
+        // TODO: Should we get this from the store?
+        this.policies = await this.$api.getCurrentPolicies()
+      } catch (error) {
+        console.error(error)
+        this.policiesError = true
+      } finally {
+        this.policiesLoading = false
+      }
+    },
+  },
+  data () {
+    return {
+      policies: [],
+      policiesLoading: true,
+      policiesError: false,
+    }
+  },
+  created () {
+    this.getCurrentPolicies()
+  },
+}
+</script>