Improves how user data is displayed when previewing campaign (#597)

apps/ui/src/ui/utils.tsx

@@ -1,5 +1,6 @@
 import { Key, useState } from 'react'
 import { Modifier, usePopper } from 'react-popper'
+import { User } from '../types'
 
 const modifiers: Array<Partial<Modifier<any, any>>> = [
     {
@@ -61,3 +62,25 @@ export const highlightSearch = (
 ) => (text && search)
     ? text.replaceAll(search, `<strong class="${matchClassName}">$&</strong>`)
     : (text ?? '')
+
+export const flattenUser = ({ email, phone, id, external_id, timezone, locale, created_at, devices, data }: User) => orderKeys({
+    ...data,
+    email,
+    phone,
+    id,
+    external_id,
+    created_at,
+    locale,
+    timezone,
+    devices,
+})
+
+export const orderKeys = (unorderedObj: Record<string, any>) => {
+    return Object.keys(unorderedObj).sort().reduce(
+        (obj: Record<string, any>, key) => {
+            obj[key] = unorderedObj[key]
+            return obj
+        },
+        {},
+    )
+}

apps/ui/src/views/campaign/CampaignPreview.tsx

@@ -18,6 +18,7 @@ import { ChannelType, TemplateProofParams, User } from '../../types'
 import FormWrapper from '../../ui/form/FormWrapper'
 import SourceEditor from '../../ui/SourceEditor'
 import { useTranslation } from 'react-i18next'
+import { flattenUser } from '../../ui/utils'
 
 interface UserLookupProps extends Omit<ModalProps, 'title'> {
     onSelected: (user: User) => void
@@ -190,7 +191,7 @@ export default function CampaignPreview() {
                 onClose={setIsUserLookupOpen}
                 onSelected={user => {
                     setValue(JSON.stringify({
-                        user,
+                        user: flattenUser(user),
                         event: {},
                     }, undefined, 4))
                 }} />

apps/ui/src/views/users/UserDetailAttrs.tsx

@@ -3,15 +3,16 @@ import { UserContext } from '../../contexts'
 import Heading from '../../ui/Heading'
 import JsonPreview from '../../ui/JsonPreview'
 import { useTranslation } from 'react-i18next'
+import { flattenUser } from '../../ui/utils'
 
 export default function UserDetail() {
     const { t } = useTranslation()
-    const [{ external_id, email, phone, timezone, locale, created_at, devices, data }] = useContext(UserContext)
+    const [user] = useContext(UserContext)
 
     return <>
         <Heading size="h3" title={t('details')} />
         <section className="container">
-            <JsonPreview value={{ external_id, email, phone, timezone, locale, devices, created_at, ...data }} />
+            <JsonPreview value={flattenUser(user)} />
         </section>
     </>
 }