Creates Privacy + ToS + Input Guide GDocs

frontend/components/GoogleDocPage.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+const router = useRouter()
+interface Props {
+  src: string
+}
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <StandardFullWidth>
+    <div
+      class="overflow-hidden w-screen h-screen flex justify-content-center"
+    >
+      <div class="relative">
+        <div class="absolute top-0 left-0 flex align-items-center py-2 pr-4 pl-3 gap-1 bg-primary">
+          <PVButton
+            icon="pi pi-arrow-left"
+            class="p-button-text text-white py-2 w-auto px-2"
+            @click="() => router.go(-1)"
+          />
+          <LinkButton
+            to="/"
+            class="p-button-text text-2xl text-white py-0 px-0"
+          >
+            PACTA Documents
+          </LinkButton>
+        </div>
+        <iframe
+          :src="props.src"
+          frameBorder="0"
+          style="width: calc(100vw + 144pt); height: calc(100vh); margin: 0 -72pt; max-width: calc(612pt + 140pt);"
+        />
+      </div>
+    </div>
+  </StandardFullWidth>
+</template>

frontend/components/standard/Footer.vue

@@ -2,6 +2,7 @@
 const { showStandardDebug } = useLocalStorage()
 const { fakeUsers: { fakeUsersVisible }, missingTranslations: { missingTranslationsVisible } } = useModal()
 const { t } = useI18n()
+const localePath = useLocalePath()
 
 const prefix = 'components/standard/Footer'
 const tt = (s: string) => t(`${prefix}.${s}`)
@@ -53,18 +54,18 @@ const tt = (s: string) => t(`${prefix}.${s}`)
         >
           {{ tt('File a Bug') }}
         </a>
-        <a
-          class="text-primary"
-          href="#"
-        >{{ tt('Terms of Use') }}</a>
-        <a
+        <NuxtLink
           class="text-primary"
-          href="#"
-        >{{ tt('Privacy') }} </a>
-        <a
+          :to="localePath('/tos')"
+        >
+          {{ tt('Terms of Use') }}
+        </NuxtLink>
+        <NuxtLink
           class="text-primary"
-          href="#"
-        >{{ tt('About') }}</a>
+          :to="localePath('/privacy')"
+        >
+          {{ tt('Privacy') }}
+        </NuxtLink>
       </div>
       <LocaleSelector />
     </div>

frontend/components/standard/Nav.vue

@@ -14,7 +14,7 @@ const { isAdmin, maybeMe } = await getMaybeMe()
 
 const prefix = 'components/standard/Nav'
 const tt = (s: string) => t(`${prefix}.${s}`)
-const menuHidden = useState<boolean>(`${prefix}.menuHidden`, () => false)
+const menuVisible = useState<boolean>(`${prefix}.menuVisible`, () => false)
 const userMenu = useState<{ toggle: (e: Event) => void } | null>(`${prefix}.userMenu`, () => null)
 const userMenuVisible = useState<boolean>(`${prefix}.userMenuVisible`, () => false)
 
