Create UI components and stories for desktop SKU

components/brave_rewards/resources/ui/components/checkout/addFundsPanel/index.tsx

@@ -0,0 +1,172 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import * as React from 'react'
+
+import { LocaleContext } from '../localeContext'
+import { DialogTitle } from '../dialogTitle'
+import { FormSection } from '../formSection'
+import { CreditCardForm, CreditCardFormHandle, CreditCardDetails } from '../creditCardForm'
+import { GoBackLink } from '../goBackLink'
+
+import {
+  Subtitle,
+  CurrentBalance,
+  CurrentBalanceNeeded,
+  CurrentBalanceBat,
+  CurrentBalanceConverted,
+  ExchangeRateDisplay,
+  BatIcon,
+  AmountOptionList,
+  AmountOptionContainer,
+  AmountOptionButton,
+  AmountOptionExchange,
+  ChargeSummary,
+  ChargeSummaryTotal,
+  ChargeSummaryTotalAmount,
+  PurchaseButtonRow,
+  AddFundsButton,
+  TermsOfSale
+} from './style'
+
+interface AddFundsAmountOption {
+  amount: number
+  amountConverted: string
+  transactionFeeRate: string
+  transactionFee: string
+  totalCharge: string
+}
+
+interface AmountOpionPanelProps {
+  amountOptions: AddFundsAmountOption[]
+  selectedAmount: number
+  setSelectedAmount: (amount: number) => void
+}
+
+function AmountOptionPanel (props: AmountOpionPanelProps) {
+  if (props.amountOptions.length === 0) {
+    return null
+  }
+
+  const locale = React.useContext(LocaleContext)
+
+  let selectedOption = props.amountOptions[0]
+  for (const option of props.amountOptions) {
+    if (option.amount === props.selectedAmount) {
+      selectedOption = option
+      break
+    }
+  }
+
+  return (
+    <>
+        <AmountOptionList>
+        {
+          props.amountOptions.map(option => {
+            const selectAmount = () => { props.setSelectedAmount(option.amount) }
+            return (
+              <AmountOptionContainer key={option.amount}>
+                <AmountOptionButton
+                  text={`${option.amount} ${locale.get('bat')}`}
+                  size={'medium'}
+                  onClick={selectAmount}
+                  selected={option === selectedOption}
+                />
+                <AmountOptionExchange>
+                  {option.amountConverted}
+                </AmountOptionExchange>
+              </AmountOptionContainer>
+            )
+          })
+        }
+      </AmountOptionList>
+      <ChargeSummary>
+        <div>{locale.get('transactionFee')} ({selectedOption.transactionFeeRate})</div>
+        <div>{selectedOption.transactionFee}</div>
+        <ChargeSummaryTotal>{locale.get('orderTotal')}</ChargeSummaryTotal>
+        <ChargeSummaryTotalAmount>{selectedOption.totalCharge}</ChargeSummaryTotalAmount>
+      </ChargeSummary>
+    </>
+  )
+}
+
+interface AddFundsPanelProps {
+  amountNeeded: string
+  walletBalance: string
+  walletBalanceConverted: string
+  unitValueConverted: string
+  amountOptions: AddFundsAmountOption[]
+  onCancel: () => void
+  onPayWithCreditCard: (cardDetails: CreditCardDetails) => void
+}
+
+export function AddFundsPanel (props: AddFundsPanelProps) {
+  const locale = React.useContext(LocaleContext)
+
+  const [selectedAmount, setSelectedAmount] = React.useState<number>(0)
+  const creditCardFormRef = React.useRef<CreditCardFormHandle>(null)
+
+  const onPurchaseClick = () => {
+    const formHandle = creditCardFormRef.current
+    if (formHandle) {
+      const errors = formHandle.validate()
+      if (errors.length === 0) {
+        props.onPayWithCreditCard(formHandle.details)
+      } else {
+        errors[0].element.focus()
+      }
+    }
+  }
+
+  return (
+    <>
+      <DialogTitle>{locale.get('addFundsTitle')}</DialogTitle>
+      <Subtitle>
+        {locale.get('addFundsSubtitle')}
+      </Subtitle>
+      <CurrentBalance>
+        <div>
+          {locale.get('currentBalance')}
+          <CurrentBalanceBat>{props.walletBalance} {locale.get('bat')}</CurrentBalanceBat>
+          <CurrentBalanceConverted>{props.walletBalanceConverted}</CurrentBalanceConverted>
+        </div>
+        <CurrentBalanceNeeded>
+          {props.amountNeeded} {locale.get('batNeeded')}
+        </CurrentBalanceNeeded>
+      </CurrentBalance>
+      <FormSection
+        title={
+          <>
+            <span>{locale.get('selectAmountToAddStep')}</span>
+            <ExchangeRateDisplay>
+              <BatIcon /> 1 {locale.get('bat')} = {props.unitValueConverted}
+            </ExchangeRateDisplay>
+          </>
+        }
+      >
+        <AmountOptionPanel
+          amountOptions={props.amountOptions}
+          selectedAmount={selectedAmount}
+          setSelectedAmount={setSelectedAmount}
+        />
+      </FormSection>
+      <FormSection title={locale.get('enterCreditCardStep')}>
+        <CreditCardForm handleRef={creditCardFormRef} />
+      </FormSection>
+      <PurchaseButtonRow>
+        <GoBackLink onClick={props.onCancel} />
+        <AddFundsButton
+          text={locale.get('addFundsButtonText')}
+          size='medium'
+          onClick={onPurchaseClick}
+          type='accent'
+          brand='rewards'
+        />
+      </PurchaseButtonRow>
+      <TermsOfSale>
+        <span dangerouslySetInnerHTML={{ __html: locale.get('addFundsTermsOfSale') }} />
+      </TermsOfSale>
+    </>
+  )
+}

