feat: add counter UI for petition form

components/PetitionPage.vue

@@ -46,7 +46,7 @@ useSeoMeta({
           <n-space vertical>
             <n-image :src="petition?.image?.url" class="hidden sm:block" />
             <Nh1>{{ petition?.title }}</Nh1>
-            <PetitionSignatureCounter :signatures="signatures" />
+            <PetitionSignatureCounter :signatures="signatures" class="sm:hidden" />
             <PetitionForm
               class="block sm:hidden mb-8"
               :endpoint="(petition?.actionNetworkPetitionId || '') + '/signatures'"
@@ -65,8 +65,9 @@ useSeoMeta({
           </n-space>
         </n-space>
         <div class="hidden sm:flex">
-          <n-space class="max-w-xs border-0 sm:border shadow-none sm:shadow-md rounded p-4">
-            <PetitionSignatureCounter :signatures="signatures" />
+          <div class="max-w-xs w-full border-0 sm:border shadow-none sm:shadow-md rounded p-4">
+            <PetitionSignatureCounter :signatures="signatures" class="w-full" />
+            <Nh2>{{ $t("petition_form.sign_petition") }}</Nh2>
             <PetitionForm
               :endpoint="(petition?.actionNetworkPetitionId || '') + '/signatures'"
               :pc-endpoint="(petition?.petitionCampaign?.petitionEndpointURL || '') + '/signatures'"
@@ -79,7 +80,7 @@ useSeoMeta({
               :custom-fields="petition?.customFields"
               @success="() => success = true"
             />
-          </n-space>
+          </div>
         </div>
       </div>
       <div v-else class="rounded shadow-md p-4 ">

components/PetitionSignatureCounter.vue

@@ -10,15 +10,43 @@ const props = defineProps({
   signatures: {
     type: Object as PropType<Signatures>,
     required: true
+  },
+  class: {
+    type: String,
+    required: false,
+    default: undefined
   }
 })
-const count = ref(12323)
+const styleClass = props.class
+const count = ref(props.signatures?.count || 0)
 const target = computed(() => useGetNextTarget(count.value))
+const percent = computed(() => 100 * count.value / target.value)
 </script>
 
 <template>
-  <div>
-    <div>{{ count }} : {{ target }}</div>
-    <div><n-input-number v-model:value="count" /></div>
+  <div :class="styleClass">
+    <div class="flex flex-col justify-center">
+      <n-progress
+        type="line"
+        :percentage="percent"
+        :border-radius="4"
+        :fill-border-radius="0"
+        :show-indicator="false"
+      />
+    </div>
+    <div class="flex justify-between">
+      <div class="p-2 flex flex-col justify-center content-center text-left">
+        <span class="text-xl">
+          {{ $n(count, 'decimalInt') }}
+        </span>
+        <span>{{ $t("petition_form.signatures") }}</span>
+      </div>
+      <div class="p-2 flex flex-col justify-center content-center text-right">
+        <span class="text-xl">
+          {{ $n(target, 'decimalInt') }}
+        </span>
+        <span>{{ $t("petition_form.next_target") }}</span>
+      </div>
+    </div>
   </div>
 </template>

composables/useGetNextTarget.ts

@@ -1,31 +1,8 @@
-// const targets = [
-//   10,
-//   50,
-//   100,
-//   200,
-//   300,
-//   500,
-//   800,
-//   1000,
-//   1500,
-//   2000,
-//   3500,
-//   4000,
-//   5000,
-//   7000,
-//   10000,
-//   13000,
-//   15000,
-//   20000,
-//   35000,
-//   40000
-// ]
-
 export const useGetNextTarget = (count: number) => {
-  // let startCount = count
-  let mag = Math.floor(Math.log10(count))
-  if (count === 10 ** mag) {
-    mag += 1
+  if (count < 10) {
+    return 10
   }
-  return Math.ceil(count / 10 ** mag) * 10 ** mag
+  const target = count / 0.8
+  const mag = Math.floor(Math.log10(count))
+  return Math.ceil(target / 10 ** mag) * 10 ** mag
 }

i18n.config.ts

@@ -5,5 +5,21 @@ export default defineI18nConfig(() => ({
   locale: 'en',
   messages: {
     en
+  },
+  numberFormats: {
+    en: {
+      currency: {
+        style: 'currency', currency: 'GBP', notation: 'standard'
+      },
+      decimal: {
+        style: 'decimal', minimumFractionDigits: 2, maximumFractionDigits: 2
+      },
+      percent: {
+        style: 'percent', useGrouping: false
+      },
+      decimalInt: {
+        style: 'decimal', minimumFractionDigits: 0, maximumFractionDigits: 0
+      }
+    }
   }
 }))

locales/en-GB.json

@@ -139,7 +139,10 @@
     "share": "Now, can you share this petition to 3 other people?",
     "opt_in_yes": "Yes! Tell me if this petition wins, and how I can help with the campaign",
     "opt_in_no": "No. I don’t want to hear about this petition’s progress or the rest of the campaign.",
-    "opt_in_required": "Please select an option"
+    "opt_in_required": "Please select an option",
+    "signatures": "Signatures",
+    "next_target": "Next Target",
+    "sign_petition": "Sign this petition"
   },
   "creds": {
     "register": "Register",