Created
October 18, 2019 16:55
-
-
Save rafaelcorreiapoli/2c58af2e9a57a8c7f86431de6e50a285 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { useState } from 'react' | |
| import { StyleSheet, View, ViewStyle } from 'react-native' | |
| import { TextInput, RadioButton } from 'react-native-paper' | |
| import { Text } from '@ds/Typography' | |
| import { RadioSelect } from '@ds/RadioSelect' | |
| import { Button } from '@ds/Button' | |
| import { Colors } from '@resources/Colors' | |
| export interface IUserStoryProps { | |
| name: string | |
| } | |
| const STATES = [ | |
| { | |
| label: 'SP', | |
| tax: 6.85, | |
| }, | |
| { | |
| label: 'MG', | |
| tax: 8.0, | |
| }, | |
| { | |
| label: 'RS', | |
| tax: 6.25, | |
| }, | |
| { | |
| label: 'RJ', | |
| tax: 4, | |
| }, | |
| { | |
| label: 'AL', | |
| tax: 8.25, | |
| }, | |
| ] | |
| const DISCOUNTS = [ | |
| { | |
| range: [0, 1000], | |
| discount: 3, | |
| }, | |
| { | |
| range: [1001, 5000], | |
| discount: 5, | |
| }, | |
| { | |
| range: [5001, 7000], | |
| discount: 7, | |
| }, | |
| { | |
| range: [7001, 10000], | |
| discount: 10, | |
| }, | |
| { | |
| range: [10001, 50000], | |
| discount: 15, | |
| }, | |
| ] | |
| export const UserStory: React.SFC<IUserStoryProps> = ({ name }) => { | |
| const [stateInput, setStateInput] = useState('RJ') | |
| const [discount] = useState('3.00') | |
| const [q, setQ] = useState('0') | |
| const [pricePerItem, setPricePerItem] = useState('0') | |
| const total = parseFloat(q) * parseFloat(pricePerItem) | |
| const selectedStateTaxes = STATES.find(state => state.label === stateInput) | |
| const taxFloat = selectedStateTaxes ? selectedStateTaxes.tax : 0 | |
| const discountFloat = parseFloat(discount) | |
| const appliedDiscountRange = DISCOUNTS.find(d => { | |
| const [min, max] = d.range | |
| return total >= min && total <= max | |
| }) || { discount: 0 } | |
| const appliedDiscount = appliedDiscountRange.discount / 100 | |
| const valueWithDiscount = total * (1 - discountFloat / 100) | |
| const valueWithTaxes = valueWithDiscount * (1 + taxFloat / 100) | |
| return ( | |
| <View style={styles.wrapper}> | |
| <Text title2 style={{ marginHorizontal: 20, marginVertical: 20 }}> | |
| Escolha seu estado | |
| </Text> | |
| <RadioSelect | |
| style={{ | |
| marginLeft: 10, | |
| marginBottom: 20, | |
| }} | |
| options={STATES.map(s => ({ | |
| id: s.label, | |
| label: `${s.label} - ${s.tax.toFixed(2)}%`, | |
| }))} | |
| value={stateInput} | |
| onChange={x => { | |
| setStateInput(x) | |
| }} | |
| /> | |
| <TextInput | |
| underlineColor={Colors.ORANGE} | |
| selectionColor={Colors.ORANGE} | |
| placeholderTextColor={Colors.ORANGE} | |
| underlineColorAndroid={Colors.ORANGE} | |
| keyboardType="numeric" | |
| label="Quantidade" | |
| onChangeText={t => setQ(t)} | |
| value={`${q}`} | |
| /> | |
| <TextInput | |
| underlineColor={Colors.ORANGE} | |
| selectionColor={Colors.ORANGE} | |
| placeholderTextColor={Colors.ORANGE} | |
| underlineColorAndroid={Colors.ORANGE} | |
| keyboardType="numeric" | |
| label="Preço pro item (R$)" | |
| onChangeText={p => setPricePerItem(p)} | |
| value={`${pricePerItem}`} | |
| /> | |
| <Text body style={{ marginHorizontal: 20, marginTop: 20 }}> | |
| Subtotal: R${total} | |
| {`\n`} | |
| Desconto aplicado: R${(total * appliedDiscount).toFixed(2)} | |
| {`\n`} | |
| Valor com desconto: R${valueWithDiscount.toFixed(2)} | |
| {`\n`} | |
| Imposto aplicado: R$ {(valueWithDiscount * (taxFloat / 100)).toFixed(2)} | |
| </Text> | |
| <Text title2 style={{ marginHorizontal: 20, marginTop: 10 }}> | |
| Total: R${valueWithTaxes.toFixed(2)} | |
| </Text> | |
| <Button | |
| floating | |
| backgroundColor={parseInt(q) === 0 ? Colors.GREY_80 : Colors.ORANGE} | |
| disabled={parseInt(q) === 0} | |
| title="VAI PEDRÃO" | |
| onPress={() => {}} | |
| /> | |
| </View> | |
| ) | |
| } | |
| const styles = StyleSheet.create({ | |
| wrapper: { | |
| flex: 1, | |
| paddingTop: 20, | |
| } as ViewStyle, | |
| }) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment