function renderInAppPurchase()

in client/components/mma/billing/Billing.tsx [331:377]

46 lines of code
2 McCabe index (conditional complexity)


function renderInAppPurchase(subscription: AppSubscription) {
	const tableHeadingCss = css`
		width: 100%;
		${headlineBold20};
		margin: 0;
		padding: ${space[3]}px ${space[5]}px;
		background-color: ${palette.neutral[97]};
		${until.tablet} {
			font-size: 1.0625rem;
			line-height: 1.6;
			padding: ${space[3]}px;
		}
	`;
	const puzzleOrNews = isPuzzle(subscription) ? 'puzzle' : 'news';

	return (
		<div css={subHeadingBorderTopCss} key={subscription.subscriptionId}>
			<h2
				css={css`
					${subHeadingTitleCss}
					margin: 0;
				`}
			>
				{capitalize(puzzleOrNews)} app
			</h2>
			<div
				css={css`
					${textSans17};
					border: 1px solid ${palette.neutral[86]};
					display: flex;
					flex-wrap: wrap;
					margin: ${space[5]}px 0;
				`}
			>
				<h2 css={tableHeadingCss}>Payment</h2>
				<div
					css={css`
						padding: ${space[3]}px;
					`}
				>
					To change your payment setup, please contact{' '}
					{getAppStoreMessage(subscription)}.
				</div>
			</div>
		</div>
	);
}