@@ -26,11 +26,11 @@ const toggleUserMenu = (e: Event) => {
 
 const menuStyles = computed(() => {
   return {
-    transition: menuHidden.value ? 'max-height .1s ease' : 'max-height .5s ease',
+    transition: menuVisible.value ? 'max-height .5s ease' : 'max-height .1s ease',
     overflow: 'hidden',
-    'max-height': menuHidden.value ? '0px' : '100vh',
-    border: menuHidden.value ? undefined : '2px solid',
-    'margin-top': menuHidden.value ? '0' : '-2px',
+    'max-height': menuVisible.value ? '100vh' : '0px',
+    border: menuVisible.value ? '2px solid' : undefined,
+    'margin-top': menuVisible.value ? '-2px' : '0',
   }
 })
 
@@ -107,10 +107,10 @@ const userMenuItems = computed(() => {
           @click="toggleUserMenu"
         />
         <PVButton
-          :icon="menuHidden ? 'pi pi-bars' : 'pi pi-times'"
-          :class="menuHidden ? 'p-button-text' : 'border-bottom-noround p-button-primary'"
+          :icon="menuVisible ? 'pi pi-times' : 'pi pi-bars'"
+          :class="menuVisible ? 'border-bottom-noround p-button-primary': 'p-button-text'"
           class="sm:hidden p-button-lg h-3rem"
-          @click="() => menuHidden = !menuHidden"
+          @click="() => menuVisible = !menuVisible"
         />
       </div>
     </div>

frontend/lang/en.json

@@ -423,6 +423,7 @@
     "Discard Changes": "Discard Changes"
   },
   "pages/upload": {
+    "Input User Guide": "Input User Guide",
     "Add File(s)": "Add File(s)",
     "Add More File(s)": "Add More File(s)",
     "Cleaning Up": "Cleaning Up",

frontend/pages/index.vue

@@ -47,11 +47,12 @@ const tt = (s: string) => t(`pages/index.${s}`)
       <p>
         {{ tt('Section2Paragraph2') }}
         <LinkButton
-          :to="localePath('/input-user-guide')"
+          :to="localePath('/input-guide')"
           class="p-button-xs align-self-center py-0 ml-2 p-button-outlined"
           :label="tt('Input User Guide')"
           icon="pi pi-arrow-right"
           icon-pos="right"
+          new-tab
         />
       </p>
       <p>{{ tt('Section2Paragraph3') }}</p>

frontend/pages/input-guide.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts" />
+
+<template>
+  <GoogleDocPage
+    src="https://docs.google.com/document/d/e/2PACX-1vReve-30EqR_hOwRayIH7i8ivwbMQTQb2P96NxyXOMu6-sc1nQzqC9-9jmGSOAmperzQ9t56CubVj8J/pub?embedded=true"
+  />
+</template>

frontend/pages/privacy.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts" />
+
+<template>
+  <GoogleDocPage
+    src="https://docs.google.com/document/d/e/2PACX-1vQncQMbsXjBkS2ytx3kEs7JcK7HTLzQ6VXMVNN9PRAAoR1u3mNyEntSjQ1dEn6I6vfy6MeZ3WNE_-Sg/pub?embedded=true"
+  />
+</template>

frontend/pages/tos.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts" />
+
+<template>
+  <GoogleDocPage
+    src="https://docs.google.com/document/d/e/2PACX-1vRK8PnSPGGwUpY-GRn6sApXs63RBCdGUhWp_xJrP8E_LTj2YCOtMQMc5cWy0WHQsAlTYquakkdHpj7I/pub?embedded=true"
+  />
+</template>

frontend/pages/upload.vue

@@ -8,6 +8,7 @@ const { linkToPortfolioList } = useMyDataURLs()
 const pactaClient = usePACTA()
 const { $axios } = useNuxtApp()
 const { t } = useI18n()
+const localePath = useLocalePath()
 
 const prefix = 'pages/upload'
 const tt = (key: string) => t(`${prefix}.${key}`)
@@ -296,7 +297,13 @@ const cleanUpIncompleteUploads = async () => {
     <!-- TODO(#80) Finalize this copy -->
     <p>
       This is a page where you can upload portfolios to test out the PACTA platform.
-      This Copy will need work, and will need to link to the documentation.
+    </p>
+    <p>
+      Input files are expected to be structred as CSVs with an expected set of header rows.
+      To learn more, check out the <a
+        :href="localePath('/input-guide')"
+        target="_blank"
+      >{{ tt('Input User Guide') }}</a>, or download the <a href="/samples/sample-1.csv">sample CSV</a>.
     </p>
     <FormField
       label="Portfolio Files"
@@ -422,6 +429,7 @@ const cleanUpIncompleteUploads = async () => {
     </PVMessage>
     <PVButton
       v-if="!allDone"
+      class="my-0"
       :label="actionButtonLabel"
       :loading="isProcessing"
       :disabled="isProcessing || fileStatesWithDetail.length === 0"

frontend/public/.gitattributes

@@ -0,0 +1 @@
+sample/*.csv filter=lfs diff=lfs merge=lfs -text