components/brave_rewards/resources/ui/components/checkout/addFundsPanel/style.ts

@@ -0,0 +1,131 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import styled from 'styled-components'
+import { BatColorIcon } from 'brave-ui/components/icons'
+import Button, { Props as ButtonProps } from 'brave-ui/components/buttonsIndicators/button'
+import { ComponentType } from 'react'
+
+export const Subtitle = styled.div`
+  text-align: center;
+  font-family: ${p => p.theme.fontFamily.body};
+  font-size: 15px;
+  margin: -10px 0 22px 0;
+`
+
+export const CurrentBalance = styled.div`
+  padding: 15px 8px 0;
+  border-top: solid 1px ${p => p.theme.color.separatorLine};
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+  margin-bottom: -12px;
+`
+
+export const CurrentBalanceBat = styled.span`
+  padding-left: 7px;
+  font-size: 16px;
+  font-weight: 600;
+`
+
+export const CurrentBalanceConverted = styled.span`
+  padding-left: 7px;
+  color: ${p => p.theme.palette.grey600};
+  font-size: 14px;
+`
+
+export const CurrentBalanceNeeded = styled.div`
+  text-align: right;
+  color: ${p => p.theme.palette.green700};
+  font-weight: 500;
+  font-size: 14px;
+`
+
+export const PurchaseButtonRow = styled.div`
+  margin: 20px 0 0;
+  padding-right: 7px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`
+
+export const AddFundsButton = styled(Button as ComponentType<ButtonProps>)`
+  padding-left: 42px;
+  padding-right: 42px;
+`
+
+export const ExchangeRateDisplay = styled.div`
+  font-size: 12px;
+  color: ${p => p.theme.palette.grey600};
+  text-align: right;
+  margin-top: -2px;
+`
+
+export const BatIcon = styled(BatColorIcon)`
+  height: 18px;
+  width: 18px;
+  vertical-align: text-bottom;
+`
+
+export const AmountOptionList = styled.div`
+  margin-top: 22px;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+`
+
+export const AmountOptionContainer = styled.div`
+  margin: 0 10px 12px;
+  text-align: center;
+`
+
+interface AmountOptionButtonProps extends ButtonProps {
+  selected?: boolean
+}
+
+export const AmountOptionButton = styled(Button as ComponentType<AmountOptionButtonProps>)`
+  min-width: 98px;
+  background: ${p => p.selected ? p.theme.color.brandBat : 'transparent'};
+  border-color: ${p => p.theme.color.brandBat};
+  margin-bottom: 7px;
+  color: ${p => p.selected ? p.theme.palette.white : p.theme.color.brandBat};
+  font-size: 15px;
+`
+
+export const AmountOptionExchange = styled.div`
+  font-family: ${p => p.theme.fontFamily.body};
+  font-size: 11px;
+  color: ${p => p.theme.palette.grey600};
+`
+
+export const ChargeSummary = styled.div`
+  padding: 8px 7px 5px;
+  border-top: solid 1px ${p => p.theme.color.separatorLine};
+  display: grid;
+  grid-template-columns: auto minmax(auto, 84px);
+  text-align: right;
+`
+
+export const ChargeSummaryTotal = styled.div`
+  padding-top: 10px;
+  font-size: 16px;
+`
+
+export const ChargeSummaryTotalAmount = styled.div`
+  padding-top: 10px;
+  font-size: 16px;
+  font-weight: 500;
+`
+
+export const TermsOfSale = styled.div`
+  font-family: ${p => p.theme.fontFamily.body};
+  font-size: 12px;
+  text-align: center;
+  padding-top: 20px;
+
+  a {
+    font-weight: bold;
+    color: ${p => p.theme.palette.black};
+  }
+`