feat(console): Group to group app transfers

apps/console/app/components/AppBox/index.tsx

@@ -27,6 +27,7 @@ type AppBoxProps = {
   createLink: string
   onCreate: () => void
   navigate: (clientId: string) => void
+  transfer: (clientId: string) => void
 }
 
 export default function AppBox(props: AppBoxProps) {
@@ -50,6 +51,7 @@ export default function AppBox(props: AppBoxProps) {
         applications={mappedApps}
         onCreate={props.onCreate}
         navigate={props.navigate}
+        transfer={props.transfer}
       />
     </div>
   )

apps/console/app/components/Applications/ApplicationList.tsx

@@ -11,17 +11,22 @@ import type { ApplicationListItemProps } from './ApplicationListItem'
 import _ from 'lodash'
 import { DangerPill } from '@proofzero/design-system/src/atoms/pills/DangerPill'
 import { Link } from '@remix-run/react'
+import classNames from 'classnames'
 
 type ApplicationListProps = {
   applications: ApplicationListItemProps[]
   onCreate: () => void
   navigate: (clientId: string) => void
+  transfer: (clientId: string) => void
+  lite?: boolean
 }
 
 export const ApplicationList = ({
   applications,
   onCreate,
   navigate,
+  transfer,
+  lite = false,
 }: ApplicationListProps) => {
   const [actionApp, setActionApp] = useState<
     | {
@@ -47,31 +52,35 @@ export const ApplicationList = ({
 
   return (
     <div>
-      <section className="flex justify-between items-start">
-        <Text size="base" weight="semibold" className="text-gray-900">
-          Your Applications
-        </Text>
+      {!lite && (
+        <section className="flex justify-between items-start">
+          <Text size="base" weight="semibold" className="text-gray-900">
+            Your Applications
+          </Text>
 
-        <Button btnType="primary-alt" onClick={onCreate}>
-          Create Application
-        </Button>
-      </section>
+          <Button btnType="primary-alt" onClick={onCreate}>
+            Create Application
+          </Button>
+        </section>
+      )}
 
-      <section className="flex space-x-4 my-4">
-        <div className="flex space-x-2 items-center">
-          <ApplicationListItemPublishedState published={true} />
-          <Text size="xs" weight="normal" className="text-gray-500">
-            Published
-          </Text>
-        </div>
+      {!lite && (
+        <section className="flex space-x-4 my-4">
+          <div className="flex space-x-2 items-center">
+            <ApplicationListItemPublishedState published={true} />
+            <Text size="xs" weight="normal" className="text-gray-500">
+              Published
+            </Text>
+          </div>
 
-        <div className="flex space-x-2 items-center">
-          <ApplicationListItemPublishedState published={false} />
-          <Text size="xs" weight="normal" className="text-gray-500">
-            Unpublished
-          </Text>
-        </div>
-      </section>
+          <div className="flex space-x-2 items-center">
+            <ApplicationListItemPublishedState published={false} />
+            <Text size="xs" weight="normal" className="text-gray-500">
+              Unpublished
+            </Text>
+          </div>
+        </section>
+      )}
 
       <section className="flex flex-col">
         {actionApp && (
@@ -91,6 +100,7 @@ export const ApplicationList = ({
             <ApplicationListItem
               key={ali.id}
               navigate={navigate}
+              transfer={transfer}
               {...ali}
               onDeleteApplication={(clientId, appName, hasCustomDomain) => {
                 setActionApp({
@@ -105,23 +115,31 @@ export const ApplicationList = ({
         </div>
 
         {Object.entries(groupedApplications).map(([groupID, entry]) => (
-          <section key={groupID} className="flex flex-col space-y-2 mt-5">
-            <div className="flex mb-2 flex-row space-x-2 items-center">
-              <Text size="sm" weight="medium" className="text-gray-500">
-                {entry.groupName}
-              </Text>
+          <section
+            key={groupID}
+            className={classNames('flex flex-col space-y-2', {
+              'mt-5': !lite,
+            })}
+          >
+            {!lite && (
+              <div className="flex mb-2 flex-row space-x-2 items-center">
+                <Text size="sm" weight="medium" className="text-gray-500">
+                  {entry.groupName}
+                </Text>
 
-              {entry.groupPaymentFailed && (
-                <Link to={`/billing/groups/${groupID}`}>
-                  <DangerPill text="Update Payment Information" />
-                </Link>
-              )}
-            </div>
+                {entry.groupPaymentFailed && (
+                  <Link to={`/billing/groups/${groupID}`}>
+                    <DangerPill text="Update Payment Information" />
+                  </Link>
+                )}
+              </div>
+            )}
 
             {entry.apps.map((ali) => (
               <ApplicationListItem
                 key={ali.id}
                 navigate={navigate}
+                transfer={transfer}
                 {...ali}
                 onDeleteApplication={(clientId, appName, hasCustomDomain) => {
                   setActionApp({

apps/console/app/components/Applications/ApplicationListItem.tsx

@@ -5,6 +5,7 @@ import { ServicePlanType } from '@proofzero/types/billing'
 import { Fragment } from 'react'
 import { HiDotsVertical, HiOutlineCog } from 'react-icons/hi'
 import { HiOutlineTrash } from 'react-icons/hi2'
+import { TbArrowsTransferUp } from 'react-icons/tb'
 
 type ApplicationListItemPublishedStateProps = {
   published?: boolean
@@ -27,7 +28,7 @@ export const ApplicationListItemIcon = ({
   title,
   iconUrl,
 }: ApplicationListItemIconProps) => (
-  <div className="rounded-l w-16 h-14 flex justify-center items-center bg-gray-200 overflow-hidden">
+  <div className="rounded-l w-16 h-16 flex justify-center items-center bg-gray-200 overflow-hidden">
     {!iconUrl && (
       <Text className="text-gray-500">{title?.substring(0, 1)}</Text>
     )}
@@ -47,6 +48,7 @@ export type ApplicationListItemProps = {
   groupID?: string
   groupPaymentFailed?: boolean
   navigate?: (clientId: string) => void
+  transfer?: (clientId: string) => void
   onDeleteApplication?: (
     clientId: string,
     appName: string,
@@ -62,6 +64,7 @@ export const ApplicationListItem = ({
   hasCustomDomain,
   onDeleteApplication,
   navigate,
+  transfer,
   appPlan,
 }: ApplicationListItemProps) => (
   <article className="flex justify-center items-center border border-gray-200 shadow-sm rounded bg-white">
@@ -140,6 +143,26 @@ export const ApplicationListItem = ({
               </div>
             </div>
 
+            <div className="p-1 ">
+              <div
+                onClick={() => {
+                  if (transfer) transfer(id)
+                }}
+                className="cursor-pointer"
+              >
+                <Menu.Item
+                  as="div"
+                  className="py-2 px-4 flex items-center space-x-3 cursor-pointer
+                  hover:rounded-[6px] hover:bg-gray-100"
+                >
+                  <TbArrowsTransferUp className="text-xl font-normal text-gray-400" />
+                  <Text size="sm" weight="normal" className="text-gray-700">
+                    Transfer Application
+                  </Text>
+                </Menu.Item>
+              </div>
+            </div>
+
             <div className="p-1">
               <Menu.Item
                 as="div"

apps/console/app/routes/__layout/dashboard.tsx

@@ -74,6 +74,9 @@ export default () => {
               navigate('/apps/new')
             }}
             navigate={(clientId: string) => navigate(`/apps/${clientId}`)}
+            transfer={(clientId: string) =>
+              navigate(`/apps/${clientId}/transfer`)
+            }
             apps={apps.map((app) => ({
               ...app,
               groupPaymentFailed: Boolean(

apps/console/app/routes/__layout/groups/$groupID/index.tsx

@@ -47,8 +47,6 @@ import {
 } from '@proofzero/design-system/src/atoms/toast'
 import { IdentityURN } from '@proofzero/urns/identity'
 import dangerVector from '~/images/danger.svg'
-import { ApplicationListItemPublishedState } from '~/components/Applications/ApplicationListItem'
-import { ServicePlanType } from '@proofzero/types/billing'
 import { GroupDetailsContextData } from '../$groupID'
 import { PurchaseGroupSeatingModal } from '~/components/Billing/seating'
 import {
@@ -63,6 +61,7 @@ import { IDENTITY_GROUP_OPTIONS } from '@proofzero/platform/identity/src/constan
 import { ToastWithLink } from '@proofzero/design-system/src/atoms/toast/ToastWithLink'
 import { IdentityGroupURNSpace } from '@proofzero/urns/identity-group'
 import { HiOutlineExclamationTriangle } from 'react-icons/hi2'
+import { ApplicationList } from '~/components/Applications/ApplicationList'
 
 const accountTypes = [
   ...Object.values(EmailAccountType),
@@ -729,65 +728,20 @@ export default () => {
             )}
 
             <section className="flex flex-col gap-3">
-              {groupApps.map((app) => (
-                <article className="flex justify-center items-center border border-gray-200 shadow-sm rounded bg-white">
-                  <section>
-                    <div className="rounded-l w-16 h-[3.75rem] flex justify-center items-center bg-gray-200 overflow-hidden">
-                      {!app.icon && (
-                        <Text className="text-gray-500">
-                          {app.name?.substring(0, 1)}
-                        </Text>
-                      )}
-                      {app.icon && (
-                        <img
-                          src={app.icon}
-                          alt="Not Found"
-                          className="object-cover"
-                        />
-                      )}
-                    </div>
-                  </section>
-
-                  <section className="px-4 flex-1">
-                    <div className="flex flex-row space-x-2 items-center">
-                      <Text size="sm" weight="medium" className="text-gray-900">
-                        <div
-                          onClick={() => {
-                            navigate(`/apps/${app.clientId}`)
-                          }}
-                          className="hover:underline cursor-pointer"
-                        >
-                          {app.name}
-                        </div>
-                      </Text>
-                      <ApplicationListItemPublishedState
-                        published={app.published}
-                      />
-                      <Pill className="border rounded-3xl py-none">
-                        <Text size="xs">{group.name}</Text>
-                      </Pill>
-                      {app.appPlan !== ServicePlanType.FREE ? (
-                        <Pill className="border rounded-3xl py-none">
-                          <Text size="xs">{app.appPlan}</Text>
-                        </Pill>
-                      ) : null}
-                    </div>
-
-                    {hydrated && app.createdTimestamp && (
-                      <Text size="xs" weight="normal" className="shrink-0">
-                        {new Date(app.createdTimestamp).toLocaleString(
-                          'default',
-                          {
-                            day: '2-digit',
-                            month: 'short',
-                            year: 'numeric',
-                          }
-                        )}
-                      </Text>
-                    )}
-                  </section>
-                </article>
-              ))}
+              <ApplicationList
+                applications={groupApps.map((ga) => ({
+                  ...ga,
+                  id: ga.clientId,
+                }))}
+                onCreate={() => {
+                  navigate(`/groups/${groupID}/apps/new`)
+                }}
+                navigate={(clientId: string) => navigate(`/apps/${clientId}`)}
+                transfer={(clientId: string) =>
+                  navigate(`/apps/${clientId}/transfer`)
+                }
+                lite={true}
+              />
             </section>
           </div>
 

apps/console/app/routes/api/group-app-transfer-info.tsx

@@ -0,0 +1,56 @@
+import { type ActionFunction, json } from '@remix-run/cloudflare'
+import { requireJWT } from '~/utilities/session.server'
+import { getRollupReqFunctionErrorWrapper } from '@proofzero/utils/errors'
+import { generateTraceContextHeaders } from '@proofzero/platform-middleware/trace'
+import createCoreClient from '@proofzero/platform-clients/core'
+import { getAuthzHeaderConditionallyFromToken } from '@proofzero/utils'
+import { BadRequestError } from '@proofzero/errors'
+import { IdentityRefURN } from '@proofzero/urns/identity-ref'
+import { getEmailDropdownItems } from '@proofzero/utils/getNormalisedConnectedAccounts'
+import { DropdownSelectListItem } from '@proofzero/design-system/src/atoms/dropdown/DropdownSelectList'
+import { GetEntitlementsOutput } from '@proofzero/platform/billing/src/jsonrpc/methods/getEntitlements'
+
+export type GroupAppTransferInfo = {
+  connectedEmails: DropdownSelectListItem[]
+  hasPaymentMethod: boolean
+  entitlements: GetEntitlementsOutput
+}
+
+export const action: ActionFunction = getRollupReqFunctionErrorWrapper(
+  async ({ request, context }) => {
+    const jwt = await requireJWT(request, context.env)
+    const traceHeader = generateTraceContextHeaders(context.traceSpan)
+    const coreClient = createCoreClient(context.env.Core, {
+      ...getAuthzHeaderConditionallyFromToken(jwt),
+      ...traceHeader,
+    })
+
+    const fd = await request.formData()
+    const URN = fd.get('URN') as IdentityRefURN | null
+    if (!URN) {
+      throw new BadRequestError({
+        message: 'URN is required',
+      })
+    }
+
+    const [spd, entitlements, connectedAccounts] = await Promise.all([
+      await coreClient.billing.getStripePaymentData.query({
+        URN,
+      }),
+      await coreClient.billing.getEntitlements.query({
+        URN,
+      }),
+      await coreClient.identity.getAccounts.query({
+        URN,
+      }),
+    ])
+
+    const connectedEmails = getEmailDropdownItems(connectedAccounts)
+
+    return json<GroupAppTransferInfo>({
+      connectedEmails,
+      hasPaymentMethod: spd && spd.paymentMethodID ? true : false,
+      entitlements,
+    })
+  }
+)