Onboarding service now bound to tier service (vs. hardcoded)

Author: tobuck-aws

client/web/src/onboarding/OnboardingCreateContainer.js

@@ -33,6 +33,7 @@ import {
   selectPlanError,
 } from '../billing/ducks'
 import { saveToPresignedBucket } from '../settings/ducks'
+import { selectAllTiers } from '../tier/ducks'
 export default function OnboardingCreateContainer(props) {
   const dispatch = useDispatch()
   const history = useHistory()
@@ -45,6 +46,7 @@ export default function OnboardingCreateContainer(props) {
 
   const loadingPlans = useSelector(selectPlanLoading)
   const errorPlans = useSelector(selectPlanError)
+  const tiers = useSelector(selectAllTiers)
   const plans = useSelector(selectAllPlans)
 
   const [file, setFile] = useState({})
@@ -106,14 +108,15 @@ export default function OnboardingCreateContainer(props) {
 
   return (
     <OnboardingFormComponent
-      loading={loading}
-      error={error}
-      errorName={errorName}
+      billingPlans={plans}
       cancel={cancel}
-      submit={submitOnboardingRequestForm}
       config={config}
-      billingPlans={plans}
+      error={error}
+      errorName={errorName}
+      loading={loading}
       onFileSelected={handleFileSelected}
+      submit={submitOnboardingRequestForm}
+      tiers={tiers}
     />
   )
 }

client/web/src/onboarding/OnboardingFormComponent.js

@@ -60,20 +60,43 @@ OnboardingFormComponent.propTypes = {
 }
 
 export default function OnboardingFormComponent(props) {
-  const { error, errorName, submit, cancel, config, billingPlans } = props
+  const {
+    error,
+    errorName,
+    submit,
+    cancel,
+    config,
+    billingPlans,
+    tiers,
+  } = props
   const { domainName, tier, billing } = config
   const hasBilling = !!billing
   const hasDomain = !!domainName
 
   const initialValues = {
     name: '',
-    tier: tier || 'default ',
+    tier: tier || 'default',
     subdomain: '',
     billingPlan: '',
     hasBilling: hasBilling,
     hasDomain: hasDomain,
   }
 
+  const getTiers = (tiers) => {
+    const options = tiers.map((tier) => {
+      return (
+        <option value={tier.name} key={tier.id}>
+          {tier.description}
+        </option>
+      )
+    })
+    return (
+      <SaasBoostSelect type="select" name="tier" label="Select Tier">
+        {options}
+      </SaasBoostSelect>
+    )
+  }
+
   const getBillingUi = (plans, hasBilling) => {
     const options = plans.map((plan) => {
       return (
@@ -173,17 +196,7 @@ export default function OnboardingFormComponent(props) {
                       type="text"
                       maxLength={100}
                     />
-                    <SaasBoostSelect
-                      type="select"
-                      name="tier"
-                      label="Select Tier"
-                    >
-                      <option value="default">Default</option>
-                      <option value="S">Silver</option>
-                      <option value="G">Gold</option>
-                      <option value="P">Platinum</option>
-                      <option value="UB">Onobtainium</option>
-                    </SaasBoostSelect>
+                    {getTiers(tiers)}
                     {getDomainUi(domainName, hasDomain)}
                     {getBillingUi(billingPlans, hasBilling)}
                     <SaasBoostFileUpload