UI for age assurance compliance (#8652)

* Add geo prop

* Add prelim fetch

* Add geo debug

* Pass in assurance state to notifications registration

* Comments

* Bump git index

* Add some component utils, no design, gate chat

* Disable mod prefs buttons, does not yet edit mod prefs

* Add initial prompt component

* Refine logic for showing prompt

* Add send email dialog

* Hook up dialog to fake mutation

* Fix geo debug bug

* Move provider inside query provider

* Slightly better screen gater

* Ok decent fallback with isExempt

* Reorg

* Wrap prompt in new logic

* Override mod prefs

* Use real endpoints, optimistic state

* Add persistent card, add time-ago, warning to dialog

* Add comment

* No undefined query values

* Fix case in import

* Wait for AA to load before registering push

* Override prefs in all locations

* Small refactor of notifications registration

* Register push after aa state

* Add retries

* Update blocked screens UI

* Strengthen email validation

* Add intent dialog

* Do service auth for init

* Rug refreshJwt

* Update copy

* Some mobile styles, add dev mode option

* Fix links on native

* Clean up intent dialog on native

* Don't mutate existing session, only copy

* Handle email validation error from server

* Clarity is better

* Moar clear

* Fixes

* Tweaks

* Add country code

* Gate it

* Refresh state after redirect

* Re-check on window focus

* Remove todo

* Enable in dev

* Check for did match on redirect

* Add blocked state

* Add appeal dialog

* Copy tweaks

* Inset in blue well

* Nux the prompt

* Copy updates

* Refetch just in case

* Uppercase country code

* Align copy, add notice to chat screens

* Tweak copy

* Add test code

* Add debug code

* Refactor AccountCard

* Big refactor

* Delay post-feed queries instead

* Debug code

* Clean up state

* Reorg

* Clean up copy

* Comments

* Reorg

* UPdate URL

* Cleanup

* Remove todo

* Update debug code

* revert unneeded changes

* UPdate nux name

* Revert unneeded change

* Updaet storage schema

* Checkpoint: cleanup

* Checkpoint: almost there

* isLoaded -> isReady

* Rename useAgeAssurance

* isUnderage -> isDeclaredUnderage

* Decompose, add docblocks

* Refactor

* UPdate debug

* Apply suggestion from @surfdude29

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* Apply suggestion from @surfdude29

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* Apply suggestion from @surfdude29

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* Apply suggestion from @surfdude29

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* Apply suggestion from @surfdude29

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* Apply suggestion from @surfdude29

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* Drop including Bluesky

* Apply suggestion from @surfdude29

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* Apply suggestion from @surfdude29

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* Remove todo

* Gate debug

* Revert unneeded change

* Fail closed

* Comments

* Comment

* Comment

* fix prettier

* rm viewheader

* bump sdk

* prevent overlap in admonition

* add age assurance intent route

* Just meow

Co-authored-by: Samuel Newman <mozzius@protonmail.com>

* Nix callback

* Fix spelling of dismissible lol

* Don't compare translated string

* Better KWS link labels

* Hide DMs send options in menu

* Add button

* Fix order

* Use only supported languages

* Rm button

* best-effort language mapping

* improve typing

---------

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>
Co-authored-by: Samuel Newman <mozzius@protonmail.com>

1 files changed, 140 insertions, 0 deletions

diff --git a/src/components/ageAssurance/AgeAssuranceAppealDialog.tsx b/src/components/ageAssurance/AgeAssuranceAppealDialog.tsx
new file mode 100644
index 000000000..166f6c26d
--- /dev/null
+++ b/src/components/ageAssurance/AgeAssuranceAppealDialog.tsx
@@ -0,0 +1,140 @@
+import React from 'react'
+import {View} from 'react-native'
+import {BSKY_LABELER_DID, ComAtprotoModerationDefs} from '@atproto/api'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {useMutation} from '@tanstack/react-query'
+
+import {logger} from '#/logger'
+import {useAgent, useSession} from '#/state/session'
+import * as Toast from '#/view/com/util/Toast'
+import {atoms as a, useBreakpoints, web} from '#/alf'
+import {AgeAssuranceBadge} from '#/components/ageAssurance/AgeAssuranceBadge'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import * as Dialog from '#/components/Dialog'
+import {Loader} from '#/components/Loader'
+import {Text} from '#/components/Typography'
+
+export function AgeAssuranceAppealDialog({
+  control,
+}: {
+  control: Dialog.DialogControlProps
+}) {
+  const {_} = useLingui()
+  return (
+    <Dialog.Outer control={control}>
+      <Dialog.Handle />
+      <Dialog.ScrollableInner
+        label={_(msg`Contact our moderation team`)}
+        style={[web({maxWidth: 400})]}>
+        <Inner control={control} />
+        <Dialog.Close />
+      </Dialog.ScrollableInner>
+    </Dialog.Outer>
+  )
+}
+
+function Inner({control}: {control: Dialog.DialogControlProps}) {
+  const {_} = useLingui()
+  const {currentAccount} = useSession()
+  const {gtPhone} = useBreakpoints()
+  const agent = useAgent()
+
+  const [details, setDetails] = React.useState('')
+  const isInvalid = details.length > 1000
+
+  const {mutate, isPending} = useMutation({
+    mutationFn: async () => {
+      await agent.createModerationReport(
+        {
+          reasonType: ComAtprotoModerationDefs.REASONAPPEAL,
+          subject: {
+            $type: 'com.atproto.admin.defs#repoRef',
+            did: currentAccount?.did,
+          },
+          reason: `AGE_ASSURANCE_INQUIRY: ` + details,
+        },
+        {
+          encoding: 'application/json',
+          headers: {
+            'atproto-proxy': `${BSKY_LABELER_DID}#atproto_labeler`,
+          },
+        },
+      )
+    },
+    onError: err => {
+      logger.error('AgeAssuranceAppealDialog failed', {safeMessage: err})
+      Toast.show(
+        _(msg`Age assurance inquiry failed to send, please try again.`),
+        'xmark',
+      )
+    },
+    onSuccess: () => {
+      control.close()
+      Toast.show(
+        _(
+          msg({
+            message: 'Age assurance inquiry was submitted',
+            context: 'toast',
+          }),
+        ),
+      )
+    },
+  })
+
+  return (
+    <View>
+      <View style={[a.align_start]}>
+        <AgeAssuranceBadge />
+      </View>
+
+      <Text style={[a.text_2xl, a.font_heavy, a.pt_md, a.leading_tight]}>
+        <Trans>Contact us</Trans>
+      </Text>
+
+      <Text style={[a.text_sm, a.pt_sm, a.leading_snug]}>
+        <Trans>
+          Please provide any additional details you feel moderators may need in
+          order to properly assess your Age Assurance status.
+        </Trans>
+      </Text>
+
+      <View style={[a.pt_md]}>
+        <Dialog.Input
+          multiline
+          isInvalid={isInvalid}
+          value={details}
+          onChangeText={details => {
+            setDetails(details)
+          }}
+          label={_(msg`Additional details (limit 1000 characters)`)}
+          numberOfLines={4}
+          onSubmitEditing={() => mutate()}
+        />
+        <View style={[a.pt_md, a.gap_sm, gtPhone && [a.flex_row_reverse]]}>
+          <Button
+            label={_(msg`Submit`)}
+            size="small"
+            variant="solid"
+            color="primary"
+            onPress={() => mutate()}>
+            <ButtonText>
+              <Trans>Submit</Trans>
+            </ButtonText>
+            {isPending && <ButtonIcon icon={Loader} position="right" />}
+          </Button>
+          <Button
+            label={_(msg`Cancel`)}
+            size="small"
+            variant="solid"
+            color="secondary"
+            onPress={() => control.close()}>
+            <ButtonText>
+              <Trans>Cancel</Trans>
+            </ButtonText>
+          </Button>
+        </View>
+      </View>
+    </View>
+  )
+}