feat: refactor upgrade details to separate concerns between different…

… upgrade plan options (#2376)

src/pages/PlanPage/subRoutes/UpgradePlanPage/UpgradeDetails/ProPlanDetails/ProPlanDetails.jsx

@@ -0,0 +1,67 @@
+import { useParams } from 'react-router-dom'
+
+import {
+  useAccountDetails,
+  useAvailablePlans,
+  usePlanData,
+} from 'services/account'
+import BenefitList from 'shared/plan/BenefitList'
+import ScheduledPlanDetails from 'shared/plan/ScheduledPlanDetails'
+import { useProPlans } from 'shared/utils/billing'
+import { shouldRenderCancelLink } from 'shared/utils/upgradeForm'
+import A from 'ui/A'
+import Icon from 'ui/Icon'
+
+function ProPlanDetails() {
+  const { provider, owner } = useParams()
+  const { data: planData } = usePlanData({ provider, owner })
+  const { data: accountDetails } = useAccountDetails({ provider, owner })
+  const { data: plans } = useAvailablePlans({ provider, owner })
+  const { proPlanMonth, proPlanYear } = useProPlans({ plans })
+
+  const plan = accountDetails?.rootOrganization?.plan ?? accountDetails?.plan
+  const scheduledPhase = accountDetails?.scheduleDetail?.scheduledPhase
+
+  const cancelAtPeriodEnd =
+    accountDetails?.subscriptionDetail?.cancelAtPeriodEnd
+  const trialStatus = planData?.plan?.trialStatus
+
+  return (
+    <div className="h-fit border">
+      <h3 className="p-4 font-semibold">{proPlanYear?.marketingName} plan</h3>
+      <hr />
+      <div className="flex flex-col gap-4 p-4">
+        <BenefitList
+          iconName="check"
+          iconColor="text-ds-pink-quinary"
+          benefits={proPlanYear?.benefits}
+        />
+        <div>
+          <p className="text-xs font-semibold">
+            <span className="text-2xl">${proPlanYear?.baseUnitPrice}</span>
+            /per user, per month
+          </p>
+          <p className="text-xs text-ds-gray-quaternary">
+            billed annually or ${proPlanMonth?.baseUnitPrice} for monthly
+            billing
+          </p>
+        </div>
+        {scheduledPhase && (
+          <ScheduledPlanDetails scheduledPhase={scheduledPhase} />
+        )}
+        {shouldRenderCancelLink(cancelAtPeriodEnd, plan, trialStatus) && (
+          <A
+            to={{ pageName: 'cancelOrgPlan' }}
+            variant="black"
+            hook="cancel-plan"
+          >
+            Cancel
+            <Icon name="chevronRight" size="sm" variant="solid" />
+          </A>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default ProPlanDetails