Skip to content

Commit

Permalink
Responsivity adjustments
Browse files Browse the repository at this point in the history
  • Loading branch information
@wender
wender committed Feb 20, 2020
1 parent ac0c77f commit 80ec9f8
Show file tree
Hide file tree
Showing 4 changed files with 147 additions and 102 deletions.
6 changes: 5 additions & 1 deletion manifest.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"vendor": "vtex",
"name": "quickorder",
"version": "0.5.5",
"title": "Quick Order Component",
"title": "Quickorder APP",
"description": "Allow users to add multiple products to the cart at once",
"defaultLocale": "pt-BR",
"builders": {
Expand Down Expand Up @@ -51,5 +51,9 @@
}
}
],
"billingOptions": {
"free": true
},
"settingsSchema": {},
"$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}
Binary file added public/metadata/icon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
175 changes: 101 additions & 74 deletions react/components/AutocompleteBlock.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,19 @@
/* eslint-disable react/prop-types */
import React, { useState } from 'react'
import { WrappedComponentProps, injectIntl, FormattedMessage } from 'react-intl'
import { PageBlock, Button, Tag, Input } from 'vtex.styleguide'
import { FormattedMessage } from 'react-intl'
import { Button, Tag, Input } from 'vtex.styleguide'
import PropTypes from 'prop-types'
import QuickOrderAutocomplete from './QuickOrderAutocomplete'
import styles from '../styles.css'
import { useCssHandles } from 'vtex.css-handles'
import { useApolloClient } from 'react-apollo'
import productQuery from '../queries/product.gql'

