From c0e9baf48db218059f91177f7cefbbae4f248e78 Mon Sep 17 00:00:00 2001 From: sudjoao Date: Wed, 31 May 2023 06:39:27 -0300 Subject: [PATCH 1/6] feat: create new tutorial modals --- app/assets/images/TutorialImages/Step1.svg | 45 ++++++++++++++++ app/assets/images/TutorialImages/Step2.svg | 45 ++++++++++++++++ app/assets/images/TutorialImages/Step3.svg | 53 ++++++++++++++++++ .../{index.js => index.jsx} | 1 + app/src/components/FAQModals/modal.js | 54 ------------------- app/src/components/FAQModals/modal.jsx | 40 ++++++++++++++ .../atoms/SliderDescription/index.jsx | 10 ++++ .../components/atoms/SliderTitle/index.jsx | 10 ++++ .../molecules/TutorialCard/index.jsx | 23 ++++++++ .../organisms/SliderModal/index.jsx | 26 +++++++++ app/src/docs/FAQ/faqOptions.js | 20 ------- app/src/docs/FAQ/faqOptions.jsx | 32 +++++++++++ app/src/pages/InformationsCenter/index.js | 17 ------ app/src/pages/InformationsCenter/index.jsx | 33 ++++++++++++ app/src/utils/getSliderBody.jsx | 21 ++++++++ 15 files changed, 339 insertions(+), 91 deletions(-) create mode 100644 app/assets/images/TutorialImages/Step1.svg create mode 100644 app/assets/images/TutorialImages/Step2.svg create mode 100644 app/assets/images/TutorialImages/Step3.svg rename app/src/components/FAQModals/EmergencyNumbersModal/{index.js => index.jsx} (88%) delete mode 100644 app/src/components/FAQModals/modal.js create mode 100644 app/src/components/FAQModals/modal.jsx create mode 100644 app/src/components/atoms/SliderDescription/index.jsx create mode 100644 app/src/components/atoms/SliderTitle/index.jsx create mode 100644 app/src/components/molecules/TutorialCard/index.jsx create mode 100644 app/src/components/organisms/SliderModal/index.jsx delete mode 100644 app/src/docs/FAQ/faqOptions.js create mode 100644 app/src/docs/FAQ/faqOptions.jsx delete mode 100644 app/src/pages/InformationsCenter/index.js create mode 100644 app/src/pages/InformationsCenter/index.jsx create mode 100644 app/src/utils/getSliderBody.jsx diff --git a/app/assets/images/TutorialImages/Step1.svg b/app/assets/images/TutorialImages/Step1.svg new file mode 100644 index 000000000..ca48b6a55 --- /dev/null +++ b/app/assets/images/TutorialImages/Step1.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/app/assets/images/TutorialImages/Step2.svg b/app/assets/images/TutorialImages/Step2.svg new file mode 100644 index 000000000..b4b8b651f --- /dev/null +++ b/app/assets/images/TutorialImages/Step2.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/app/assets/images/TutorialImages/Step3.svg b/app/assets/images/TutorialImages/Step3.svg new file mode 100644 index 000000000..1cf82d443 --- /dev/null +++ b/app/assets/images/TutorialImages/Step3.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/app/src/components/FAQModals/EmergencyNumbersModal/index.js b/app/src/components/FAQModals/EmergencyNumbersModal/index.jsx similarity index 88% rename from app/src/components/FAQModals/EmergencyNumbersModal/index.js rename to app/src/components/FAQModals/EmergencyNumbersModal/index.jsx index a2b6291c0..e00465fc8 100644 --- a/app/src/components/FAQModals/EmergencyNumbersModal/index.js +++ b/app/src/components/FAQModals/EmergencyNumbersModal/index.jsx @@ -3,6 +3,7 @@ import emergencyNumbers from '../../../docs/FAQ/EmergencyNumbers'; import { ModalComponent } from '../modal'; export default function EmergencyNumbers({ visible, setVisible }) { + // TODO: replace it later with a new modal return ( { - const renderModalList = (list) => ( - - - {list.map((numbers) => { - return ( - - {numbers.number} - - {' '} - {numbers.description}{' '} - - - ); - })} - - - ); - - return ( - props.setVisible(false)} - animationType="fade" - > - - - { - props.setVisible(false); - }} - style={styles.icon} - > - - - {props.list ? renderModalList(props.list) : props.children} - - - - ); -}; diff --git a/app/src/components/FAQModals/modal.jsx b/app/src/components/FAQModals/modal.jsx new file mode 100644 index 000000000..e2dfae6d6 --- /dev/null +++ b/app/src/components/FAQModals/modal.jsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { Modal, ScrollView, Text, View } from 'react-native'; +import styles from './styles'; +import { FloatingIconButton } from '../molecules/FloatingIconButton'; + +export const ModalComponent = (props) => { + + return ( + props.setVisible(false)} + animationType="fade" + > + + + { + props.setVisible(false); + }} + /> + + {props.list.map((numbers) => { + return ( + + {numbers.number} + + {' '} + {numbers.description}{' '} + + + ); + })} + + + + + ); +}; diff --git a/app/src/components/atoms/SliderDescription/index.jsx b/app/src/components/atoms/SliderDescription/index.jsx new file mode 100644 index 000000000..5896d5edb --- /dev/null +++ b/app/src/components/atoms/SliderDescription/index.jsx @@ -0,0 +1,10 @@ +import React from 'react' +import { Text } from 'react-native' + +export const SliderDescription = ({description}) => { + return ( + + {description} + + ) +} diff --git a/app/src/components/atoms/SliderTitle/index.jsx b/app/src/components/atoms/SliderTitle/index.jsx new file mode 100644 index 000000000..72581537a --- /dev/null +++ b/app/src/components/atoms/SliderTitle/index.jsx @@ -0,0 +1,10 @@ +import React from 'react' +import { Text } from 'react-native' + +export const SliderTitle = ({title}) => { + return ( + + {title} + + ) +} diff --git a/app/src/components/molecules/TutorialCard/index.jsx b/app/src/components/molecules/TutorialCard/index.jsx new file mode 100644 index 000000000..82358a67a --- /dev/null +++ b/app/src/components/molecules/TutorialCard/index.jsx @@ -0,0 +1,23 @@ +import React from 'react' +import { Image, Pressable, Text, View } from 'react-native' +import tailwindConfig from '../../../../tailwind.config' +export const TutorialCard = ({ title, description, onPress, margin = '', leftAligment = true }) => { + const flexRow = leftAligment ? 'flex-row' : 'flex-row-reverse' + return ( + + + + {title} + {description} + + + ) +} diff --git a/app/src/components/organisms/SliderModal/index.jsx b/app/src/components/organisms/SliderModal/index.jsx new file mode 100644 index 000000000..c2b1bd55b --- /dev/null +++ b/app/src/components/organisms/SliderModal/index.jsx @@ -0,0 +1,26 @@ +import React from 'react' +import { Modal, Pressable, Text } from 'react-native' +import Onboarding from 'react-native-onboarding-swiper' + +export const SliderModal = ({ pages, visible, closeModal }) => { + const textButton = ({ onPress, nextLabel, skipLabel }) => ( + + {nextLabel || skipLabel} + + ) + + return ( + + textButton({ nextLabel: 'Finalizar', ...props })} + /> + + ) +} diff --git a/app/src/docs/FAQ/faqOptions.js b/app/src/docs/FAQ/faqOptions.js deleted file mode 100644 index 8906a0eaa..000000000 --- a/app/src/docs/FAQ/faqOptions.js +++ /dev/null @@ -1,20 +0,0 @@ -const faqOptions = [ - { - id: 1, - description: 'Como usar o Mia-Ajuda?', - }, - { - id: 2, - description: 'Recomendações sobre pedidos de ajuda', - }, - { - id: 3, - description: 'Recomendações sobre ofertas de ajuda', - }, - { - id: 4, - description: 'Contatos Importantes', - }, -]; - -export default faqOptions; diff --git a/app/src/docs/FAQ/faqOptions.jsx b/app/src/docs/FAQ/faqOptions.jsx new file mode 100644 index 000000000..db2a0d0fc --- /dev/null +++ b/app/src/docs/FAQ/faqOptions.jsx @@ -0,0 +1,32 @@ +import { getSliderBody } from '../../utils/getSliderBody'; + +const faqOptions = [ + { + id: 1, + title: 'Como criar um pedido oferta ou campanha?', + description: 'Não sabe como criar um pedido oferta ou campanha? Clique aqui para entender melhor como fazer.', + pages: [ + getSliderBody(1, 'Entrar na página de pedidos e ofertas', 'Clique no ícone "Menu" para abrir a navegação e selecione a aba "Meus Pedidos e Ofertas.'), + getSliderBody(2, 'Entrar na aba de meus pedidos ou minhas ofertas', 'Se você quer criar um pedido, deve entrar na aba de meu pedidos, caso queria uma oferta, na aba de ofertas.'), + getSliderBody(3, 'Clicar no botão de criação e preencher os dados', 'Por fim, basta você clicar no botão Criar Oferta / pedido e preencher todos os dados requisitados.'), + ] + }, + { + id: 2, + title: 'Como interagir com um pedido, oferta ou campanha?', + description: 'Está com dúvidas em como interagir com um pedido oferta ou campanha? Clique aqui para entender melhor como fazer.', + pages: [ + getSliderBody(1, 'Entrar na página Mapa', 'Clique no ícone "Menu" para abrir a navegação e selecione a aba "Mapa"'), + getSliderBody(2, 'Procurar pedido, oferta ou camapanha', 'No mapa aparecerão alguns marcadores indicando pedidos, campanhas e ofertas, além de uma lista inferior com esses pedidos.'), + getSliderBody(3, 'Clicar no pedido, oferta ou campanha', 'Clique no marcador ou na lista inferior para abrir a página do pedido, oferta ou campanha.'), + ] + }, + { + id: 3, + title: 'Contatos Importantes', + description: 'Não sabe como criar um pedido oferta ou campanha? Clique aqui para entender melhor como fazer.', + emergencyModal: true, + }, +]; + +export default faqOptions; diff --git a/app/src/pages/InformationsCenter/index.js b/app/src/pages/InformationsCenter/index.js deleted file mode 100644 index 53f5a9fad..000000000 --- a/app/src/pages/InformationsCenter/index.js +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import { View } from 'react-native'; -import FaqCard from '../../components/FaqCard'; -import faqOption from '../../docs/FAQ/faqOptions'; -import styles from './styles'; - -export default function InformationsCenter() { - return ( - - - {faqOption.map((faq) => { - return ; - })} - - - ); -} diff --git a/app/src/pages/InformationsCenter/index.jsx b/app/src/pages/InformationsCenter/index.jsx new file mode 100644 index 000000000..60f556af0 --- /dev/null +++ b/app/src/pages/InformationsCenter/index.jsx @@ -0,0 +1,33 @@ +import React, { useState } from 'react'; +import { View, Text } from 'react-native'; +import faqOption from '../../docs/FAQ/faqOptions'; +import { TutorialCard } from '../../components/molecules/TutorialCard'; +import { SliderModal } from '../../components/organisms/SliderModal'; +import EmergencyNumbers from '../../components/FAQModals/EmergencyNumbersModal'; + +export default function InformationsCenter() { + const [pages, setPages] = useState([]) + const [modalVisible, setModalVisible] = useState(false) + const [emergencyNumbersVisible, setEmergencyNumbersVisible] = useState(false) + + const handleShowModal = (id) => { + const selectedPages = faqOption[id].pages; + setPages(selectedPages); + setModalVisible(true); + } + + return ( + + setModalVisible(false)} /> + + {faqOption.map((faq, i) => ( + { faq.emergencyModal ? setEmergencyNumbersVisible(true) : handleShowModal(i) }} /> + ))} + + ); +} diff --git a/app/src/utils/getSliderBody.jsx b/app/src/utils/getSliderBody.jsx new file mode 100644 index 000000000..7b74bfe81 --- /dev/null +++ b/app/src/utils/getSliderBody.jsx @@ -0,0 +1,21 @@ +import Step1 from '../../assets/images/TutorialImages/Step1.svg' +import Step2 from '../../assets/images/TutorialImages/Step2.svg' +import Step3 from '../../assets/images/TutorialImages/Step3.svg' +import colors from '../../assets/styles/colorVariables' +import { SliderDescription } from '../components/atoms/SliderDescription' +import { SliderTitle } from '../components/atoms/SliderTitle' + +export const getSliderBody = (index, title, subtitle) => { + const stepImages = { + 1: , + 2: , + 3: , + } + const image = stepImages[index] + return ({ + backgroundColor: colors.light, + image, + title: , + subtitle: , + }) +} \ No newline at end of file From d8f1779d93b96f689e3ca3db6d30f72c85170ecc Mon Sep 17 00:00:00 2001 From: sudjoao Date: Wed, 31 May 2023 06:39:34 -0300 Subject: [PATCH 2/6] chore: remove unused files --- .../FAQModals/HowToUseModal/index.js | 135 ------------------ .../FAQModals/HowToUseModal/styles.js | 68 --------- .../HelpOfferedModal/index.js | 13 -- .../HelpRequestModal/index.js | 13 -- app/src/components/FaqCard/index.js | 77 ---------- app/src/components/FaqCard/styles.js | 40 ------ 6 files changed, 346 deletions(-) delete mode 100644 app/src/components/FAQModals/HowToUseModal/index.js delete mode 100644 app/src/components/FAQModals/HowToUseModal/styles.js delete mode 100644 app/src/components/FAQModals/RecomendationsModal/HelpOfferedModal/index.js delete mode 100644 app/src/components/FAQModals/RecomendationsModal/HelpRequestModal/index.js delete mode 100644 app/src/components/FaqCard/index.js delete mode 100644 app/src/components/FaqCard/styles.js diff --git a/app/src/components/FAQModals/HowToUseModal/index.js b/app/src/components/FAQModals/HowToUseModal/index.js deleted file mode 100644 index 64f6ca6e4..000000000 --- a/app/src/components/FAQModals/HowToUseModal/index.js +++ /dev/null @@ -1,135 +0,0 @@ -import React, { useState } from 'react'; -import { View, Modal, Text, TouchableOpacity } from 'react-native'; -import styles from './styles'; -import colors from '../../../../assets/styles/colorVariables'; -import { Icon } from 'react-native-elements'; -import createHelpRecommendations from '../../../docs/FAQ/HowToCreateHelp'; -import offerHelpRecommendations from '../../../docs/FAQ/HowToOfferHelp'; -import howToChoseHelpOfferRecommendations from '../../../docs/FAQ/HowToChooseHelpOffered'; -import howToVolunteerRecommendations from '../../../docs/FAQ/HowToBeVolunteer'; -import { ModalComponent } from '../modal'; - -export default function HowToUseModal({ visible, setVisible }) { - const [howToCreateHelpModalVisible, setHowToCreateHelpModalVisible] = - useState(false); - const [howToOfferHelpModalVisible, setHowToOfferHelpModalVisible] = - useState(false); - const [ - howToChoseHelpOfferModalVisible, - setHowToChoseHelpOfferModalVisible, - ] = useState(false); - const [howToVolunteerModalVisible, setHowToVolunteerModalVisible] = - useState(false); - - const renderHowToCreateHelpModal = () => ( - { - setHowToCreateHelpModalVisible(!howToCreateHelpModalVisible); - }} - style={styles.textButtons} - > - - Como criar um pedido de ajuda? - - - ); - - const renderHowToOfferHelpModal = () => ( - { - setHowToOfferHelpModalVisible(!howToOfferHelpModalVisible); - }} - style={styles.textButtons} - > - - Como criar uma oferta de ajuda? - - - ); - - const renderHowToChoseOfferHelpModal = () => ( - { - setHowToChoseHelpOfferModalVisible( - !howToChoseHelpOfferModalVisible, - ); - }} - style={styles.textButtons} - > - - Como escolher uma oferta de ajuda? - - - ); - - const renderHowToVolunteerModal = () => ( - { - setHowToVolunteerModalVisible(!howToVolunteerModalVisible); - }} - style={styles.textButtons} - > - Como ser um voluntário? - - ); - - return ( - setVisible(false)} - > - { - setVisible(false); - }} - > - - - { - setVisible(false); - }} - style={styles.closeIcon} - > - - - Como usar o Mia Ajuda? - - {renderHowToCreateHelpModal()} - {renderHowToOfferHelpModal()} - {renderHowToChoseOfferHelpModal()} - {renderHowToVolunteerModal()} - - - - - - - - ); -} diff --git a/app/src/components/FAQModals/HowToUseModal/styles.js b/app/src/components/FAQModals/HowToUseModal/styles.js deleted file mode 100644 index 4bd2dc611..000000000 --- a/app/src/components/FAQModals/HowToUseModal/styles.js +++ /dev/null @@ -1,68 +0,0 @@ -import { StyleSheet } from 'react-native'; -import colors from '../../../../assets/styles/colorVariables'; - -const minimumTextSize = 16; - -const styles = StyleSheet.create({ - modalContent: { - width: '80%', - backgroundColor: '#fff', - alignSelf: 'center', - top: '10.5%', - borderRadius: 15, - padding: 16, - }, - - modalContainer: { - width: '100%', - height: '100%', - backgroundColor: 'rgba(0,0,0,0.2)', - }, - - contentHeader: { - flexDirection: 'column', - }, - - closeIcon: { - alignSelf: 'flex-end', - }, - - arrowIcon: { - right: 20, - position: 'absolute', - zIndex: 5, - }, - - title: { - alignSelf: 'center', - textAlign: 'center', - fontFamily: 'montserrat-semibold', - color: colors.primary, - fontSize: minimumTextSize * 1.5, - }, - - modalBody: { - marginTop: 25, - height: '80%', - }, - - textButtons: { - borderRadius: 10, - marginTop: 10, - padding: 10, - flexDirection: 'row', - justifyContent: 'space-around', - alignItems: 'center', - backgroundColor: colors.primary, - }, - - textContent: { - textAlign: 'center', - marginBottom: 10, - fontFamily: 'montserrat-semibold', - color: colors.light, - fontSize: minimumTextSize, - }, -}); - -export default styles; diff --git a/app/src/components/FAQModals/RecomendationsModal/HelpOfferedModal/index.js b/app/src/components/FAQModals/RecomendationsModal/HelpOfferedModal/index.js deleted file mode 100644 index 3c9396513..000000000 --- a/app/src/components/FAQModals/RecomendationsModal/HelpOfferedModal/index.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import helpOfferedRecommendations from '../../../../docs/FAQ/HelpOfferedRecommendations'; -import { ModalComponent } from '../../modal'; - -export default function HelpOfferedModal({ visible, setVisible }) { - return ( - - ); -} diff --git a/app/src/components/FAQModals/RecomendationsModal/HelpRequestModal/index.js b/app/src/components/FAQModals/RecomendationsModal/HelpRequestModal/index.js deleted file mode 100644 index 2aec27c2d..000000000 --- a/app/src/components/FAQModals/RecomendationsModal/HelpRequestModal/index.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import helpRequestRecommendations from '../../../../docs/FAQ/HelpRequestRecommendations'; -import { ModalComponent } from '../../modal'; - -export default function HelpRequestModal({ visible, setVisible }) { - return ( - - ); -} diff --git a/app/src/components/FaqCard/index.js b/app/src/components/FaqCard/index.js deleted file mode 100644 index 29d70958f..000000000 --- a/app/src/components/FaqCard/index.js +++ /dev/null @@ -1,77 +0,0 @@ -import React, { useState } from 'react'; -import { View, Text, TouchableOpacity } from 'react-native'; -import EmergencyNumbers from '../../components/FAQModals/EmergencyNumbersModal'; -import HelpOfferedModal from '../FAQModals/RecomendationsModal/HelpOfferedModal'; -import HelpRequestModal from '../FAQModals/RecomendationsModal/HelpRequestModal'; -import HowToUseModal from '../FAQModals/HowToUseModal'; -import styles from './styles'; -import BlueCat from '../../../assets/images/blueCatCard.svg'; -import Exclamation from '../../../assets/images/exclamation.svg'; -import HelpHand from '../../../assets/images/hand.svg'; -import Phone from '../../../assets/images/phone.svg'; - -export default function FaqCard({ faq }) { - const [modalVisible, setModalVisible] = useState(false); - - const renderSVGIcon = (id) => { - if (id == 1) { - return ; - } else if (id == 2) { - return ; - } else if (id == 3) { - return ; - } else if (id == 4) { - return ; - } - }; - - const selectRenderModal = (id) => { - if (id == 1) { - return ( - - ); - } else if (id == 2) { - return ( - - ); - } else if (id == 3) { - return ( - - ); - } else if (id == 4) { - return ( - - ); - } - }; - - return ( - - {selectRenderModal(faq.id)} - { - setModalVisible(!modalVisible); - }} - > - - {renderSVGIcon(faq.id)} - - {faq.description} - - - - - ); -} diff --git a/app/src/components/FaqCard/styles.js b/app/src/components/FaqCard/styles.js deleted file mode 100644 index 44b3140c3..000000000 --- a/app/src/components/FaqCard/styles.js +++ /dev/null @@ -1,40 +0,0 @@ -import { StyleSheet } from 'react-native'; - -import colors from '../../../assets/styles/colorVariables'; - -export default StyleSheet.create({ - cardContainer: { - shadowColor: '#000', - shadowOffset: { - width: 0, - height: 1, - }, - shadowOpacity: 0.2, - shadowRadius: 1.41, - - elevation: 2, - - backgroundColor: colors.light, - borderRadius: 8, - borderWidth: 2, - borderColor: colors.primary, - margin: 8, - - flexDirection: 'row', - justifyContent: 'center', - padding: 20, - width: '45%', - }, - - info: { - alignItems: 'center', - }, - - title: { - fontSize: 12, - marginTop: 10, - fontWeight: 'bold', - color: colors.primary, - textAlign: 'center', - }, -}); From 12b950cf3b2fd3251cb7215322d1af20beb5eb0c Mon Sep 17 00:00:00 2001 From: sudjoao Date: Wed, 31 May 2023 06:42:53 -0300 Subject: [PATCH 3/6] chore: fix lint --- app/src/components/FAQModals/modal.jsx | 6 ++- .../atoms/SliderDescription/index.jsx | 18 +++---- .../components/atoms/SliderTitle/index.jsx | 18 +++---- .../molecules/TutorialCard/index.jsx | 39 ++++++++++----- .../organisms/SliderModal/index.jsx | 50 ++++++++++--------- app/src/docs/FAQ/faqOptions.jsx | 49 ++++++++++++++---- app/src/pages/InformationsCenter/index.jsx | 32 ++++++++---- app/src/utils/getSliderBody.jsx | 22 ++++---- 8 files changed, 148 insertions(+), 86 deletions(-) diff --git a/app/src/components/FAQModals/modal.jsx b/app/src/components/FAQModals/modal.jsx index e2dfae6d6..34023d3fa 100644 --- a/app/src/components/FAQModals/modal.jsx +++ b/app/src/components/FAQModals/modal.jsx @@ -4,7 +4,6 @@ import styles from './styles'; import { FloatingIconButton } from '../molecules/FloatingIconButton'; export const ModalComponent = (props) => { - return ( { {props.list.map((numbers) => { return ( - {numbers.number} + + {' '} + {numbers.number}{' '} + {' '} {numbers.description}{' '} diff --git a/app/src/components/atoms/SliderDescription/index.jsx b/app/src/components/atoms/SliderDescription/index.jsx index 5896d5edb..039e0d0a4 100644 --- a/app/src/components/atoms/SliderDescription/index.jsx +++ b/app/src/components/atoms/SliderDescription/index.jsx @@ -1,10 +1,10 @@ -import React from 'react' -import { Text } from 'react-native' +import React from 'react'; +import { Text } from 'react-native'; -export const SliderDescription = ({description}) => { - return ( - - {description} - - ) -} +export const SliderDescription = ({ description }) => { + return ( + + {description} + + ); +}; diff --git a/app/src/components/atoms/SliderTitle/index.jsx b/app/src/components/atoms/SliderTitle/index.jsx index 72581537a..e396da109 100644 --- a/app/src/components/atoms/SliderTitle/index.jsx +++ b/app/src/components/atoms/SliderTitle/index.jsx @@ -1,10 +1,10 @@ -import React from 'react' -import { Text } from 'react-native' +import React from 'react'; +import { Text } from 'react-native'; -export const SliderTitle = ({title}) => { - return ( - - {title} - - ) -} +export const SliderTitle = ({ title }) => { + return ( + + {title} + + ); +}; diff --git a/app/src/components/molecules/TutorialCard/index.jsx b/app/src/components/molecules/TutorialCard/index.jsx index 82358a67a..5cd6d4525 100644 --- a/app/src/components/molecules/TutorialCard/index.jsx +++ b/app/src/components/molecules/TutorialCard/index.jsx @@ -1,23 +1,38 @@ -import React from 'react' -import { Image, Pressable, Text, View } from 'react-native' -import tailwindConfig from '../../../../tailwind.config' -export const TutorialCard = ({ title, description, onPress, margin = '', leftAligment = true }) => { - const flexRow = leftAligment ? 'flex-row' : 'flex-row-reverse' +import React from 'react'; +import { Image, Pressable, Text, View } from 'react-native'; +import tailwindConfig from '../../../../tailwind.config'; +export const TutorialCard = ({ + title, + description, + onPress, + margin = '', + leftAligment = true, +}) => { + const flexRow = leftAligment ? 'flex-row' : 'flex-row-reverse'; return ( - - {title} - {description} + + + {title} + + + {description} + - ) -} + ); +}; diff --git a/app/src/components/organisms/SliderModal/index.jsx b/app/src/components/organisms/SliderModal/index.jsx index c2b1bd55b..b0df65492 100644 --- a/app/src/components/organisms/SliderModal/index.jsx +++ b/app/src/components/organisms/SliderModal/index.jsx @@ -1,26 +1,30 @@ -import React from 'react' -import { Modal, Pressable, Text } from 'react-native' -import Onboarding from 'react-native-onboarding-swiper' +import React from 'react'; +import { Modal, Pressable, Text } from 'react-native'; +import Onboarding from 'react-native-onboarding-swiper'; export const SliderModal = ({ pages, visible, closeModal }) => { - const textButton = ({ onPress, nextLabel, skipLabel }) => ( - - {nextLabel || skipLabel} - - ) + const textButton = ({ onPress, nextLabel, skipLabel }) => ( + + + {nextLabel || skipLabel} + + + ); - return ( - - textButton({ nextLabel: 'Finalizar', ...props })} - /> - - ) -} + return ( + + + textButton({ nextLabel: 'Finalizar', ...props }) + } + /> + + ); +}; diff --git a/app/src/docs/FAQ/faqOptions.jsx b/app/src/docs/FAQ/faqOptions.jsx index db2a0d0fc..4a21c5262 100644 --- a/app/src/docs/FAQ/faqOptions.jsx +++ b/app/src/docs/FAQ/faqOptions.jsx @@ -4,27 +4,54 @@ const faqOptions = [ { id: 1, title: 'Como criar um pedido oferta ou campanha?', - description: 'Não sabe como criar um pedido oferta ou campanha? Clique aqui para entender melhor como fazer.', + description: + 'Não sabe como criar um pedido oferta ou campanha? Clique aqui para entender melhor como fazer.', pages: [ - getSliderBody(1, 'Entrar na página de pedidos e ofertas', 'Clique no ícone "Menu" para abrir a navegação e selecione a aba "Meus Pedidos e Ofertas.'), - getSliderBody(2, 'Entrar na aba de meus pedidos ou minhas ofertas', 'Se você quer criar um pedido, deve entrar na aba de meu pedidos, caso queria uma oferta, na aba de ofertas.'), - getSliderBody(3, 'Clicar no botão de criação e preencher os dados', 'Por fim, basta você clicar no botão Criar Oferta / pedido e preencher todos os dados requisitados.'), - ] + getSliderBody( + 1, + 'Entrar na página de pedidos e ofertas', + 'Clique no ícone "Menu" para abrir a navegação e selecione a aba "Meus Pedidos e Ofertas.', + ), + getSliderBody( + 2, + 'Entrar na aba de meus pedidos ou minhas ofertas', + 'Se você quer criar um pedido, deve entrar na aba de meu pedidos, caso queria uma oferta, na aba de ofertas.', + ), + getSliderBody( + 3, + 'Clicar no botão de criação e preencher os dados', + 'Por fim, basta você clicar no botão Criar Oferta / pedido e preencher todos os dados requisitados.', + ), + ], }, { id: 2, title: 'Como interagir com um pedido, oferta ou campanha?', - description: 'Está com dúvidas em como interagir com um pedido oferta ou campanha? Clique aqui para entender melhor como fazer.', + description: + 'Está com dúvidas em como interagir com um pedido oferta ou campanha? Clique aqui para entender melhor como fazer.', pages: [ - getSliderBody(1, 'Entrar na página Mapa', 'Clique no ícone "Menu" para abrir a navegação e selecione a aba "Mapa"'), - getSliderBody(2, 'Procurar pedido, oferta ou camapanha', 'No mapa aparecerão alguns marcadores indicando pedidos, campanhas e ofertas, além de uma lista inferior com esses pedidos.'), - getSliderBody(3, 'Clicar no pedido, oferta ou campanha', 'Clique no marcador ou na lista inferior para abrir a página do pedido, oferta ou campanha.'), - ] + getSliderBody( + 1, + 'Entrar na página Mapa', + 'Clique no ícone "Menu" para abrir a navegação e selecione a aba "Mapa"', + ), + getSliderBody( + 2, + 'Procurar pedido, oferta ou camapanha', + 'No mapa aparecerão alguns marcadores indicando pedidos, campanhas e ofertas, além de uma lista inferior com esses pedidos.', + ), + getSliderBody( + 3, + 'Clicar no pedido, oferta ou campanha', + 'Clique no marcador ou na lista inferior para abrir a página do pedido, oferta ou campanha.', + ), + ], }, { id: 3, title: 'Contatos Importantes', - description: 'Não sabe como criar um pedido oferta ou campanha? Clique aqui para entender melhor como fazer.', + description: + 'Não sabe como criar um pedido oferta ou campanha? Clique aqui para entender melhor como fazer.', emergencyModal: true, }, ]; diff --git a/app/src/pages/InformationsCenter/index.jsx b/app/src/pages/InformationsCenter/index.jsx index 60f556af0..4e3608306 100644 --- a/app/src/pages/InformationsCenter/index.jsx +++ b/app/src/pages/InformationsCenter/index.jsx @@ -6,27 +6,41 @@ import { SliderModal } from '../../components/organisms/SliderModal'; import EmergencyNumbers from '../../components/FAQModals/EmergencyNumbersModal'; export default function InformationsCenter() { - const [pages, setPages] = useState([]) - const [modalVisible, setModalVisible] = useState(false) - const [emergencyNumbersVisible, setEmergencyNumbersVisible] = useState(false) + const [pages, setPages] = useState([]); + const [modalVisible, setModalVisible] = useState(false); + const [emergencyNumbersVisible, setEmergencyNumbersVisible] = + useState(false); const handleShowModal = (id) => { const selectedPages = faqOption[id].pages; setPages(selectedPages); setModalVisible(true); - } + }; return ( - - setModalVisible(false)} /> - + + setModalVisible(false)} + /> + {faqOption.map((faq, i) => ( { faq.emergencyModal ? setEmergencyNumbersVisible(true) : handleShowModal(i) }} /> + onPress={() => { + faq.emergencyModal + ? setEmergencyNumbersVisible(true) + : handleShowModal(i); + }} + /> ))} ); diff --git a/app/src/utils/getSliderBody.jsx b/app/src/utils/getSliderBody.jsx index 7b74bfe81..2286b419e 100644 --- a/app/src/utils/getSliderBody.jsx +++ b/app/src/utils/getSliderBody.jsx @@ -1,21 +1,21 @@ -import Step1 from '../../assets/images/TutorialImages/Step1.svg' -import Step2 from '../../assets/images/TutorialImages/Step2.svg' -import Step3 from '../../assets/images/TutorialImages/Step3.svg' -import colors from '../../assets/styles/colorVariables' -import { SliderDescription } from '../components/atoms/SliderDescription' -import { SliderTitle } from '../components/atoms/SliderTitle' +import Step1 from '../../assets/images/TutorialImages/Step1.svg'; +import Step2 from '../../assets/images/TutorialImages/Step2.svg'; +import Step3 from '../../assets/images/TutorialImages/Step3.svg'; +import colors from '../../assets/styles/colorVariables'; +import { SliderDescription } from '../components/atoms/SliderDescription'; +import { SliderTitle } from '../components/atoms/SliderTitle'; export const getSliderBody = (index, title, subtitle) => { const stepImages = { 1: , 2: , 3: , - } - const image = stepImages[index] - return ({ + }; + const image = stepImages[index]; + return { backgroundColor: colors.light, image, title: , subtitle: , - }) -} \ No newline at end of file + }; +}; From 3eff17743a0cf57f5c345aa222cd1268d8312354 Mon Sep 17 00:00:00 2001 From: sudjoao Date: Sat, 3 Jun 2023 13:17:10 -0300 Subject: [PATCH 4/6] chore: fix lint --- app/src/pages/InformationsCenter/index.jsx | 2 +- app/src/utils/getSliderBody.jsx | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/app/src/pages/InformationsCenter/index.jsx b/app/src/pages/InformationsCenter/index.jsx index 4e3608306..3c0cbaf8b 100644 --- a/app/src/pages/InformationsCenter/index.jsx +++ b/app/src/pages/InformationsCenter/index.jsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { View, Text } from 'react-native'; +import { View } from 'react-native'; import faqOption from '../../docs/FAQ/faqOptions'; import { TutorialCard } from '../../components/molecules/TutorialCard'; import { SliderModal } from '../../components/organisms/SliderModal'; diff --git a/app/src/utils/getSliderBody.jsx b/app/src/utils/getSliderBody.jsx index 2286b419e..4a5b53c5d 100644 --- a/app/src/utils/getSliderBody.jsx +++ b/app/src/utils/getSliderBody.jsx @@ -1,3 +1,4 @@ +import React from 'react'; import Step1 from '../../assets/images/TutorialImages/Step1.svg'; import Step2 from '../../assets/images/TutorialImages/Step2.svg'; import Step3 from '../../assets/images/TutorialImages/Step3.svg'; From 97686ea51a3981ec78cb3bbce113310b78f4e73c Mon Sep 17 00:00:00 2001 From: sudjoao Date: Sat, 8 Jul 2023 08:06:53 -0300 Subject: [PATCH 5/6] chore: applying review comments changes --- app/src/components/molecules/TutorialCard/index.jsx | 12 +++++------- app/src/docs/FAQ/faqOptions.jsx | 2 +- 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/app/src/components/molecules/TutorialCard/index.jsx b/app/src/components/molecules/TutorialCard/index.jsx index 5cd6d4525..1090e3301 100644 --- a/app/src/components/molecules/TutorialCard/index.jsx +++ b/app/src/components/molecules/TutorialCard/index.jsx @@ -1,6 +1,7 @@ import React from 'react'; import { Image, Pressable, Text, View } from 'react-native'; -import tailwindConfig from '../../../../tailwind.config'; +import colors from '../../../../colors'; + export const TutorialCard = ({ title, description, @@ -12,7 +13,7 @@ export const TutorialCard = ({ return ( - + {title} - + {description} diff --git a/app/src/docs/FAQ/faqOptions.jsx b/app/src/docs/FAQ/faqOptions.jsx index 4a21c5262..ee4f896a0 100644 --- a/app/src/docs/FAQ/faqOptions.jsx +++ b/app/src/docs/FAQ/faqOptions.jsx @@ -37,7 +37,7 @@ const faqOptions = [ ), getSliderBody( 2, - 'Procurar pedido, oferta ou camapanha', + 'Procurar pedido, oferta ou campanha', 'No mapa aparecerão alguns marcadores indicando pedidos, campanhas e ofertas, além de uma lista inferior com esses pedidos.', ), getSliderBody( From b442fe5b8aa6b4e05cb1cbb641c0a46e2beafa1c Mon Sep 17 00:00:00 2001 From: sudjoao Date: Sat, 8 Jul 2023 18:09:04 -0300 Subject: [PATCH 6/6] chore: change faq text --- app/src/docs/FAQ/faqOptions.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/src/docs/FAQ/faqOptions.jsx b/app/src/docs/FAQ/faqOptions.jsx index ee4f896a0..e0785300f 100644 --- a/app/src/docs/FAQ/faqOptions.jsx +++ b/app/src/docs/FAQ/faqOptions.jsx @@ -51,7 +51,7 @@ const faqOptions = [ id: 3, title: 'Contatos Importantes', description: - 'Não sabe como criar um pedido oferta ou campanha? Clique aqui para entender melhor como fazer.', + 'Lista dos principais contatos que você pode utilizar em uma situação de emergência.', emergencyModal: true, }, ];