Updated tier settings labels, hints and placeholders ENG-554 ENG-555 ENG-557 ENG-592 (#19580)

refs ENG-554 ENG-555 ENG-557 ENG-592

- Updated dropdown label copy 
- Updated tier name placeholder logic 
- Updated hint copy for free tier 
- Changed price placeholder values 
- Removed visibility hint when creating/editing tiers

apps/admin-x-settings/src/components/settings/membership/portal/SignupOptions.tsx

@@ -162,7 +162,7 @@ const SignupOptions: React.FC<{
                     <Select
                         options={defaultPlanOptions}
                         selectedOption={defaultPlanOptions.find(option => option.value === portalDefaultPlan)}
-                        title='Price preselected at signup'
+                        title='Default price at signup'
                         onSelect={(option) => {
                             updateSetting('portal_default_plan', option?.value ?? 'yearly');
                         }}

apps/admin-x-settings/src/components/settings/membership/tiers/TierDetailModal.tsx

@@ -3,7 +3,7 @@ import React, {useEffect, useRef} from 'react';
 import TierDetailPreview from './TierDetailPreview';
 import useFeatureFlag from '../../../../hooks/useFeatureFlag';
 import useSettingGroup from '../../../../hooks/useSettingGroup';
-import {Button, ButtonProps, ConfirmationModal, CurrencyField, Form, Heading, Hint, Icon, Modal, Select, SortableList, TextField, Toggle, URLTextField, showToast, useSortableIndexedList} from '@tryghost/admin-x-design-system';
+import {Button, ButtonProps, ConfirmationModal, CurrencyField, Form, Heading, Icon, Modal, Select, SortableList, TextField, Toggle, URLTextField, showToast, useSortableIndexedList} from '@tryghost/admin-x-design-system';
 import {ErrorMessages, useForm, useHandleError} from '@tryghost/admin-x-framework/hooks';
 import {RoutingModalProps, useRouting} from '@tryghost/admin-x-framework/routing';
 import {Tier, useAddTier, useBrowseTiers, useEditTier} from '@tryghost/admin-x-framework/api/tiers';
@@ -213,7 +213,7 @@ const TierDetailModalContent: React.FC<{tier?: Tier}> = ({tier}) => {
                         autoComplete='off'
                         error={Boolean(errors.name)}
                         hint={errors.name}
-                        placeholder='Bronze'
+                        placeholder={isFreeTier ? 'Free' : 'Bronze'}
                         title='Name'
                         value={formState.name || ''}
                         autoFocus
@@ -252,7 +252,7 @@ const TierDetailModalContent: React.FC<{tier?: Tier}> = ({tier}) => {
                                     <CurrencyField
                                         error={Boolean(errors.monthly_price)}
                                         hint={errors.monthly_price}
-                                        placeholder='1'
+                                        placeholder='5'
                                         rightPlaceholder={`${formState.currency}/month`}
                                         title='Monthly price'
                                         valueInCents={formState.monthly_price || ''}
@@ -263,7 +263,7 @@ const TierDetailModalContent: React.FC<{tier?: Tier}> = ({tier}) => {
                                     <CurrencyField
                                         error={Boolean(errors.yearly_price)}
                                         hint={errors.yearly_price}
-                                        placeholder='10'
+                                        placeholder='50'
                                         rightPlaceholder={`${formState.currency}/year`}
                                         title='Yearly price'
                                         valueInCents={formState.yearly_price || ''}
@@ -294,7 +294,7 @@ const TierDetailModalContent: React.FC<{tier?: Tier}> = ({tier}) => {
                     </>)}
                     <URLTextField
                         baseUrl={siteData?.url}
-                        hint='Redirect to this URL after signup for premium membership'
+                        hint={`Redirect to this URL after signup ${isFreeTier ? '' : ' for premium membership'}`}
                         placeholder={siteData?.url}
                         title='Welcome page'
                         value={formState.welcome_page_url || null}
@@ -352,16 +352,6 @@ const TierDetailModalContent: React.FC<{tier?: Tier}> = ({tier}) => {
             </div>
             <div className='sticky top-[96px] hidden shrink-0 basis-[380px] min-[920px]:!visible min-[920px]:!block'>
                 <TierDetailPreview isFreeTier={isFreeTier} tier={formState} />
-
-                {hasPortalImprovements &&
-                    <Form className=' mt-0' gap='none'>
-                        <Hint className=''>
-                            <p className='inline-block'>{(formState.visibility === 'public') ? 'Visible' : 'Not visible'} at signup. You can change this in {tier ? <Button className='text-xs font-normal' color='green' label='Portal settings' link onClick={() => {
-                                updateRoute('portal/edit');
-                            }}/> : <span className='font-semibold'>Portal settings</span>}.</p>
-                        </Hint>
-                    </Form>
-                }
             </div>
         </div>
     </Modal>;

apps/admin-x-settings/src/components/settings/membership/tiers/TierDetailPreview.tsx

@@ -98,7 +98,7 @@ const TierDetailPreview: React.FC<TierDetailPreviewProps> = ({tier, isFreeTier})
             <div className='rounded-sm border border-grey-200 bg-white dark:border-transparent'>
                 <div className="flex-column relative flex min-h-[200px] w-full max-w-[420px] scale-90 items-start justify-stretch rounded bg-white p-4">
                     <div className="min-h-[56px] w-full">
-                        <h4 className={`-mt-1 mb-0 w-full break-words text-lg font-semibold leading-tight text-pink ${!name && 'opacity-30'}`}>{name || 'Bronze'}</h4>
+                        <h4 className={`-mt-1 mb-0 w-full break-words text-lg font-semibold leading-tight text-pink ${!name && 'opacity-30'}`}>{name || (isFreeTier ? 'Free' : 'Bronze')}</h4>
                         <div className="mt-4 flex w-full flex-row flex-wrap items-end justify-between gap-x-1 gap-y-[10px]">
                             <div className={`flex flex-wrap text-black ${!yearlyPrice && !monthlyPrice && !isFreeTier && 'opacity-30'}`}>
                                 <span className="self-start text-[2.7rem] font-bold uppercase leading-[1.115]">{currencySymbol}</span>