const AutocompleteBlock: StorefrontFunctionComponent<any &
WrappedComponentProps> = ({ onAddToCart, loading, success, intl }) => {
const AutocompleteBlock: StorefrontFunctionComponent<any> = ({
onAddToCart,
loading,
success,
}) => {
const client = useApolloClient()

const [state, setState] = useState<any>({
Expand Down Expand Up @@ -80,78 +83,102 @@ const AutocompleteBlock: StorefrontFunctionComponent<any &
const handles = useCssHandles(CSS_HANDLES)

return (
<PageBlock
variation="annotated"
title={intl.formatMessage({ id: 'quickorder.autocomplete.label' })}
subtitle={intl.formatMessage({ id: 'quickorder.autocomplete.helper' })}
>
<div className={'flex flex-column w-60'}>
{!selectedItem && <QuickOrderAutocomplete onSelect={onSelect} />}
{!!selectedItem && (
<div>
<div className={`flex flex-column w-10 fl ${handles.productThumb}`}>
<img src={selectedItem.thumb} width="25" height="25" alt="" />
</div>
<div className={`flex flex-column w-60 fl ${handles.productLabel}`}>
{selectedItem.label}
</div>
<div
className={`flex flex-column w-10 fl ${handles.inputQuantity}`}
>
<Input
value={quantitySelected}
size={'3'}
onChange={(e: any) => {
setState({
...state,
quantitySelected: e.target.value,
})
}}
/>
</div>
<div className={`flex flex-column w-20 fl ${handles.buttonAdd}`}>
<Button
variation="primary"
size="small"
isLoading={loading}
onClick={() => {
callAddUnitToCart()
}}
>
<FormattedMessage id="quickorder.autocomplete.addButton" />
</Button>
</div>
{!!selectedItem && selectedItem.data.product.items.length > 1 && (
<div>
{selectedItem.data.product.items.map((item: any) => {
return (
<span
key={item.itemId}
className={`mr4 ${handles.skuSelection} ${styles.tag}`}
<div>
<div className="w-third-l w-100-ns">
<div className="flex-grow-1">
<h2 className="t-heading-3 mb3 ml5 ml3-ns mt4">
<FormattedMessage id="quickorder.autocomplete.label" />
</h2>
<div className="t-body lh-copy c-muted-1 mb7 ml3 false">
<FormattedMessage id="quickorder.autocomplete.helper" />
</div>
</div>
</div>
<div className="w-two-thirds-l w-100-ns">
<div className="w-100 mb5">
<div className="bg-base t-body c-on-base pa7 br3 b--muted-4 ba">
<div className={'flex flex-column w-60'}>
{!selectedItem && <QuickOrderAutocomplete onSelect={onSelect} />}
{!!selectedItem && (
<div>
<div
className={`flex flex-column w-10 fl ${handles.productThumb}`}
>
<img
src={selectedItem.thumb}
width="25"
height="25"
alt=""
/>
</div>
<div
className={`flex flex-column w-60 fl ${handles.productLabel}`}
>
{selectedItem.label}
</div>
<div
className={`flex flex-column w-10 fl ${handles.inputQuantity}`}
>
<Input
value={quantitySelected}
size={'3'}
onChange={(e: any) => {
setState({
...state,
quantitySelected: e.target.value,
})
}}
/>
</div>
<div
className={`flex flex-column w-20 fl ${handles.buttonAdd}`}
>
<Button
variation="primary"
size="small"
isLoading={loading}
onClick={() => {
callAddUnitToCart()
}}
>
<Tag
size="small"
bgColor={
item.itemId === selectedItem.value
? '#8bc34a'
: '#979899'
}
onClick={() => {
selectSku(item.itemId)
}}
>
{item.name}
</Tag>
</span>
)
})}
</div>
)}
<FormattedMessage id="quickorder.autocomplete.addButton" />
</Button>
</div>
{!!selectedItem &&
selectedItem.data.product.items.length > 1 && (
<div>
{selectedItem.data.product.items.map((item: any) => {
return (
<span
key={item.itemId}
className={`mr4 ${handles.skuSelection} ${styles.tag}`}
>
<Tag
size="small"
bgColor={
item.itemId === selectedItem.value
? '#8bc34a'
: '#979899'
}
onClick={() => {
selectSku(item.itemId)
}}
>
{item.name}
</Tag>
</span>
)
})}
</div>
)}
</div>
)}
</div>
<div className={'flex flex-column w-40'}></div>
</div>
)}
</div>
</div>
<div className={'flex flex-column w-40'}></div>
</PageBlock>
</div>
)
}
AutocompleteBlock.propTypes = {
Expand All @@ -160,4 +187,4 @@ AutocompleteBlock.propTypes = {
success: PropTypes.bool,
}

export default injectIntl(AutocompleteBlock)
export default AutocompleteBlock
68 changes: 41 additions & 27 deletions react/components/TextAreaBlock.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
import React, { useState } from 'react'
import { FormattedMessage, WrappedComponentProps, injectIntl } from 'react-intl'
import { PageBlock, Button, Textarea } from 'vtex.styleguide'
import { FormattedMessage } from 'react-intl'
import { Button, Textarea } from 'vtex.styleguide'
import { useCssHandles } from 'vtex.css-handles'
import { ParseText } from '../utils'

const TextAreaBlock: StorefrontFunctionComponent<WrappedComponentProps &
TextAreaBlockInterface> = ({ value, onReviewItems, intl }: any) => {
const TextAreaBlock: StorefrontFunctionComponent<TextAreaBlockInterface> = ({
value,
onReviewItems,
}: any) => {
const [state, setState] = useState<any>({
textAreaValue: value || '',
reviewItems: [],
Expand Down Expand Up @@ -40,29 +42,41 @@ const TextAreaBlock: StorefrontFunctionComponent<WrappedComponentProps &
const handles = useCssHandles(CSS_HANDLES)

return (
<PageBlock
variation="annotated"
title={intl.formatMessage({ id: 'quickorder.textarea.label' })}
subtitle={intl.formatMessage({ id: 'quickorder.textarea.helper' })}
>
<Textarea
value={textAreaValue}
onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
setTextareaValue(e.target.value)
}
></Textarea>
<div className={`mb4 flex justify-end ${handles.buttonValidate}`}>
<Button
variation="secondary"
size="regular"
onClick={() => {
parseText()
}}
>
<FormattedMessage id="quickorder.validate" />
</Button>
<div>
<div className="w-third-l w-100-ns">
<div className="flex-grow-1">
<h2 className="t-heading-3 mb3 ml5 ml3-ns mt4">
<FormattedMessage id="quickorder.textarea.label" />
</h2>
<div className="t-body lh-copy c-muted-1 mb7 ml3 false">
<FormattedMessage id="quickorder.textarea.helper" />
</div>
</div>
</div>
</PageBlock>
<div className="w-two-thirds-l w-100-ns">
<div className="w-100 mb5">
<div className="bg-base t-body c-on-base pa7 br3 b--muted-4 ba">
<Textarea
value={textAreaValue}
onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
setTextareaValue(e.target.value)
}
></Textarea>
<div className={`mt2 flex justify-end ${handles.buttonValidate}`}>
<Button
variation="secondary"
size="regular"
onClick={() => {
parseText()
}}
>
<FormattedMessage id="quickorder.validate" />
</Button>
</div>
</div>
</div>
</div>
</div>
)
}

Expand All @@ -72,4 +86,4 @@ interface TextAreaBlockInterface {
onRefidLoading: any
}

export default injectIntl(TextAreaBlock)
export default TextAreaBlock

0 comments on commit 80ec9f8

Please sign in to comment.