Update Recurly card style based on split test variants

GitOrigin-RevId: 6c5bd6dffb9254400e7e134da8334957b929d78e
This commit is contained in:
Rebeka 2023-05-22 18:04:54 +02:00 committed by Copybot
parent 63dbea0092
commit 9fd9e991a7

View file

@ -4,6 +4,7 @@ import { FormGroup, ControlLabel } from 'react-bootstrap'
import { CardElementChangeState } from '../../../../../../../types/recurly/elements'
import { ElementsInstance } from 'recurly__recurly-js'
import classnames from 'classnames'
import getMeta from '../../../../../utils/meta'
type CardElementProps = {
className?: string
@ -21,16 +22,31 @@ function CardElement({ className, elements, onChange }: CardElementProps) {
useEffect(() => {
if (!cardRef.current) return
const showNewDesign =
getMeta('ol-splitTestVariants')?.['design-system-updates'] === 'enabled'
const style = showNewDesign
? {
fontColor: '#1b222c',
placeholder: {
color: '#677283',
},
invalid: {
fontColor: '#b83a33',
},
}
: {
fontColor: '#5d6879',
placeholder: {},
invalid: {
fontColor: '#a93529',
},
}
const card = elements.CardElement({
displayIcon: true,
inputType: 'mobileSelect',
style: {
fontColor: '#5d6879',
placeholder: {},
invalid: {
fontColor: '#a93529',
},
},
style,
})
card.attach(cardRef.current)