From b33cf1d415b8a1a84ebade8f4c66dda364f8059d Mon Sep 17 00:00:00 2001 From: Bruno Lopes Date: Tue, 7 Jun 2022 15:21:50 -0300 Subject: [PATCH 01/17] ta indo --- manifest.json | 5 +- messages/context.json | 2 + messages/en.json | 2 + react/components/RequestOrganizationForm.tsx | 766 +++++++++++++----- react/components/utils/api.ts | 10 + react/components/utils/messages.ts | 6 + react/package.json | 1 + react/styles.global.css | 207 +++++ react/yarn.lock | 24 +- .../configuration.json | 50 -- 10 files changed, 814 insertions(+), 259 deletions(-) create mode 100644 react/components/utils/api.ts delete mode 100644 vtex.storefront-permissions/configuration.json diff --git a/manifest.json b/manifest.json index b68ff5be..45a3f060 100644 --- a/manifest.json +++ b/manifest.json @@ -1,6 +1,6 @@ { "name": "b2b-organizations", - "vendor": "vtex", + "vendor": "hppardis", "version": "1.9.0", "title": "B2B Organizations", "description": "App to create and manage B2B Organizations and Cost Centers", @@ -27,8 +27,7 @@ "admin": "0.x", "messages": "1.x", "docs": "0.x", - "store": "0.x", - "vtex.storefront-permissions": "1.x" + "store": "0.x" }, "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema" } diff --git a/messages/context.json b/messages/context.json index 3ef1668d..45815fdd 100644 --- a/messages/context.json +++ b/messages/context.json @@ -144,6 +144,8 @@ "store/b2b-organizations.request-new-organization.first-name.label": "store/b2b-organizations.request-new-organization.first-name.label", "store/b2b-organizations.request-new-organization.last-name.label": "store/b2b-organizations.request-new-organization.last-name.label", "store/b2b-organizations.request-new-organization.email.label": "store/b2b-organizations.request-new-organization.email.label", + "store/b2b-organizations.request-new-organization.cpf.label": "store/b2b-organizations.request-new-organization.cpf.label", + "store/b2b-organizations.request-new-organization.telephone.label": "store/b2b-organizations.request-new-organization.telephone.label", "store/b2b-organizations.request-new-organization.default-cost-center.title": "store/b2b-organizations.request-new-organization.default-cost-center.title", "store/b2b-organizations.request-new-organization.default-cost-center-name.label": "store/b2b-organizations.request-new-organization.default-cost-center-name.label", "store/b2b-organizations.request-new-organization.submit-button.label": "store/b2b-organizations.request-new-organization.submit-button.label", diff --git a/messages/en.json b/messages/en.json index 63a99a8a..5ba59d49 100644 --- a/messages/en.json +++ b/messages/en.json @@ -144,6 +144,8 @@ "store/b2b-organizations.request-new-organization.first-name.label": "First Name", "store/b2b-organizations.request-new-organization.last-name.label": "Last Name", "store/b2b-organizations.request-new-organization.email.label": "Email Address", + "store/b2b-organizations.request-new-organization.cpf.label": "CPF", + "store/b2b-organizations.request-new-organization.telephone.label": "Cellphone", "store/b2b-organizations.request-new-organization.default-cost-center.title": "Default Cost Center", "store/b2b-organizations.request-new-organization.default-cost-center-name.label": "Cost Center Name", "store/b2b-organizations.request-new-organization.submit-button.label": "Submit", diff --git a/react/components/RequestOrganizationForm.tsx b/react/components/RequestOrganizationForm.tsx index 38bf3911..e796207e 100644 --- a/react/components/RequestOrganizationForm.tsx +++ b/react/components/RequestOrganizationForm.tsx @@ -5,10 +5,11 @@ import { Button, ToastContext, Layout, - PageHeader, PageBlock, Alert, Spinner, + Dropdown, + Checkbox } from 'vtex.styleguide' import { AddressRules, @@ -34,11 +35,16 @@ import CREATE_ORGANIZATION_REQUEST from '../graphql/createOrganizationRequest.gr import GET_ORGANIZATION_REQUEST from '../graphql/getOrganizationRequest.graphql' import GET_LOGISTICS from '../graphql/getLogistics.graphql' +import api from './utils/api' + +import '../styles.global.css' + const localStore = storageFactory(() => localStorage) let requestId = localStore.getItem('b2b-organizations_orgRequestId') ?? '' const useSessionResponse = () => { const [session, setSession] = useState() + const sessionPromise = getSession() useEffect(() => { @@ -84,6 +90,8 @@ const RequestOrganizationForm: FC = () => { culture: { country }, } = useRuntime() + const [permission, setPermission] = useState(false) + const { showToast } = useContext(ToastContext) const sessionResponse: any = useSessionResponse() const handles = useCssHandles(CSS_HANDLES) @@ -96,6 +104,10 @@ const RequestOrganizationForm: FC = () => { } ) + const [loadFunc, setLoadFunc] = useState(false) + const [lockFunc, setLockFunc] = useState(true) + + const [createOrganizationRequest] = useMutation(CREATE_ORGANIZATION_REQUEST) const [addressState, setAddressState] = useState(() => @@ -104,9 +116,18 @@ const RequestOrganizationForm: FC = () => { const formStateModel = { organizationName: '', + organizationType: '', + organizationPublic: '', + organizationIE: '', + organizationICMS: false, + organizationArea: '', + organizationPhone: '', + newsletter: false, firstName: '', lastName: '', email: '', + cpf: '', + telephone: '', defaultCostCenterName: '', businessDocument: '', isSubmitting: false, @@ -151,7 +172,50 @@ const RequestOrganizationForm: FC = () => { })) } + const handleSefazApi = (cnpj: string) => { + console.log("call sefaz before validate") + if (cnpj.length == 18) { + cnpj = cnpj.replace(".", "").replace(".", "").replace("/", "").replace("-", "") + } + if (cnpj.length == 14) { + console.log("call sefaz after validate") + //insert loading here + setLoadFunc(true) + api.post('/receita-federal/cnpj', { + cnpj: cnpj + }).then((data: any) => { + //input all camps + + //unlock unseen inputs + setLockFunc(false) + + //remove loading here + setLoadFunc(false) + + console.log(data?.data) + + if (data?.data?.code == 200) { + + console.log(data?.data?.data) + setFormState({ + ...formState, + businessDocument: data?.data?.data[0]?.cnpj, + organizationName: data?.data?.data[0]?.razao_social, + + }) + return data?.data + } + }).catch((err) => { + //remove loading here + setLoadFunc(false) + + console.error(err) + }) + } + } + const handleAddressChange = (changedAddress: AddressFormFields) => { + console.log(changedAddress) const curAddress = addressState const newAddress = { ...curAddress, ...changedAddress } @@ -181,9 +245,18 @@ const RequestOrganizationForm: FC = () => { firstName: formState.firstName, lastName: formState.lastName, email: formState.email, + cpf: formState.cpf, + telephone: formState.telephone }, defaultCostCenter: { - name: formState.defaultCostCenterName, + name: formState.organizationName, + type: formState.organizationType, + public: formState.organizationPublic, + ie: formState.organizationIE, + icms: formState.organizationICMS, + area: formState.organizationArea, + phone: formState.organizationPhone, + newsletter: formState.newsletter, address: { addressId: addressState.addressId.value, addressType: addressState.addressType.value, @@ -254,10 +327,17 @@ const RequestOrganizationForm: FC = () => { +
+

+ Cadastre sua empresa e tenha acesso a benefícios exclusivos. +

+

+ Preencha o formulário abaixo para ter acesso ao nosso catálogo e realizar suas compras em nosso site. +

+

+ Seu cadastro passará por uma análise e você receberá o retorno em até 24 horas úteis. +

+
} > {loading ? ( @@ -277,215 +357,489 @@ const RequestOrganizationForm: FC = () => { {existingRequestData.getOrganizationRequestById.status === 'pending' && ( - -
- - - -
- - - )} + +
+ + + +
+ + + )} {existingRequestData.getOrganizationRequestById.status === 'approved' && ( - -
- - - -
- - - )} + +
+ + + +
+ + + )} {existingRequestData.getOrganizationRequestById.status === 'declined' && ( - -
- - - -
- - - )} + +
+ + + +
+ + + )} ) : ( - -
- ) => { - setFormState({ - ...formState, - organizationName: e.target.value, - }) - }} - required - /> -
- - -
- ) => { - setFormState({ - ...formState, - firstName: e.target.value, - }) - }} - /> -
-
- ) => { - setFormState({ - ...formState, - lastName: e.target.value, - }) - }} - /> -
-
- ) => { - setFormState({ - ...formState, - email: e.target.value, - }) - }} - /> -
- - -
+ - ) => { - setFormState({ - ...formState, - defaultCostCenterName: e.target.value, - }) - }} - /> -
-
- ) => { - setFormState({ - ...formState, - businessDocument: e.target.value, - }) - }} - /> -
-
- - - +
- +
+ ) => { + setFormState({ + ...formState, + firstName: e.target.value, + }) + }} + /> +
+
+ ) => { + setFormState({ + ...formState, + lastName: e.target.value, + }) + }} + /> +
+
+
+ ) => { + setFormState({ + ...formState, + email: e.target.value, + }) + }} + /> +
+
- + ) => { + setFormState({ + ...formState, + cpf: e.target.value, + }) + }} /> - - -
-
+
+ ) => { + setFormState({ + ...formState, + telephone: e.target.value, + }) + }} + /> +
+
+ + -
+ +
+
+ ) => { + setFormState({ + ...formState, + businessDocument: e.target.value, + }) + }} + /> +
+ +
+
+ {!lockFunc ? + <> +
+ +
+ { + setFormState({ + ...formState, + organizationPublic: value, + }) + }} + required + /> +
+
+
+
+ +
+ { + setFormState({ + ...formState, + organizationType: value, + }) + }} + required + /> +
+
+
+ +
+ ) => { + setFormState({ + ...formState, + organizationName: e.target.value, + }) + }} + required + /> +
+
+ ) => { + setFormState({ + ...formState, + organizationIE: e.target.value, + }) + }} + required + /> + { + formState.organizationIE == "Isento" ? + setFormState({ + ...formState, + organizationIE: "", + }) + : setFormState({ + ...formState, + organizationIE: "Isento", + }) + }} + /> +
+ +
+ +
+ { + setFormState({ + ...formState, + organizationICMS: true, + }) + }} + value="option-0" + /> + { + setFormState({ + ...formState, + organizationICMS: false, + }) + }} + value="option-0" + /> +
+
+ +
+ { + setFormState({ + ...formState, + organizationType: value, + }) + }} + required + /> +
+
+ +
+ ) => { + setFormState({ + ...formState, + organizationPhone: e.target.value, + }) + }} + required + /> +
+
+
+ + : null + } +
+
+
+
+
+
+ + {!lockFunc ? + <> + +
+ + + + + + + + + +
+ + + + +
+ + +
+ + +
+ { + setFormState({ + ...formState, + newsletter: !formState.newsletter, + }) + + }} + value="option-0" + /> + { + setPermission(!permission) + }} + value="option-0" + /> +
+ + + : null + } +
+
+
+
+ {!lockFunc ? -
+ : null + }
- +
)} diff --git a/react/components/utils/api.ts b/react/components/utils/api.ts new file mode 100644 index 00000000..c1da10b0 --- /dev/null +++ b/react/components/utils/api.ts @@ -0,0 +1,10 @@ +import axios from 'axios'; + +const api = axios.create({ + baseURL: `https://apiv2.motorfiscal.com.br/` +}); +api.defaults.headers.common['Authorization'] = '0KwgmGRYjSxW6CHIv8CJeooWerGkxBaSdhi4zs92NpVJV8mhWd6sYlTwgj8F' +api.defaults.headers.common['Content-Type'] = 'application/json' + +export default api + \ No newline at end of file diff --git a/react/components/utils/messages.ts b/react/components/utils/messages.ts index 7abdfbbb..907de8a1 100644 --- a/react/components/utils/messages.ts +++ b/react/components/utils/messages.ts @@ -225,6 +225,12 @@ export const organizationRequestMessages = defineMessages({ email: { id: `${storePrefix}request-new-organization.email.label`, }, + cpf: { + id: `${storePrefix}request-new-organization.cpf.label`, + }, + telephone: { + id: `${storePrefix}request-new-organization.telephone.label`, + }, defaultCostCenter: { id: `${storePrefix}request-new-organization.default-cost-center.title`, }, diff --git a/react/package.json b/react/package.json index 69603245..74fbadeb 100644 --- a/react/package.json +++ b/react/package.json @@ -34,6 +34,7 @@ "@vtex/admin-ui": "^0.114.3", "@vtex/css-handles": "^1.0.0", "apollo-client": "^2.6.10", + "axios": "^0.27.2", "react": "^16.9.2", "react-apollo": "^3.1.5", "react-intl": "^5.13.4", diff --git a/react/styles.global.css b/react/styles.global.css index 50ffce56..61133deb 100644 --- a/react/styles.global.css +++ b/react/styles.global.css @@ -6,3 +6,210 @@ body, .render-provider { height: 100%; } + + + +.customb2b-pageHeader{ + display: block; + margin: 150px auto 30px; + max-width: 586px; +} + +.customb2b-pageHeader h1{ + text-align: center; + font: normal normal medium 38px/46px Poppins; + letter-spacing: 0px; + color: #CC083C; + margin: 10px 0; +} +.customb2b-pageHeader h3{ + text-align: center; + font: normal normal normal 14px/18px Poppins; + letter-spacing: 0px; + color: #CC083C; + opacity: 1; + margin: 10px 0; + +} +.customb2b-pageHeader h4{ + text-align: center; + font: normal normal normal 12px/16px Poppins; + letter-spacing: 0px; + color: #4F575C; + opacity: 1; + margin: 0; +} + +.customb2b-pageBody{ + background: #FAFAFA 0% 0% no-repeat padding-box; + border-radius: 6px; + padding: 30px 30px; + max-width: 586px; + margin: auto; +} + +.customb2b-pageBody *:not(input):not(select):not(.vtex-checkbox__box):not(.vtex-checkbox__box-wrapper):not(.vtex-checkbox__container):not(.vtex-checkbox__inner-container):not(.vtex-dropdown__button):not(.vtex-dropdown__container){ + background: transparent; + border: 0; + margin: 0; + padding: 0; +} + +.customb2b-pageBody *{ + font: normal normal normal 13px/18px Poppins; +} + +.customb2b-pageBody input:not([type=checkbox]),select,.vtex-dropdown__container{ + background: #fff !important; + border-radius: 2px !important; + border: 1px solid #eee !important; + height: 38px !important; +} + +.styleguide__layout.bg-muted-5{ + background-color: transparent !important; +} + +.customb2b-pageBody .styleguide__pageBlock{ + padding: 10px 0 20px; +} + +.customb2b-pageBody .styleguide__pageBlock div h2{ + width: 100%; + font: normal normal 600 16px/35px Poppins; + letter-spacing: 0px; + color: #12576E; + margin: 0; +} + +.customb2b-pageBody .styleguide__pageBlock div h2 + div{ + width: 100%; + font: normal normal normal 12px/14px Poppins; + letter-spacing: 0px; + color: #4F575C; + margin: 0; +} + +.customb2b-pageBody .styleguide__pageBlock div.styleguide__box{ + padding: 20px 0 25px; +} + + +.customb2b-pageBody .form-group-flex{ + display: flex; + gap: 20px; + width: 100%; +} + +.customb2b-pageBody .form-group-flex button{ + max-width: 150px; + background-color: #CC083C !important; + color: #fff; + height: 38px; + margin-top: auto !important; + margin-right: auto; + width: 100%; + font: normal normal normal 13px/18px Poppins; + text-transform: capitalize; + +} + +.customb2b-pageBody .form-group-flex > div{ + width: 100%; +} + +/* Form geral */ + +.customb2b-pageBody .hppardis-b2b-organizations-1-x-newOrganizationInput input{ + margin-top: 10px !important; +} + +.customb2b-pageBody .hppardis-b2b-organizations-1-x-newOrganizationInput span{ + margin-top: 5px !important; + font: normal normal normal 13px/18px Poppins; + color: #111; +} + +/* Form empresa */ + +.customb2b-pageBody .vtex-dropdown .vtex-dropdown__container{ + margin-top: 10px !important; +} + +.customb2b-pageBody .vtex-dropdown span{ + margin-top: 5px !important; + font: normal normal normal 13px/18px Poppins; + color: #111; +} +.customb2b-pageBody .ie-flex{ + display: flex; + gap: 20px; + flex-direction: row; +} +.customb2b-pageBody .ie-flex .vtex-checkbox__line-container{ + height: 38px; + margin-top: auto !important; + justify-content: center; + align-items: center; +} + +.customb2b-pageBody .icms-flex > div .vtex-checkbox__line-container{ + height: 30px; + margin-top: 10px !important; + justify-content: center; + align-items: center; +} +.customb2b-pageBody .icms-flex > div { + display: flex; + flex-direction: row; + gap: 20px; +} + +.customb2b-pageBody .icms-flex > label { + margin-top: 5px !important; + display: block; +} + +/* Form Adress */ +.customb2b-pageBody .vtex-address-form__country{ + display: none; +} +.customb2b-pageBody .vtex-address-form__postalCode{ + width: 50%; + min-width: 283px; +} + +.customb2b-pageBody .vtex-address-form__postalCode-forgottenURL{ + display: none; +} + +.customb2b-pageBody .vtex-address-form__container{ + display: grid; +} + + + + +/* Documentos anexados */ +.file-button{ + margin-top: 10px !important; + margin-bottom: 20px !important; +} + +.file-button input{ + display: none; +} + +.file-button label{ + color: #12576E !important; + background: #fff !important; + border: 1px solid #12576E !important; + border-radius: 2px; + width: 155px; + height: 38px; + display: flex; + justify-content: center; + align-items: center; + font: normal normal normal 13px/18px Poppins; + cursor: pointer; +} \ No newline at end of file diff --git a/react/yarn.lock b/react/yarn.lock index cd80e013..63765321 100644 --- a/react/yarn.lock +++ b/react/yarn.lock @@ -2113,6 +2113,14 @@ aws4@^1.8.0: resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59" integrity sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA== +axios@^0.27.2: + version "0.27.2" + resolved "https://registry.yarnpkg.com/axios/-/axios-0.27.2.tgz#207658cc8621606e586c85db4b41a750e756d972" + integrity sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ== + dependencies: + follow-redirects "^1.14.9" + form-data "^4.0.0" + babel-jest@^25.5.1: version "25.5.1" resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-25.5.1.tgz#bc2e6101f849d6f6aec09720ffc7bc5332e62853" @@ -2458,7 +2466,7 @@ color-name@~1.1.4: resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2" integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== -combined-stream@^1.0.6, combined-stream@~1.0.6: +combined-stream@^1.0.6, combined-stream@^1.0.8, combined-stream@~1.0.6: version "1.0.8" resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f" integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg== @@ -2948,6 +2956,11 @@ focus-visible@^5.1.0: resolved "https://registry.yarnpkg.com/focus-visible/-/focus-visible-5.2.0.tgz#3a9e41fccf587bd25dcc2ef045508284f0a4d6b3" integrity sha512-Rwix9pBtC1Nuy5wysTmKy+UjbDJpIfg8eHjw0rjZ1mX4GNLz1Bmd16uDpI3Gk1i70Fgcs8Csg2lPm8HULFg9DQ== +follow-redirects@^1.14.9: + version "1.15.0" + resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.0.tgz#06441868281c86d0dda4ad8bdaead2d02dca89d4" + integrity sha512-aExlJShTV4qOUOL7yF1U5tvLCB0xQuudbf6toyYA0E/acBNw71mvjFTnLaRp50aQaYocMR0a/RMMBIHeZnGyjQ== + for-in@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80" @@ -2958,6 +2971,15 @@ forever-agent@~0.6.1: resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91" integrity sha1-+8cfDEGt6zf5bFd60e1C2P2sypE= +form-data@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452" + integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww== + dependencies: + asynckit "^0.4.0" + combined-stream "^1.0.8" + mime-types "^2.1.12" + form-data@~2.3.2: version "2.3.3" resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.3.tgz#dcce52c05f644f298c6a7ab936bd724ceffbf3a6" diff --git a/vtex.storefront-permissions/configuration.json b/vtex.storefront-permissions/configuration.json deleted file mode 100644 index 6fa6a0b6..00000000 --- a/vtex.storefront-permissions/configuration.json +++ /dev/null @@ -1,50 +0,0 @@ -{ - "name": "B2B Organizations", - "features": [ - { - "label": "Manage My Organization", - "value": "manage-organization", - "roles": ["customer-admin"] - }, - { - "label": "Create and Edit Cost Centers in Same Organization", - "value": "create-cost-center-organization", - "roles": ["customer-admin"] - }, - { - "label": "Add Organization Users to any Cost Center in Same Organization", - "value": "add-users-organization", - "roles": ["customer-admin"] - }, - { - "label": "Remove Organization Users from any Cost Center in Same Organization", - "value": "remove-users-organization", - "roles": ["customer-admin"] - }, - { - "label": "Add Sales Users to any Organization", - "value": "add-sales-users-all", - "roles": ["sales-admin"] - }, - { - "label": "Remove Sales Users from any Organization", - "value": "remove-sales-users-all", - "roles": ["sales-admin"] - }, - { - "label": "Impersonate Organization Users in Same Cost Center", - "value": "impersonate-users-costcenter", - "roles": ["sales-representative"] - }, - { - "label": "Impersonate Organization Users in Same Organization", - "value": "impersonate-users-organization", - "roles": ["customer-admin", "sales-manager"] - }, - { - "label": "Impersonate Organization Users in Any Organization", - "value": "impersonate-users-all", - "roles": ["sales-admin"] - } - ] -} From e5ede4a9512afaa6218c8bd8ea287cac6269eb4c Mon Sep 17 00:00:00 2001 From: Bruno Lopes Date: Thu, 9 Jun 2022 10:17:44 -0300 Subject: [PATCH 02/17] feat: form 99% --- react/components/RequestOrganizationForm.tsx | 31 +++++----- react/styles.global.css | 60 ++++++++++++++++++-- 2 files changed, 68 insertions(+), 23 deletions(-) diff --git a/react/components/RequestOrganizationForm.tsx b/react/components/RequestOrganizationForm.tsx index e796207e..f98d448d 100644 --- a/react/components/RequestOrganizationForm.tsx +++ b/react/components/RequestOrganizationForm.tsx @@ -614,6 +614,7 @@ const RequestOrganizationForm: FC = () => { autocomplete="off" size="large" label={"Razão Social"} + readonly={true} value={formState.organizationName} onChange={(e: React.ChangeEvent) => { setFormState({ @@ -643,9 +644,9 @@ const RequestOrganizationForm: FC = () => { /> { formState.organizationIE == "Isento" ? setFormState({ @@ -741,16 +742,6 @@ const RequestOrganizationForm: FC = () => { : null } -
-
-
-
-
-
{!lockFunc ? <> @@ -804,8 +795,8 @@ const RequestOrganizationForm: FC = () => { > { setFormState({ @@ -814,17 +805,21 @@ const RequestOrganizationForm: FC = () => { }) }} - value="option-0" + value="newsletter" /> + +
{ setPermission(!permission) }} - value="option-0" + value="permission" />
diff --git a/react/styles.global.css b/react/styles.global.css index 61133deb..59783944 100644 --- a/react/styles.global.css +++ b/react/styles.global.css @@ -11,7 +11,7 @@ body, .customb2b-pageHeader{ display: block; - margin: 150px auto 30px; + margin: 10px auto 30px; max-width: 586px; } @@ -59,6 +59,10 @@ body, font: normal normal normal 13px/18px Poppins; } +.customb2b-pageBody .styleguide__pageBlock > div > div h2 + div{ + margin-bottom: 20px o !important; +} + .customb2b-pageBody input:not([type=checkbox]),select,.vtex-dropdown__container{ background: #fff !important; border-radius: 2px !important; @@ -74,6 +78,10 @@ body, padding: 10px 0 20px; } +.customb2b-pageBody .styleguide__pageBlock{ + margin-top: 35px !important; +} + .customb2b-pageBody .styleguide__pageBlock div h2{ width: 100%; font: normal normal 600 16px/35px Poppins; @@ -92,6 +100,9 @@ body, .customb2b-pageBody .styleguide__pageBlock div.styleguide__box{ padding: 20px 0 25px; + display: flex; + flex-direction: column; + gap: 20px; } @@ -120,7 +131,7 @@ body, /* Form geral */ -.customb2b-pageBody .hppardis-b2b-organizations-1-x-newOrganizationInput input{ +.customb2b-pageBody .hppardis-b2b-organizations-1-x-newOrganizationInput input:not([type=checkbox]){ margin-top: 10px !important; } @@ -175,24 +186,63 @@ body, display: none; } .customb2b-pageBody .vtex-address-form__postalCode{ - width: 50%; - min-width: 283px; + width: 253px; + min-width: 253px; } .customb2b-pageBody .vtex-address-form__postalCode-forgottenURL{ display: none; } +.customb2b-pageBody .vtex-address-form__steet{ + grid-area: endereco; +} + +.customb2b-pageBody .vtex-address-form__number{ + grid-area: numero; +} + +.customb2b-pageBody .vtex-address-form__complement{ + grid-area: complemento; +} + +.customb2b-pageBody .vtex-address-form__neighborhood{ + grid-area: bairro; +} + +.customb2b-pageBody .vtex-address-form__city{ + grid-area: cidade; +} + +.customb2b-pageBody .vtex-address-form__state{ + grid-area: estado; +} + +.customb2b-pageBody .vtex-address-form__receiverName{ + grid-area: destinatario; +} + .customb2b-pageBody .vtex-address-form__container{ display: grid; + gap: 15px 20px; + padding-top: 20px !important; + grid-template-areas: "endereco endereco" "numero complemento" "bairro cidade" "estado destinatario"; +} +.customb2b-pageBody .vtex-address-form__container > div label span{ + margin-top: 5px !important; +} +.customb2b-pageBody .vtex-address-form__container > div label > div{ + margin-top: 15px !important; } + + /* Documentos anexados */ .file-button{ - margin-top: 10px !important; + margin-top: 20px !important; margin-bottom: 20px !important; } From 844c71361c25d76f5b5fefa0129e8aef6b0a840c Mon Sep 17 00:00:00 2001 From: Bruno Lopes Date: Tue, 28 Jun 2022 17:36:11 -0300 Subject: [PATCH 03/17] form att --- react/components/RequestOrganizationForm.tsx | 234 +++++++++++++++++-- react/components/utils/api.ts | 3 +- react/styles.global.css | 195 ++++++++++++---- 3 files changed, 360 insertions(+), 72 deletions(-) diff --git a/react/components/RequestOrganizationForm.tsx b/react/components/RequestOrganizationForm.tsx index f98d448d..52fad17d 100644 --- a/react/components/RequestOrganizationForm.tsx +++ b/react/components/RequestOrganizationForm.tsx @@ -35,6 +35,7 @@ import CREATE_ORGANIZATION_REQUEST from '../graphql/createOrganizationRequest.gr import GET_ORGANIZATION_REQUEST from '../graphql/getOrganizationRequest.graphql' import GET_LOGISTICS from '../graphql/getLogistics.graphql' +import axios from 'axios'; import api from './utils/api' import '../styles.global.css' @@ -84,12 +85,49 @@ const CreateNewOrganizationRequest = (props: any) => { ) } +interface ModalMessage { + title: string, + message: string, + buttonText: string, + buttonLink: string, + active: boolean +} + +const ModalOrganizationMessage = (props: any) => { + const settings: ModalMessage = props.settings + return ( + {settings.active ? + + : null} + ) +} + const RequestOrganizationForm: FC = () => { const { formatMessage, formatDate } = useIntl() const { culture: { country }, } = useRuntime() + const [modalSettings, setModalSettings] = useState( + { + title: 'Cadastro enviado!', + message: 'Vamos analisar os dados enviados e liberar o seu cadastro. Aguarde nosso e-mail com mais informações e liberar seu cadastro em até 24 horas. Por enquanto, você já pode comprar itens de USO LIVRE.', + buttonText: 'Voltar para a loja', + buttonLink: '/', + active: false + } + ) + const [permission, setPermission] = useState(false) const { showToast } = useContext(ToastContext) @@ -156,6 +194,7 @@ const RequestOrganizationForm: FC = () => { return formatMessage(message) } + const toastMessage = (message: MessageDescriptor) => { const translatedMessage = translateMessage(message) const action = undefined @@ -186,11 +225,7 @@ const RequestOrganizationForm: FC = () => { }).then((data: any) => { //input all camps - //unlock unseen inputs - setLockFunc(false) - //remove loading here - setLoadFunc(false) console.log(data?.data) @@ -201,21 +236,66 @@ const RequestOrganizationForm: FC = () => { ...formState, businessDocument: data?.data?.data[0]?.cnpj, organizationName: data?.data?.data[0]?.razao_social, - }) - return data?.data + + if (data?.data?.data[0]?.situacao_cadastral === "ATIVA") { + + api.post('/sintegra/unificada', { + cnpj: cnpj, + uf: data?.data?.data[0]?.endereco_uf + }).then((response: any) => { + console.log(response) + if (response?.data?.code != 200) { + setModalSettings({ + title: 'Ocorreu um erro!', + message: `${response?.data?.code_message} Você pode continuar preenchendo os dados no formulário abaixo.`, + buttonText: 'Fechar mensagem', + buttonLink: '', + active: true + }) + } else { + setFormState({ + ...formState, + organizationIE: response?.data?.data[0]?.inscricao_estadual + }) + } + //unlock unseen inputs + setLockFunc(false) + + //remove loading here + setLoadFunc(false) + return [data?.data, response?.data] + + }) + } else { + setModalSettings({ + title: 'Seu CNPJ consta como inativo!', + message: 'Você deverá regularizar sua situação. E em caso de dúvidas, entre em contato com o sac.', + buttonText: 'Voltar para a loja', + buttonLink: '/', + active: true + }) + } + + + } }).catch((err) => { //remove loading here setLoadFunc(false) - + setModalSettings({ + title: 'Erro!', + message: 'Ocorreu um erro ao recuperar os dados do CNPJ informado.', + buttonText: 'Fechar mensagem', + buttonLink: '', + active: true + }) console.error(err) }) } } const handleAddressChange = (changedAddress: AddressFormFields) => { - console.log(changedAddress) const curAddress = addressState const newAddress = { ...curAddress, ...changedAddress } @@ -223,6 +303,15 @@ const RequestOrganizationForm: FC = () => { setAddressState(newAddress) } + function getBase64(file: Blob) { + return new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.readAsDataURL(file); + reader.onload = () => resolve(reader.result); + reader.onerror = error => reject(error); + }); + } + const handleNewOrganizationRequest = () => { localStore.removeItem('b2b-organizations_orgRequestId') setFormState({ @@ -245,18 +334,18 @@ const RequestOrganizationForm: FC = () => { firstName: formState.firstName, lastName: formState.lastName, email: formState.email, - cpf: formState.cpf, - telephone: formState.telephone + // cpf: formState.cpf, + // telephone: formState.telephone }, defaultCostCenter: { name: formState.organizationName, - type: formState.organizationType, - public: formState.organizationPublic, - ie: formState.organizationIE, - icms: formState.organizationICMS, - area: formState.organizationArea, - phone: formState.organizationPhone, - newsletter: formState.newsletter, + // type: formState.organizationType, + // public: formState.organizationPublic, + // ie: formState.organizationIE, + // icms: formState.organizationICMS, + // area: formState.organizationArea, + // phone: formState.organizationPhone, + // newsletter: formState.newsletter, address: { addressId: addressState.addressId.value, addressType: addressState.addressType.value, @@ -277,6 +366,65 @@ const RequestOrganizationForm: FC = () => { }, } + + const options = { + method: 'POST', + url: 'https://hppardis.environment.com.br/api/dataentities/MO/documents', + headers: { Accept: 'application/vnd.vtex.ds.v10+json', 'Content-Type': 'application/json' }, + data: { + name: formState.organizationName, + cnpj: formState.businessDocument, + phone: formState.organizationPhone, + public: formState.organizationPublic, + ie: formState.organizationIE, + icms: formState.organizationICMS, + type: formState.organizationType, + area: formState.organizationArea + } + }; + + axios.request(options).then(function (response) { + console.log(response.data); + var contentfile + + var id = response.data.id + var input = document.querySelector('.file-button > input[type="file"]') as HTMLInputElement; + + if (input != null) { + // 👉️ input has type HTMLInputElement here + var file = input.files + + if (file != null) { + getBase64(file[0]).then( + data => contentfile = data + ); + } + + } + if (contentfile) { + const form = new FormData(); + + form.append('file', `${contentfile}`) + + const options = { + method: 'POST', + url: `https://hppardis.environment.com.br/api/dataentities/MO/documents/${id}/arquivo/attachments`, + headers: { 'Content-Type': 'multipart/form-data; boundary=---011000010111000001101001' }, + data: '[form]' + }; + + axios.request(options).then(function (res) { + console.log(res.data); + }).catch(function (error) { + console.error(error); + }); + } + + }).catch(function (error) { + console.error(error); + }); + + createOrganizationRequest({ variables: { input: organizationRequest, @@ -285,18 +433,33 @@ const RequestOrganizationForm: FC = () => { .then(response => { const statusRequest = response.data.createOrganizationRequest.status + if (statusRequest === 'pending') { toastMessage(messages.toastPending) setFormState({ ...formState, isSubmitting: false, }) + setModalSettings({ + title: 'Cadastro pendente!', + message: 'Estamos analisando os dados enviados e após isso vamos liberar o seu cadastro. Aguarde nosso e-mail com mais informações e liberar seu cadastro em até 24 horas. Por enquanto, você já pode comprar itens de USO LIVRE.', + buttonText: 'Voltar para a loja', + buttonLink: '/', + active: true + }) } else if (statusRequest === 'approved') { toastMessage(messages.toastApproved) setFormState({ ...formState, isSubmitting: false, }) + setModalSettings({ + title: 'Cadastro Aprovado!', + message: '', + buttonText: 'Voltar para a loja', + buttonLink: '/', + active: true + }) } else { requestId = response.data.createOrganizationRequest.id localStore.setItem('b2b-organizations_orgRequestId', requestId) @@ -308,6 +471,14 @@ const RequestOrganizationForm: FC = () => { isSubmitting: false, submitted: true, }) + setModalSettings({ + title: 'Cadastro enviado!', + message: 'Vamos analisar os dados enviados e liberar o seu cadastro. Aguarde nosso e-mail com mais informações e liberar seu cadastro em até 24 horas. Por enquanto, você já pode comprar itens de USO LIVRE.', + buttonText: 'Voltar para a loja', + buttonLink: '/', + active: true + }) + } }) .catch(error => { @@ -620,6 +791,7 @@ const RequestOrganizationForm: FC = () => { setFormState({ ...formState, organizationName: e.target.value, + defaultCostCenterName: e.target.value, }) }} required @@ -702,12 +874,17 @@ const RequestOrganizationForm: FC = () => { size="large" label={"Área de atuação"} options={[ - { value: 'Option One', label: 'Option One' }, - { value: 'Option Two', label: 'Option Two' }, - { value: 'Option Three', label: 'Option Three' }, - { value: 'Option Four', label: 'Option Four' }, + { value: 'Clínica Médica', label: 'Clínica Médica' }, + { value: 'Clínica Odontológica', label: 'Clínica Odontológica' }, + { value: 'Estética', label: 'Estética' }, + { value: 'Farmácia', label: 'Farmácia' }, + { value: 'Hospital', label: 'Hospital' }, + { value: 'Laboratório de Análises', label: 'Laboratório de Análises' }, + { value: 'Instituição de Ensino', label: 'Instituição de Ensino' }, + { value: 'Veterinária & Pet', label: 'Veterinária & Pet' }, + { value: 'Outros', label: 'Outros' } ]} - value={'Option One'} + value={formState.organizationType} onChange={(__: any, value: string) => { setFormState({ ...formState, @@ -843,12 +1020,12 @@ const RequestOrganizationForm: FC = () => { }} disabled={ !formState.organizationName || - !formState.defaultCostCenterName || !formState.firstName || !formState.lastName || !validateEmail(formState.email) || !isValidAddress(addressState) || - !permission + !permission || + !formState.isSubmitting } > Enviar Cadastro @@ -863,6 +1040,15 @@ const RequestOrganizationForm: FC = () => { )} + { + setModalSettings({ + title: '', + message: '', + buttonLink: '', + buttonText: '', + active: false + }) + }} /> ) } diff --git a/react/components/utils/api.ts b/react/components/utils/api.ts index c1da10b0..5d239398 100644 --- a/react/components/utils/api.ts +++ b/react/components/utils/api.ts @@ -6,5 +6,4 @@ const api = axios.create({ api.defaults.headers.common['Authorization'] = '0KwgmGRYjSxW6CHIv8CJeooWerGkxBaSdhi4zs92NpVJV8mhWd6sYlTwgj8F' api.defaults.headers.common['Content-Type'] = 'application/json' -export default api - \ No newline at end of file +export default api \ No newline at end of file diff --git a/react/styles.global.css b/react/styles.global.css index 59783944..5f26558a 100644 --- a/react/styles.global.css +++ b/react/styles.global.css @@ -9,20 +9,21 @@ body, -.customb2b-pageHeader{ +.customb2b-pageHeader { display: block; margin: 10px auto 30px; max-width: 586px; } -.customb2b-pageHeader h1{ +.customb2b-pageHeader h1 { text-align: center; font: normal normal medium 38px/46px Poppins; letter-spacing: 0px; color: #CC083C; margin: 10px 0; } -.customb2b-pageHeader h3{ + +.customb2b-pageHeader h3 { text-align: center; font: normal normal normal 14px/18px Poppins; letter-spacing: 0px; @@ -31,7 +32,8 @@ body, margin: 10px 0; } -.customb2b-pageHeader h4{ + +.customb2b-pageHeader h4 { text-align: center; font: normal normal normal 12px/16px Poppins; letter-spacing: 0px; @@ -40,7 +42,7 @@ body, margin: 0; } -.customb2b-pageBody{ +.customb2b-pageBody { background: #FAFAFA 0% 0% no-repeat padding-box; border-radius: 6px; padding: 30px 30px; @@ -48,41 +50,43 @@ body, margin: auto; } -.customb2b-pageBody *:not(input):not(select):not(.vtex-checkbox__box):not(.vtex-checkbox__box-wrapper):not(.vtex-checkbox__container):not(.vtex-checkbox__inner-container):not(.vtex-dropdown__button):not(.vtex-dropdown__container){ +.customb2b-pageBody *:not(input):not(select):not(.vtex-checkbox__box):not(.vtex-checkbox__box-wrapper):not(.vtex-checkbox__container):not(.vtex-checkbox__inner-container):not(.vtex-dropdown__button):not(.vtex-dropdown__container) { background: transparent; border: 0; margin: 0; padding: 0; } -.customb2b-pageBody *{ +.customb2b-pageBody * { font: normal normal normal 13px/18px Poppins; } -.customb2b-pageBody .styleguide__pageBlock > div > div h2 + div{ +.customb2b-pageBody .styleguide__pageBlock>div>div h2+div { margin-bottom: 20px o !important; } -.customb2b-pageBody input:not([type=checkbox]),select,.vtex-dropdown__container{ +.customb2b-pageBody input:not([type=checkbox]), +select, +.vtex-dropdown__container { background: #fff !important; border-radius: 2px !important; border: 1px solid #eee !important; height: 38px !important; } -.styleguide__layout.bg-muted-5{ +.styleguide__layout.bg-muted-5 { background-color: transparent !important; } -.customb2b-pageBody .styleguide__pageBlock{ +.customb2b-pageBody .styleguide__pageBlock { padding: 10px 0 20px; } -.customb2b-pageBody .styleguide__pageBlock{ +.customb2b-pageBody .styleguide__pageBlock { margin-top: 35px !important; } -.customb2b-pageBody .styleguide__pageBlock div h2{ +.customb2b-pageBody .styleguide__pageBlock div h2 { width: 100%; font: normal normal 600 16px/35px Poppins; letter-spacing: 0px; @@ -90,7 +94,7 @@ body, margin: 0; } -.customb2b-pageBody .styleguide__pageBlock div h2 + div{ +.customb2b-pageBody .styleguide__pageBlock div h2+div { width: 100%; font: normal normal normal 12px/14px Poppins; letter-spacing: 0px; @@ -98,7 +102,7 @@ body, margin: 0; } -.customb2b-pageBody .styleguide__pageBlock div.styleguide__box{ +.customb2b-pageBody .styleguide__pageBlock div.styleguide__box { padding: 20px 0 25px; display: flex; flex-direction: column; @@ -106,13 +110,13 @@ body, } -.customb2b-pageBody .form-group-flex{ +.customb2b-pageBody .form-group-flex { display: flex; gap: 20px; width: 100%; } -.customb2b-pageBody .form-group-flex button{ +.customb2b-pageBody .form-group-flex button { max-width: 150px; background-color: #CC083C !important; color: #fff; @@ -125,17 +129,17 @@ body, } -.customb2b-pageBody .form-group-flex > div{ +.customb2b-pageBody .form-group-flex>div { width: 100%; } /* Form geral */ -.customb2b-pageBody .hppardis-b2b-organizations-1-x-newOrganizationInput input:not([type=checkbox]){ +.customb2b-pageBody .hppardis-b2b-organizations-1-x-newOrganizationInput input:not([type=checkbox]) { margin-top: 10px !important; } -.customb2b-pageBody .hppardis-b2b-organizations-1-x-newOrganizationInput span{ +.customb2b-pageBody .hppardis-b2b-organizations-1-x-newOrganizationInput span { margin-top: 5px !important; font: normal normal normal 13px/18px Poppins; color: #111; @@ -143,96 +147,102 @@ body, /* Form empresa */ -.customb2b-pageBody .vtex-dropdown .vtex-dropdown__container{ +.customb2b-pageBody .vtex-dropdown .vtex-dropdown__container { margin-top: 10px !important; } -.customb2b-pageBody .vtex-dropdown span{ +.customb2b-pageBody .vtex-dropdown span { margin-top: 5px !important; font: normal normal normal 13px/18px Poppins; color: #111; } -.customb2b-pageBody .ie-flex{ + +.customb2b-pageBody .ie-flex { display: flex; gap: 20px; flex-direction: row; } -.customb2b-pageBody .ie-flex .vtex-checkbox__line-container{ + +.customb2b-pageBody .ie-flex .vtex-checkbox__line-container { height: 38px; margin-top: auto !important; justify-content: center; align-items: center; } -.customb2b-pageBody .icms-flex > div .vtex-checkbox__line-container{ +.customb2b-pageBody .icms-flex>div .vtex-checkbox__line-container { height: 30px; margin-top: 10px !important; justify-content: center; align-items: center; } -.customb2b-pageBody .icms-flex > div { + +.customb2b-pageBody .icms-flex>div { display: flex; flex-direction: row; gap: 20px; } -.customb2b-pageBody .icms-flex > label { +.customb2b-pageBody .icms-flex>label { margin-top: 5px !important; display: block; } /* Form Adress */ -.customb2b-pageBody .vtex-address-form__country{ +.customb2b-pageBody .vtex-address-form__country { display: none; } -.customb2b-pageBody .vtex-address-form__postalCode{ + +.customb2b-pageBody .vtex-address-form__postalCode { width: 253px; min-width: 253px; } -.customb2b-pageBody .vtex-address-form__postalCode-forgottenURL{ +.customb2b-pageBody .vtex-address-form__postalCode-forgottenURL { display: none; } -.customb2b-pageBody .vtex-address-form__steet{ +.customb2b-pageBody .vtex-address-form__steet { grid-area: endereco; } -.customb2b-pageBody .vtex-address-form__number{ +.customb2b-pageBody .vtex-address-form__number { grid-area: numero; } -.customb2b-pageBody .vtex-address-form__complement{ +.customb2b-pageBody .vtex-address-form__complement { grid-area: complemento; } -.customb2b-pageBody .vtex-address-form__neighborhood{ +.customb2b-pageBody .vtex-address-form__neighborhood { grid-area: bairro; } -.customb2b-pageBody .vtex-address-form__city{ +.customb2b-pageBody .vtex-address-form__city { grid-area: cidade; } -.customb2b-pageBody .vtex-address-form__state{ +.customb2b-pageBody .vtex-address-form__state { grid-area: estado; } -.customb2b-pageBody .vtex-address-form__receiverName{ +.customb2b-pageBody .vtex-address-form__receiverName { grid-area: destinatario; } -.customb2b-pageBody .vtex-address-form__container{ +.customb2b-pageBody .vtex-address-form__container { display: grid; gap: 15px 20px; padding-top: 20px !important; - grid-template-areas: "endereco endereco" "numero complemento" "bairro cidade" "estado destinatario"; + grid-template-areas: "endereco endereco""numero complemento""bairro cidade""estado destinatario"; } -.customb2b-pageBody .vtex-address-form__container > div label span{ + +.customb2b-pageBody .vtex-address-form__container>div label span { margin-top: 5px !important; } -.customb2b-pageBody .vtex-address-form__container > div label > div{ - margin-top: 15px !important; + +.customb2b-pageBody .vtex-address-form__container>div label>div { + margin-top: 15px !important; } @@ -241,16 +251,16 @@ body, /* Documentos anexados */ -.file-button{ +.file-button { margin-top: 20px !important; margin-bottom: 20px !important; } -.file-button input{ +.file-button input { display: none; } -.file-button label{ +.file-button label { color: #12576E !important; background: #fff !important; border: 1px solid #12576E !important; @@ -260,6 +270,99 @@ body, display: flex; justify-content: center; align-items: center; - font: normal normal normal 13px/18px Poppins; + font-size: 13px; + line-height: 18px; + cursor: pointer; +} + + + +/* Modal */ +.modal-organization__shadow { + position: fixed; + top: 0; + left: 0; + display: flex; + width: 100vw; + height: 100vh; + justify-content: center; + align-items: center; + background: #00000088; + z-index: 999999; + padding: 15px; +} + +.modal-organization__box { + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 30px 40px; + width: 100%; + max-width: 536px; + height: auto; + background: #FFFFFF 0% 0% no-repeat padding-box; + box-shadow: 0px 15px 30px #00000012; + border-radius: 6px; +} + +.modal-organization__header { + text-align: center; + font-size: 38px; + line-height: 46px; + font-weight: 500; + letter-spacing: 0px; + color: #12576E; + margin-bottom: 12px; +} + +.modal-organization__message { + text-align: center; + font-size: 15px; + line-height: 20px; + letter-spacing: 0px; + color: #12576E; +} + +.modal-organization__footer { + margin: 40px auto 0; +} + +.modal-organization__button { + width: 184px; + height: 38px; + display: flex; + justify-content: center; + align-items: center; + background: #0F4658 0% 0% no-repeat padding-box; + border-radius: 2px; + text-align: center; + font-size: 13px; + line-height: 18px; + letter-spacing: 0px; + color: #FFFFFF; + cursor: pointer; +} + + +.hppardis-b2b-organizations-1-x-newOrganizationButtonsContainer { + align-items: center; + justify-content: center; +} + +.hppardis-b2b-organizations-1-x-newOrganizationButtonsContainer button { + width: 184px !important; + height: 38px !important; + background: #12576E 0% 0% no-repeat padding-box !important; + border-radius: 2px !important; + text-align: center !important; + font-size: 13px !important; + line-height: 18px !important; + font-weight: 400 !important; + text-transform: none !important; + letter-spacing: 0px !important; + color: #FFFFFF !important; + justify-content: center !important; + align-items: center !important; + display: flex !important; cursor: pointer; } \ No newline at end of file From d209025bfe4a3891c140a9b10655101c758edad1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C2=A8Bruno?= <¨bruno.lopes@corebiz.ag¨> Date: Thu, 14 Jul 2022 13:53:57 -0300 Subject: [PATCH 04/17] feat: css and js ajustments --- manifest.json | 2 +- react/components/RequestOrganizationForm.tsx | 91 ++++++++++---------- react/styles.global.css | 19 ++-- 3 files changed, 60 insertions(+), 52 deletions(-) diff --git a/manifest.json b/manifest.json index 45a3f060..3eeeb749 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "name": "b2b-organizations", "vendor": "hppardis", - "version": "1.9.0", + "version": "1.9.2", "title": "B2B Organizations", "description": "App to create and manage B2B Organizations and Cost Centers", "mustUpdateAt": "2022-08-28", diff --git a/react/components/RequestOrganizationForm.tsx b/react/components/RequestOrganizationForm.tsx index 52fad17d..89c768fa 100644 --- a/react/components/RequestOrganizationForm.tsx +++ b/react/components/RequestOrganizationForm.tsx @@ -29,8 +29,9 @@ import 'vtex.country-codes/locales' import { organizationRequestMessages as messages } from './utils/messages' import storageFactory from '../utils/storage' import { getSession } from '../modules/session' -import { validateEmail } from '../modules/formValidators' -import { getEmptyAddress, isValidAddress } from '../utils/addresses' +// import { validateEmail } from '../modules/formValidators' +// import { getEmptyAddress, isValidAddress } from '../utils/addresses' +import { getEmptyAddress } from '../utils/addresses' import CREATE_ORGANIZATION_REQUEST from '../graphql/createOrganizationRequest.graphql' import GET_ORGANIZATION_REQUEST from '../graphql/getOrganizationRequest.graphql' import GET_LOGISTICS from '../graphql/getLogistics.graphql' @@ -130,6 +131,10 @@ const RequestOrganizationForm: FC = () => { const [permission, setPermission] = useState(false) + + const [empresa, setEmpresa] = useState({razao: '',ie: '',icms: ''}) + + const { showToast } = useContext(ToastContext) const sessionResponse: any = useSessionResponse() const handles = useCssHandles(CSS_HANDLES) @@ -232,6 +237,10 @@ const RequestOrganizationForm: FC = () => { if (data?.data?.code == 200) { console.log(data?.data?.data) + setEmpresa({ + ...empresa, + razao: data?.data?.data[0]?.razao_social + }) setFormState({ ...formState, businessDocument: data?.data?.data[0]?.cnpj, @@ -245,28 +254,24 @@ const RequestOrganizationForm: FC = () => { uf: data?.data?.data[0]?.endereco_uf }).then((response: any) => { console.log(response) - if (response?.data?.code != 200) { - setModalSettings({ - title: 'Ocorreu um erro!', - message: `${response?.data?.code_message} Você pode continuar preenchendo os dados no formulário abaixo.`, - buttonText: 'Fechar mensagem', - buttonLink: '', - active: true - }) - } else { + if (response?.data?.code == 200) { setFormState({ ...formState, organizationIE: response?.data?.data[0]?.inscricao_estadual }) + setEmpresa({ + ...empresa, + ie: response?.data?.data[0]?.inscricao_estadual + }) } - //unlock unseen inputs - setLockFunc(false) - - //remove loading here - setLoadFunc(false) return [data?.data, response?.data] }) + //unlock unseen inputs + setLockFunc(false) + + //remove loading here + setLoadFunc(false) } else { setModalSettings({ title: 'Seu CNPJ consta como inativo!', @@ -322,6 +327,7 @@ const RequestOrganizationForm: FC = () => { } const handleSubmit = () => { + console.log('click') setFormState({ ...formState, isSubmitting: true, @@ -334,18 +340,18 @@ const RequestOrganizationForm: FC = () => { firstName: formState.firstName, lastName: formState.lastName, email: formState.email, - // cpf: formState.cpf, - // telephone: formState.telephone + cpf: formState.cpf, + telephone: formState.telephone }, defaultCostCenter: { name: formState.organizationName, - // type: formState.organizationType, - // public: formState.organizationPublic, - // ie: formState.organizationIE, - // icms: formState.organizationICMS, - // area: formState.organizationArea, - // phone: formState.organizationPhone, - // newsletter: formState.newsletter, + type: formState.organizationType, + public: formState.organizationPublic, + ie: formState.organizationIE, + icms: formState.organizationICMS, + area: formState.organizationArea, + phone: formState.organizationPhone, + newsletter: formState.newsletter, address: { addressId: addressState.addressId.value, addressType: addressState.addressType.value, @@ -433,6 +439,7 @@ const RequestOrganizationForm: FC = () => { .then(response => { const statusRequest = response.data.createOrganizationRequest.status + console.log(response) if (statusRequest === 'pending') { toastMessage(messages.toastPending) @@ -597,7 +604,7 @@ const RequestOrganizationForm: FC = () => {
@@ -785,7 +792,7 @@ const RequestOrganizationForm: FC = () => { autocomplete="off" size="large" label={"Razão Social"} - readonly={true} + readonly={empresa.razao != ''} value={formState.organizationName} onChange={(e: React.ChangeEvent) => { setFormState({ @@ -804,7 +811,7 @@ const RequestOrganizationForm: FC = () => { autocomplete="off" size="large" label={"IE"} - disabled={formState.organizationIE == "Isento"} + disabled={formState.organizationIE == "Isento" || empresa.ie != ''} value={formState.organizationIE} onChange={(e: React.ChangeEvent) => { setFormState({ @@ -815,6 +822,7 @@ const RequestOrganizationForm: FC = () => { required /> { <>
{ -
- - -
+
+ +
+ + +
+ Formatos aceitos: jpg, png e pdf +
{ onClick={() => { handleSubmit() }} - disabled={ - !formState.organizationName || - !formState.firstName || - !formState.lastName || - !validateEmail(formState.email) || - !isValidAddress(addressState) || - !permission || - !formState.isSubmitting - } > Enviar Cadastro diff --git a/react/styles.global.css b/react/styles.global.css index 5f26558a..8e5f2165 100644 --- a/react/styles.global.css +++ b/react/styles.global.css @@ -78,11 +78,11 @@ select, background-color: transparent !important; } -.customb2b-pageBody .styleguide__pageBlock { +.customb2b-pageBody .styleguide__pageBlock:not(:first-child) { padding: 10px 0 20px; } -.customb2b-pageBody .styleguide__pageBlock { +.customb2b-pageBody .styleguide__pageBlock:not(:first-child) { margin-top: 35px !important; } @@ -147,9 +147,6 @@ select, /* Form empresa */ -.customb2b-pageBody .vtex-dropdown .vtex-dropdown__container { - margin-top: 10px !important; -} .customb2b-pageBody .vtex-dropdown span { margin-top: 5px !important; @@ -233,7 +230,7 @@ select, .customb2b-pageBody .vtex-address-form__container { display: grid; gap: 15px 20px; - padding-top: 20px !important; + padding-top: 10px !important; grid-template-areas: "endereco endereco""numero complemento""bairro cidade""estado destinatario"; } @@ -251,9 +248,17 @@ select, /* Documentos anexados */ + +.file-warning{ + margin-top: 5px; + margin-bottom: 20px; + + font: normal normal normal 12px/16px Poppins; + color: #707070; +} .file-button { margin-top: 20px !important; - margin-bottom: 20px !important; + margin-bottom: 5px !important; } .file-button input { From d48c6d9ee4e7c28cf1e835708b303321a1a674cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C2=A8Bruno?= <¨bruno.lopes@corebiz.ag¨> Date: Thu, 14 Jul 2022 17:42:09 -0300 Subject: [PATCH 05/17] Release v1.10.0-beta.0 --- manifest.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/manifest.json b/manifest.json index 3eeeb749..7986bffd 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "name": "b2b-organizations", "vendor": "hppardis", - "version": "1.9.2", + "version": "1.10.0-beta.0", "title": "B2B Organizations", "description": "App to create and manage B2B Organizations and Cost Centers", "mustUpdateAt": "2022-08-28", From ebf5f45d923d2208a2091ee535c91593f2519ea8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C2=A8Bruno?= <¨bruno.lopes@corebiz.ag¨> Date: Sat, 16 Jul 2022 17:02:10 -0300 Subject: [PATCH 06/17] feat: working --- manifest.json | 2 +- messages/en.json | 2 +- react/MyOrganizationLink.tsx | 10 +--------- react/admin/OrganizationRequestDetails.tsx | 13 ++++++++++++- react/components/RequestOrganizationForm.tsx | 4 ++-- react/graphql/addUser.graphql | 2 +- react/graphql/createCostCenter.graphql | 2 +- react/graphql/createOrganization.graphql | 2 +- react/graphql/createOrganizationRequest.graphql | 2 +- react/graphql/deleteCostCenter.graphql | 2 +- react/graphql/getCostCenter.graphql | 2 +- react/graphql/getCostCenterStorefront.graphql | 2 +- .../graphql/getCostCentersByOrganizationId.graphql | 2 +- ...getCostCentersByOrganizationIdStorefront.graphql | 2 +- react/graphql/getOrganization.graphql | 2 +- react/graphql/getOrganizationRequest.graphql | 2 +- react/graphql/getOrganizationRequests.graphql | 2 +- react/graphql/getOrganizationStorefront.graphql | 2 +- react/graphql/getOrganizations.graphql | 2 +- react/graphql/getPaymentTerms.graphql | 2 +- react/graphql/getUsers.graphql | 2 +- react/graphql/impersonateUser.graphql | 2 +- react/graphql/removeUser.graphql | 2 +- react/graphql/saveUser.graphql | 2 +- react/graphql/updateCostCenter.graphql | 2 +- react/graphql/updateOrganization.graphql | 2 +- react/graphql/updateOrganizationRequest.graphql | 2 +- react/graphql/updateUser.graphql | 2 +- 28 files changed, 40 insertions(+), 37 deletions(-) diff --git a/manifest.json b/manifest.json index 7986bffd..db767232 100644 --- a/manifest.json +++ b/manifest.json @@ -9,7 +9,7 @@ "postreleasy": "vtex publish" }, "dependencies": { - "vtex.b2b-organizations-graphql": "0.x", + "hppardis.b2b-organizations-graphql": "0.x", "vtex.catalog-graphql": "1.x", "vtex.admin-graphql": "2.x", "vtex.store-graphql": "2.x", diff --git a/messages/en.json b/messages/en.json index 5ba59d49..d696e0a5 100644 --- a/messages/en.json +++ b/messages/en.json @@ -132,7 +132,7 @@ "admin/b2b-organizations.user-details.placeholder-costCenter": "Select a cost center", "admin/b2b-organizations.user-details.role": "Role", "admin/b2b-organizations.user-details.placeholder-role": "Select a role", - "store/b2b-organizations.my-account-link": "My Organization", + "store/b2b-organizations.my-account-link": "Company registration", "store/b2b-organizations.back": "Back", "store/b2b-organizations.selected-rows": "Selected rows: {qty}", "store/b2b-organizations.showRows": "Show rows", diff --git a/react/MyOrganizationLink.tsx b/react/MyOrganizationLink.tsx index a736be3b..04c8d730 100644 --- a/react/MyOrganizationLink.tsx +++ b/react/MyOrganizationLink.tsx @@ -1,18 +1,10 @@ import type { FC } from 'react' -import { defineMessages, useIntl } from 'react-intl' - -const messages = defineMessages({ - linkText: { - id: 'store/b2b-organizations.my-account-link', - }, -}) const MyOrganizationLink: FC = ({ render }: any) => { - const { formatMessage } = useIntl() return render([ { - name: formatMessage(messages.linkText), + name: 'Cadastro da empresa', path: '/organization', }, ]) diff --git a/react/admin/OrganizationRequestDetails.tsx b/react/admin/OrganizationRequestDetails.tsx index 7131ade4..afc10afc 100644 --- a/react/admin/OrganizationRequestDetails.tsx +++ b/react/admin/OrganizationRequestDetails.tsx @@ -141,7 +141,11 @@ const OrganizationRequestDetails: FunctionComponent = () => {
- {data.getOrganizationRequestById.b2bCustomerAdmin.email} + {data.getOrganizationRequestById.b2bCustomerAdmin.email}
+ {data.getOrganizationRequestById.b2bCustomerAdmin.cpf}
+ {data.getOrganizationRequestById.b2bCustomerAdmin.telephone}
+ +

@@ -161,6 +165,13 @@ const OrganizationRequestDetails: FunctionComponent = () => { />

)} + + Tipo: {data.getOrganizationRequestById.defaultCostCenter.type}
+ Publico: {data.getOrganizationRequestById.defaultCostCenter.organizationPublic}
+ Inscrição estadual: {data.getOrganizationRequestById.defaultCostCenter.ie}
+ ICMS: {data.getOrganizationRequestById.defaultCostCenter.icms}
+ Area de atuação: {data.getOrganizationRequestById.defaultCostCenter.area}
+ Telefone: {data.getOrganizationRequestById.defaultCostCenter.phone}

{ { value: 'Veterinária & Pet', label: 'Veterinária & Pet' }, { value: 'Outros', label: 'Outros' } ]} - value={formState.organizationType} + value={formState.organizationArea} onChange={(__: any, value: string) => { setFormState({ ...formState, - organizationType: value, + organizationArea: value, }) }} required diff --git a/react/graphql/addUser.graphql b/react/graphql/addUser.graphql index b3e366c5..ae487331 100644 --- a/react/graphql/addUser.graphql +++ b/react/graphql/addUser.graphql @@ -19,7 +19,7 @@ mutation AddUser( canImpersonate: $canImpersonate name: $name email: $email - ) @context(provider: "vtex.b2b-organizations-graphql") { + ) @context(provider: "hppardis.b2b-organizations-graphql") { id status } diff --git a/react/graphql/createCostCenter.graphql b/react/graphql/createCostCenter.graphql index 9283cd6d..1775cfba 100644 --- a/react/graphql/createCostCenter.graphql +++ b/react/graphql/createCostCenter.graphql @@ -1,6 +1,6 @@ mutation CreateCostCenter($organizationId: ID, $input: CostCenterInput!) { createCostCenter(organizationId: $organizationId, input: $input) - @context(provider: "vtex.b2b-organizations-graphql") { + @context(provider: "hppardis.b2b-organizations-graphql") { id } } diff --git a/react/graphql/createOrganization.graphql b/react/graphql/createOrganization.graphql index a2786aa8..1b928944 100644 --- a/react/graphql/createOrganization.graphql +++ b/react/graphql/createOrganization.graphql @@ -1,6 +1,6 @@ mutation CreateOrganization($input: OrganizationInput!) { createOrganization(input: $input) - @context(provider: "vtex.b2b-organizations-graphql") { + @context(provider: "hppardis.b2b-organizations-graphql") { id } } diff --git a/react/graphql/createOrganizationRequest.graphql b/react/graphql/createOrganizationRequest.graphql index ba2df7be..b1e4d15c 100644 --- a/react/graphql/createOrganizationRequest.graphql +++ b/react/graphql/createOrganizationRequest.graphql @@ -1,6 +1,6 @@ mutation CreateOrganizationRequest($input: OrganizationInput!) { createOrganizationRequest(input: $input) - @context(provider: "vtex.b2b-organizations-graphql") { + @context(provider: "hppardis.b2b-organizations-graphql") { id status } diff --git a/react/graphql/deleteCostCenter.graphql b/react/graphql/deleteCostCenter.graphql index d7bbed4c..83d1b3f9 100644 --- a/react/graphql/deleteCostCenter.graphql +++ b/react/graphql/deleteCostCenter.graphql @@ -1,6 +1,6 @@ mutation DeleteCostCenter($id: ID!) { deleteCostCenter(id: $id) - @context(provider: "vtex.b2b-organizations-graphql") { + @context(provider: "hppardis.b2b-organizations-graphql") { id status message diff --git a/react/graphql/getCostCenter.graphql b/react/graphql/getCostCenter.graphql index 5907e15f..ee7d32b9 100644 --- a/react/graphql/getCostCenter.graphql +++ b/react/graphql/getCostCenter.graphql @@ -1,6 +1,6 @@ query GetCostCenter($id: ID!) { getCostCenterById(id: $id) - @context(provider: "vtex.b2b-organizations-graphql") { + @context(provider: "hppardis.b2b-organizations-graphql") { name organization paymentTerms { diff --git a/react/graphql/getCostCenterStorefront.graphql b/react/graphql/getCostCenterStorefront.graphql index 5a983ec4..26002dbe 100644 --- a/react/graphql/getCostCenterStorefront.graphql +++ b/react/graphql/getCostCenterStorefront.graphql @@ -1,6 +1,6 @@ query GetCostCenterStorefront($id: ID) { getCostCenterByIdStorefront(id: $id) - @context(provider: "vtex.b2b-organizations-graphql") { + @context(provider: "hppardis.b2b-organizations-graphql") { id name organization diff --git a/react/graphql/getCostCentersByOrganizationId.graphql b/react/graphql/getCostCentersByOrganizationId.graphql index 61429a7e..3de3d1ab 100644 --- a/react/graphql/getCostCentersByOrganizationId.graphql +++ b/react/graphql/getCostCentersByOrganizationId.graphql @@ -13,7 +13,7 @@ query GetCostCentersByOrganizationId( pageSize: $pageSize sortOrder: $sortOrder sortedBy: $sortedBy - ) @context(provider: "vtex.b2b-organizations-graphql") { + ) @context(provider: "hppardis.b2b-organizations-graphql") { pagination { total } diff --git a/react/graphql/getCostCentersByOrganizationIdStorefront.graphql b/react/graphql/getCostCentersByOrganizationIdStorefront.graphql index d19cc76c..25bf977c 100644 --- a/react/graphql/getCostCentersByOrganizationIdStorefront.graphql +++ b/react/graphql/getCostCentersByOrganizationIdStorefront.graphql @@ -13,7 +13,7 @@ query GetCostCentersByOrganizationIdStorefront( pageSize: $pageSize sortOrder: $sortOrder sortedBy: $sortedBy - ) @context(provider: "vtex.b2b-organizations-graphql") { + ) @context(provider: "hppardis.b2b-organizations-graphql") { pagination { total } diff --git a/react/graphql/getOrganization.graphql b/react/graphql/getOrganization.graphql index bffddf85..fbf8cd2a 100644 --- a/react/graphql/getOrganization.graphql +++ b/react/graphql/getOrganization.graphql @@ -1,6 +1,6 @@ query GetOrganization($id: ID) { getOrganizationById(id: $id) - @context(provider: "vtex.b2b-organizations-graphql") { + @context(provider: "hppardis.b2b-organizations-graphql") { id name status diff --git a/react/graphql/getOrganizationRequest.graphql b/react/graphql/getOrganizationRequest.graphql index 819c0b66..a583c989 100644 --- a/react/graphql/getOrganizationRequest.graphql +++ b/react/graphql/getOrganizationRequest.graphql @@ -1,6 +1,6 @@ query GetOrganizationRequest($id: ID!) { getOrganizationRequestById(id: $id) - @context(provider: "vtex.b2b-organizations-graphql") { + @context(provider: "hppardis.b2b-organizations-graphql") { name b2bCustomerAdmin { email diff --git a/react/graphql/getOrganizationRequests.graphql b/react/graphql/getOrganizationRequests.graphql index 7770b253..9d109da3 100644 --- a/react/graphql/getOrganizationRequests.graphql +++ b/react/graphql/getOrganizationRequests.graphql @@ -13,7 +13,7 @@ query GetOrganizationRequests( pageSize: $pageSize sortOrder: $sortOrder sortedBy: $sortedBy - ) @context(provider: "vtex.b2b-organizations-graphql") { + ) @context(provider: "hppardis.b2b-organizations-graphql") { pagination { total } diff --git a/react/graphql/getOrganizationStorefront.graphql b/react/graphql/getOrganizationStorefront.graphql index 62e3bd58..78c9858d 100644 --- a/react/graphql/getOrganizationStorefront.graphql +++ b/react/graphql/getOrganizationStorefront.graphql @@ -1,6 +1,6 @@ query GetOrganizationStorefront($id: ID) { getOrganizationByIdStorefront(id: $id) - @context(provider: "vtex.b2b-organizations-graphql") { + @context(provider: "hppardis.b2b-organizations-graphql") { id name status diff --git a/react/graphql/getOrganizations.graphql b/react/graphql/getOrganizations.graphql index 2167ef19..95616d7f 100644 --- a/react/graphql/getOrganizations.graphql +++ b/react/graphql/getOrganizations.graphql @@ -13,7 +13,7 @@ query GetOrganizations( pageSize: $pageSize sortOrder: $sortOrder sortedBy: $sortedBy - ) @context(provider: "vtex.b2b-organizations-graphql") { + ) @context(provider: "hppardis.b2b-organizations-graphql") { pagination { total } diff --git a/react/graphql/getPaymentTerms.graphql b/react/graphql/getPaymentTerms.graphql index 45fc7458..33057444 100644 --- a/react/graphql/getPaymentTerms.graphql +++ b/react/graphql/getPaymentTerms.graphql @@ -1,6 +1,6 @@ query GetPaymentTerms { getPaymentTerms - @context(provider: "vtex.b2b-organizations-graphql") { + @context(provider: "hppardis.b2b-organizations-graphql") { id name } diff --git a/react/graphql/getUsers.graphql b/react/graphql/getUsers.graphql index 09f63c8a..f92ca8ed 100644 --- a/react/graphql/getUsers.graphql +++ b/react/graphql/getUsers.graphql @@ -1,6 +1,6 @@ query GetUsers($organizationId: ID, $costCenterId: ID) { getUsers(organizationId: $organizationId, costCenterId: $costCenterId) - @context(provider: "vtex.b2b-organizations-graphql") { + @context(provider: "hppardis.b2b-organizations-graphql") { id roleId userId diff --git a/react/graphql/impersonateUser.graphql b/react/graphql/impersonateUser.graphql index 36154b1e..b72012de 100644 --- a/react/graphql/impersonateUser.graphql +++ b/react/graphql/impersonateUser.graphql @@ -1,6 +1,6 @@ mutation ImpersonateUser($clId: ID, $userId: ID) { impersonateUser(clId: $clId, userId: $userId) - @context(provider: "vtex.b2b-organizations-graphql") { + @context(provider: "hppardis.b2b-organizations-graphql") { id status message diff --git a/react/graphql/removeUser.graphql b/react/graphql/removeUser.graphql index 99e45ee4..fa2c84c4 100644 --- a/react/graphql/removeUser.graphql +++ b/react/graphql/removeUser.graphql @@ -1,6 +1,6 @@ mutation RemoveUser($id: ID!, $userId: ID, $email: String!, $clId: ID!) { removeUser(id: $id, userId: $userId, email: $email, clId: $clId) - @context(provider: "vtex.b2b-organizations-graphql") { + @context(provider: "hppardis.b2b-organizations-graphql") { status } } diff --git a/react/graphql/saveUser.graphql b/react/graphql/saveUser.graphql index 24bc3165..00b692c9 100644 --- a/react/graphql/saveUser.graphql +++ b/react/graphql/saveUser.graphql @@ -19,7 +19,7 @@ mutation SaveUser( canImpersonate: $canImpersonate name: $name email: $email - ) @context(provider: "vtex.b2b-organizations-graphql") { + ) @context(provider: "hppardis.b2b-organizations-graphql") { id status } diff --git a/react/graphql/updateCostCenter.graphql b/react/graphql/updateCostCenter.graphql index 54da5e25..36d48fcc 100644 --- a/react/graphql/updateCostCenter.graphql +++ b/react/graphql/updateCostCenter.graphql @@ -1,6 +1,6 @@ mutation UpdateCostCenter($id: ID!, $input: CostCenterInput!) { updateCostCenter(id: $id, input: $input) - @context(provider: "vtex.b2b-organizations-graphql") { + @context(provider: "hppardis.b2b-organizations-graphql") { id status message diff --git a/react/graphql/updateOrganization.graphql b/react/graphql/updateOrganization.graphql index 796fe433..0036468e 100644 --- a/react/graphql/updateOrganization.graphql +++ b/react/graphql/updateOrganization.graphql @@ -13,7 +13,7 @@ mutation UpdateOrganization( collections: $collections paymentTerms: $paymentTerms priceTables: $priceTables - ) @context(provider: "vtex.b2b-organizations-graphql") { + ) @context(provider: "hppardis.b2b-organizations-graphql") { id status message diff --git a/react/graphql/updateOrganizationRequest.graphql b/react/graphql/updateOrganizationRequest.graphql index c585e9ff..c203208b 100644 --- a/react/graphql/updateOrganizationRequest.graphql +++ b/react/graphql/updateOrganizationRequest.graphql @@ -1,6 +1,6 @@ mutation UpdateOrganizationRequest($id: ID!, $status: String!, $notes: String) { updateOrganizationRequest(id: $id, status: $status, notes: $notes) - @context(provider: "vtex.b2b-organizations-graphql") { + @context(provider: "hppardis.b2b-organizations-graphql") { id status message diff --git a/react/graphql/updateUser.graphql b/react/graphql/updateUser.graphql index 4cc61f32..a30e5263 100644 --- a/react/graphql/updateUser.graphql +++ b/react/graphql/updateUser.graphql @@ -15,7 +15,7 @@ mutation UpdateUser( costId: $costId clId: $clId canImpersonate: $canImpersonate - ) @context(provider: "vtex.b2b-organizations-graphql") { + ) @context(provider: "hppardis.b2b-organizations-graphql") { id status } From 8867bc655dde92bac4c5025b669822c56e2331ad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C2=A8Bruno?= <¨bruno.lopes@corebiz.ag¨> Date: Mon, 18 Jul 2022 14:16:43 -0300 Subject: [PATCH 07/17] feat: working --- messages/en.json | 4 ++-- react/admin/OrganizationRequestDetails.tsx | 2 +- react/components/CostCenterDetails.tsx | 7 +++++++ react/components/OrganizationDetails.tsx | 8 ++++++++ react/components/OrganizationUsersTable.tsx | 2 ++ react/components/RequestOrganizationForm.tsx | 2 +- react/graphql/getCostCenter.graphql | 7 +++++++ react/graphql/getCostCenterStorefront.graphql | 7 +++++++ react/graphql/getOrganizationRequest.graphql | 7 +++++++ 9 files changed, 42 insertions(+), 4 deletions(-) diff --git a/messages/en.json b/messages/en.json index d696e0a5..978b2838 100644 --- a/messages/en.json +++ b/messages/en.json @@ -156,9 +156,9 @@ "store/b2b-organizations.request-new-organization.helpText": "Please fill out the following form to request the creation of a new organization.", "store/b2b-organizations.request-new-organization.b2b-customer-admin.helpText": "The user below will be assigned as the admin of the new organization. They will be notified via email when the organization has been approved and created. Additional users may be assigned to the organization by this admin after the organization has been created.", "store/b2b-organizations.request-new-organization.default-cost-center.helpText": "Provide a name and address for the organization's initial cost center. Additional cost centers and addresses may be added after the organization has been created.", - "store/b2b-organizations.request-new-organization.pending-request": "Your organization request submitted {created} is pending approval. The user submitted as the organization admin will receive an email when the approval process is complete.", + "store/b2b-organizations.request-new-organization.pending-request": "Your organization request submitted is pending approval. The user submitted as the organization admin will receive an email when the approval process is complete.", "store/b2b-organizations.request-new-organization.approved-request": "Your requested organization has been created. Users who have been added to the organization can view and/or manage organizational details by logging in and going to My Account > My Organization.", - "store/b2b-organizations.request-new-organization.declined-request": "Your organization request submitted {created} has been declined.", + "store/b2b-organizations.request-new-organization.declined-request": "Your organization request submitted has been declined.", "store/b2b-organizations.request-new-organization.businessDocument": "Business document", "store/b2b-organizations.request-new-organization.businessDocument.helpText": "Optionally provide a business document for the default cost center. This can be a tax ID, VAT ID, CNPJ, or other document and will be attached to the cost center's orders.", "store/b2b-organizations.organization-details.toast.add-costCenter-success": "Cost center created successfully", diff --git a/react/admin/OrganizationRequestDetails.tsx b/react/admin/OrganizationRequestDetails.tsx index afc10afc..700c8249 100644 --- a/react/admin/OrganizationRequestDetails.tsx +++ b/react/admin/OrganizationRequestDetails.tsx @@ -169,7 +169,7 @@ const OrganizationRequestDetails: FunctionComponent = () => { Tipo: {data.getOrganizationRequestById.defaultCostCenter.type}
Publico: {data.getOrganizationRequestById.defaultCostCenter.organizationPublic}
Inscrição estadual: {data.getOrganizationRequestById.defaultCostCenter.ie}
- ICMS: {data.getOrganizationRequestById.defaultCostCenter.icms}
+ ICMS: {data.getOrganizationRequestById.defaultCostCenter.icms ? 'Sim' : 'Não'}
Area de atuação: {data.getOrganizationRequestById.defaultCostCenter.area}
Telefone: {data.getOrganizationRequestById.defaultCostCenter.phone}

diff --git a/react/components/CostCenterDetails.tsx b/react/components/CostCenterDetails.tsx index 171bc45e..8c1f4916 100644 --- a/react/components/CostCenterDetails.tsx +++ b/react/components/CostCenterDetails.tsx @@ -172,6 +172,13 @@ const CostCenterDetails: FunctionComponent = ({ const { permissions = [] } = permissionsData.checkUserPermission ?? {} + if(permissionsData.checkUserPermission.role.slug == "customer-admin"){ + permissions.push('add-users-organization') + permissions.push('create-cost-center-organization') + } + + console.log(permissions) + if (permissions.length) { setPermissionsState(permissions) } diff --git a/react/components/OrganizationDetails.tsx b/react/components/OrganizationDetails.tsx index 9b452fa8..83c183fa 100644 --- a/react/components/OrganizationDetails.tsx +++ b/react/components/OrganizationDetails.tsx @@ -113,6 +113,14 @@ const OrganizationDetails: FunctionComponent = ({ const { permissions = [] } = permissionsData.checkUserPermission ?? {} + if(permissionsData.checkUserPermission.role.slug == "customer-admin"){ + permissions.push('add-users-organization') + permissions.push('create-cost-center-organization') + } + + console.log(permissions) + + if (permissions.length) { setPermissionsState(permissions) } diff --git a/react/components/OrganizationUsersTable.tsx b/react/components/OrganizationUsersTable.tsx index 479749a4..4a86459d 100644 --- a/react/components/OrganizationUsersTable.tsx +++ b/react/components/OrganizationUsersTable.tsx @@ -79,6 +79,8 @@ const OrganizationUsersTable: FunctionComponent = ({ } } + console.log(permissions) + const canEdit = isAdmin || permissions.includes('add-users-organization') const canEditSales = isAdmin || permissions.includes('add-sales-users-all') const canImpersonateAll = permissions.includes('impersonate-users-all') diff --git a/react/components/RequestOrganizationForm.tsx b/react/components/RequestOrganizationForm.tsx index 72e79f30..f0999da8 100644 --- a/react/components/RequestOrganizationForm.tsx +++ b/react/components/RequestOrganizationForm.tsx @@ -346,7 +346,7 @@ const RequestOrganizationForm: FC = () => { defaultCostCenter: { name: formState.organizationName, type: formState.organizationType, - public: formState.organizationPublic, + organizationPublic: formState.organizationPublic, ie: formState.organizationIE, icms: formState.organizationICMS, area: formState.organizationArea, diff --git a/react/graphql/getCostCenter.graphql b/react/graphql/getCostCenter.graphql index ee7d32b9..e68f339c 100644 --- a/react/graphql/getCostCenter.graphql +++ b/react/graphql/getCostCenter.graphql @@ -24,5 +24,12 @@ query GetCostCenter($id: ID!) { reference } businessDocument + type + organizationPublic + ie + icms + area + phone + newsletter } } diff --git a/react/graphql/getCostCenterStorefront.graphql b/react/graphql/getCostCenterStorefront.graphql index 26002dbe..4306fe95 100644 --- a/react/graphql/getCostCenterStorefront.graphql +++ b/react/graphql/getCostCenterStorefront.graphql @@ -25,5 +25,12 @@ query GetCostCenterStorefront($id: ID) { reference } businessDocument + type + organizationPublic + ie + icms + area + phone + newsletter } } diff --git a/react/graphql/getOrganizationRequest.graphql b/react/graphql/getOrganizationRequest.graphql index a583c989..e123c3bf 100644 --- a/react/graphql/getOrganizationRequest.graphql +++ b/react/graphql/getOrganizationRequest.graphql @@ -26,6 +26,13 @@ query GetOrganizationRequest($id: ID!) { reference } businessDocument + type + organizationPublic + ie + icms + area + phone + newsletter } } } From 9e8efcc6c9a206cf5453949685b41bf8d9348dc0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C2=A8Bruno?= <¨bruno.lopes@corebiz.ag¨> Date: Mon, 18 Jul 2022 14:17:24 -0300 Subject: [PATCH 08/17] Release v1.10.0 --- CHANGELOG.md | 2 ++ manifest.json | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 71f8357f..345812bd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ## [Unreleased] +## [1.10.0] - 2022-07-18 + ## [1.9.0] - 2022-05-17 ### Added diff --git a/manifest.json b/manifest.json index db767232..0b52717f 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "name": "b2b-organizations", "vendor": "hppardis", - "version": "1.10.0-beta.0", + "version": "1.10.0", "title": "B2B Organizations", "description": "App to create and manage B2B Organizations and Cost Centers", "mustUpdateAt": "2022-08-28", From 87585c26eb1761fb5624028c2eb46726150f0760 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C2=A8Bruno?= <¨bruno.lopes@corebiz.ag¨> Date: Tue, 19 Jul 2022 16:30:03 -0300 Subject: [PATCH 09/17] feat: change vendor --- manifest.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/manifest.json b/manifest.json index 0b52717f..61417503 100644 --- a/manifest.json +++ b/manifest.json @@ -1,6 +1,6 @@ { "name": "b2b-organizations", - "vendor": "hppardis", + "vendor": "hermespardini", "version": "1.10.0", "title": "B2B Organizations", "description": "App to create and manage B2B Organizations and Cost Centers", @@ -9,7 +9,7 @@ "postreleasy": "vtex publish" }, "dependencies": { - "hppardis.b2b-organizations-graphql": "0.x", + "hermespardini.b2b-organizations-graphql": "0.x", "vtex.catalog-graphql": "1.x", "vtex.admin-graphql": "2.x", "vtex.store-graphql": "2.x", From c28e8e420196f4ae1bbd7b0acf191a6fa7b3e854 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C2=A8Bruno?= <¨bruno.lopes@corebiz.ag¨> Date: Tue, 19 Jul 2022 17:09:22 -0300 Subject: [PATCH 10/17] app version --- manifest.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/manifest.json b/manifest.json index 61417503..7137acb9 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "name": "b2b-organizations", "vendor": "hermespardini", - "version": "1.10.0", + "version": "0.0.0", "title": "B2B Organizations", "description": "App to create and manage B2B Organizations and Cost Centers", "mustUpdateAt": "2022-08-28", From 02c5e670605dbead6343fa7d93f3710a62e65ff0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C2=A8Bruno?= <¨bruno.lopes@corebiz.ag¨> Date: Tue, 19 Jul 2022 17:09:32 -0300 Subject: [PATCH 11/17] Release v1.0.0 --- CHANGELOG.md | 2 ++ manifest.json | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 345812bd..5e46bdb0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ## [Unreleased] +## [1.0.0] - 2022-07-19 + ## [1.10.0] - 2022-07-18 ## [1.9.0] - 2022-05-17 diff --git a/manifest.json b/manifest.json index 7137acb9..495d4f60 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "name": "b2b-organizations", "vendor": "hermespardini", - "version": "0.0.0", + "version": "1.0.0", "title": "B2B Organizations", "description": "App to create and manage B2B Organizations and Cost Centers", "mustUpdateAt": "2022-08-28", From 0723e4915f7a0ed03adfd298f7c0f7c300410f3d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C2=A8Bruno?= <¨bruno.lopes@corebiz.ag¨> Date: Tue, 19 Jul 2022 17:15:06 -0300 Subject: [PATCH 12/17] feat: version manifest --- manifest.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/manifest.json b/manifest.json index 495d4f60..7137acb9 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "name": "b2b-organizations", "vendor": "hermespardini", - "version": "1.0.0", + "version": "0.0.0", "title": "B2B Organizations", "description": "App to create and manage B2B Organizations and Cost Centers", "mustUpdateAt": "2022-08-28", From 364b8d24e1104953f2c98bab016b3ffab10183a5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C2=A8Bruno?= <¨bruno.lopes@corebiz.ag¨> Date: Tue, 19 Jul 2022 17:15:40 -0300 Subject: [PATCH 13/17] feat: version manifest --- .github/CODEOWNERS | 3 - .github/ISSUE_TEMPLATE/bug_report.md | 24 ------- .github/ISSUE_TEMPLATE/feature_request.md | 16 ----- .github/ISSUE_TEMPLATE/questions-and-help.md | 18 ----- .github/PULL_REQUEST_TEMPLATE.md | 27 -------- .github/workflows/cypress.yml | 70 -------------------- .github/workflows/danger.yml | 22 ------ .github/workflows/lint.yml | 32 --------- .github/workflows/pull-request.yml | 27 -------- .github/workflows/sonarcloud-external.yml | 54 --------------- .github/workflows/sonarcloud.yml | 44 ------------ 11 files changed, 337 deletions(-) delete mode 100644 .github/CODEOWNERS delete mode 100644 .github/ISSUE_TEMPLATE/bug_report.md delete mode 100644 .github/ISSUE_TEMPLATE/feature_request.md delete mode 100644 .github/ISSUE_TEMPLATE/questions-and-help.md delete mode 100644 .github/PULL_REQUEST_TEMPLATE.md delete mode 100644 .github/workflows/cypress.yml delete mode 100644 .github/workflows/danger.yml delete mode 100644 .github/workflows/lint.yml delete mode 100644 .github/workflows/pull-request.yml delete mode 100644 .github/workflows/sonarcloud-external.yml delete mode 100644 .github/workflows/sonarcloud.yml diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS deleted file mode 100644 index a01885a6..00000000 --- a/.github/CODEOWNERS +++ /dev/null @@ -1,3 +0,0 @@ -docs/ @vtex-apps/technical-writers -messages/ @vtex-apps/localization -* @vtex-apps/us-1st-party-apps diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md deleted file mode 100644 index cddd619c..00000000 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -name: Bug report -about: Create a report to help us improve ---- - -**Describe the bug** -A clear and concise description of what the bug is. - -**To Reproduce** -Steps to reproduce the behavior: - -1. Go to '...' -2. Click on '....' -3. Scroll down to '....' -4. See error - -**Expected behavior** -A clear and concise description of what you expected to happen. - -**Screenshots** -If applicable, add screenshots to help explain your problem. - -**Additional context** -Add any other context about the problem here. diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md deleted file mode 100644 index a09db44f..00000000 --- a/.github/ISSUE_TEMPLATE/feature_request.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -name: Feature request -about: Suggest an idea for this project ---- - -**Is your feature request related to a problem? Please describe.** -A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] - -**Describe the solution you'd like** -A clear and concise description of what you want to happen. - -**Describe alternatives you've considered** -A clear and concise description of any alternative solutions or features you've considered. - -**Additional context** -Add any other context or screenshots about the feature request here. diff --git a/.github/ISSUE_TEMPLATE/questions-and-help.md b/.github/ISSUE_TEMPLATE/questions-and-help.md deleted file mode 100644 index 7881b506..00000000 --- a/.github/ISSUE_TEMPLATE/questions-and-help.md +++ /dev/null @@ -1,18 +0,0 @@ ---- -name: Question -about: Ask a question you had while building a store -labels: question ---- - -**What are you trying to accomplish? Please describe.** -A clear and concise description of what is your question and what you're trying to accomplish in the end is. - -**What have you tried so far?** -A clear and concise description of what you tried to do already. - -**Additional info** -Add extra content here (code samples, screenshots,...) - -| Account | Workspace | -| -------------- | ---------------- | -| `your account` | `your workspace` | diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md deleted file mode 100644 index 1a4cb0ae..00000000 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ /dev/null @@ -1,27 +0,0 @@ -#### What problem is this solving? - - - -#### How to test it? - - - -[Workspace](Link goes here!) - -#### Screenshots or example usage: - - - -#### Describe alternatives you've considered, if any. - - - -#### Related to / Depends on - - - -#### How does this PR make you feel? [:link:](http://giphy.com/) - - - -![](put .gif link here - can be found under "advanced" on giphy) diff --git a/.github/workflows/cypress.yml b/.github/workflows/cypress.yml deleted file mode 100644 index a7aefce0..00000000 --- a/.github/workflows/cypress.yml +++ /dev/null @@ -1,70 +0,0 @@ -name: '[QE] Cypress Runner' - -on: - workflow_dispatch: - inputs: - branch: - description: 'Choose another branch to test' - required: true - default: master - schedule: - # 7:30 AM UTC = 3:30 AM EDT - - cron: '30 7 * * MON-FRI' - pull_request: - branches: - - master - - main - types: - - opened - - synchronize - - reopened - - ready_for_review - paths-ignore: - - docs/** - - README.md - - CHANGELOG.md - -concurrency: - group: ${{ github.workflow }} - cancel-in-progress: false - -jobs: - Cypress: - runs-on: ubuntu-latest - timeout-minutes: 30 - if: github.event.pull_request.draft == false - steps: - - name: Checkout App - uses: actions/checkout@v2 - with: - fetch-depth: 0 - ref: ${{ github.event.pull_request.head.sha }} - - - name: Get Cypress Runner - run: git clone https://github.com/vtex-apps/cy-runner.git - - - name: Cache - uses: actions/cache@v2 - with: - path: '~/.cache/' - key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }} - - - name: Install Cypress - run: | - rm -rf .git - yarn install --frozen-lockfile - working-directory: ./cy-runner - - - name: Run Cypress Runner - run: yarn cy-r - env: - VTEX_QE: ${{ secrets.VTEX_QE }} - NODE_NO_WARNINGS: 1 - - - name: Save results - uses: actions/upload-artifact@master - if: always() - with: - name: cy-runner-logs - path: cy-runner/logs - retention-days: 3 diff --git a/.github/workflows/danger.yml b/.github/workflows/danger.yml deleted file mode 100644 index 31b78c86..00000000 --- a/.github/workflows/danger.yml +++ /dev/null @@ -1,22 +0,0 @@ -name: Danger actions -'on': - pull_request: - types: [opened, edited, reopened, synchronize, assigned, unassigned, review_requested, review_request_removed] -jobs: - danger-ci: - name: Danger CI - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@master - - uses: actions/setup-node@master - with: - node-version: 12.x - env: - RUNNER_TEMP: /tmp - - name: yarn install - run: yarn install - - name: Danger CI - uses: vtex/danger@master - env: - GITHUB_TOKEN: '${{ secrets.GITHUB_TOKEN }}' - REQUIRE_CHANGELOG_VERSION: false diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml deleted file mode 100644 index 3fedb1bc..00000000 --- a/.github/workflows/lint.yml +++ /dev/null @@ -1,32 +0,0 @@ -name: "[QE] Lint" - -on: - workflow_dispatch: - pull_request: - branches: - - master - - main - -jobs: - lint: - name: Lint - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@master - - uses: actions/setup-node@master - with: - node-version: 12.x - env: - RUNNER_TEMP: /tmp - - name: Get yarn cache directory path - id: yarn-cache-dir-path - run: 'echo "::set-output name=dir::$(yarn cache dir)"' - - uses: actions/cache@v1 - id: yarn-cache - with: - path: "${{ steps.yarn-cache-dir-path.outputs.dir }}" - key: "${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}" - restore-keys: | - ${{ runner.os }}-yarn- - - name: Lint project - uses: vtex/action-lint@master diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml deleted file mode 100644 index 24086eb6..00000000 --- a/.github/workflows/pull-request.yml +++ /dev/null @@ -1,27 +0,0 @@ -name: IO actions -'on': - pull_request: -jobs: - io-app-test: - name: IO app test - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@master - - uses: actions/setup-node@master - with: - node-version: 12.x - env: - RUNNER_TEMP: /tmp - - name: Get yarn cache directory path - id: yarn-cache-dir-path - run: 'echo "::set-output name=dir::$(yarn cache dir)"' - - uses: actions/cache@v1 - id: yarn-cache - with: - path: '${{ steps.yarn-cache-dir-path.outputs.dir }}' - key: "${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}" - restore-keys: | - ${{ runner.os }}-yarn- - - name: Run test on every builder directory - uses: vtex/action-io-app-test@master - diff --git a/.github/workflows/sonarcloud-external.yml b/.github/workflows/sonarcloud-external.yml deleted file mode 100644 index 84453a72..00000000 --- a/.github/workflows/sonarcloud-external.yml +++ /dev/null @@ -1,54 +0,0 @@ -name: '[QE] SonarCloud' - -on: - pull_request_target: - branches: - - master - - main - types: - - labeled - -jobs: - sonarcloud: - name: SonarCloud - runs-on: ubuntu-latest - permissions: - contents: read - if: ${{ github.event_name == 'push' || - ( - github.event_name == 'pull_request_target' && - contains(github.event.label.name, 'safe to test') - ) - }} - steps: - - name: Checkout - uses: actions/checkout@v2 - with: - fetch-depth: 0 - ref: ${{ github.event.pull_request.head.sha }} - - - name: Cache - uses: actions/cache@v2 - with: - path: '**/node_modules' - key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }} - - - name: Install base dependencies - run: yarn install --frozen-lockfile - if: steps.cache-node-modules.outputs.cache-hit != 'true' - - - name: Install react dependencies - run: yarn install --frozen-lockfile - if: steps.cache-node-modules.outputs.cache-hit != 'true' - working-directory: ./react - - - name: SonarCloud Scan - uses: SonarSource/sonarcloud-github-action@master - with: - args: > - -Dsonar.pullrequest.key=${{ github.event.pull_request.number }} - -Dsonar.pullrequest.branch=${{ github.event.pull_request.head.ref }} - -Dsonar.scm.revision=${{ github.event.pull_request.head.sha }} - env: - GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # Needed to get PR information, if any - SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }} diff --git a/.github/workflows/sonarcloud.yml b/.github/workflows/sonarcloud.yml deleted file mode 100644 index 49517a93..00000000 --- a/.github/workflows/sonarcloud.yml +++ /dev/null @@ -1,44 +0,0 @@ -name: "[QE] SonarCloud" - -on: - push: - branches: - - master - - main - - release/* - - feature/* - - fix/* - - chore/* - pull_request: - types: [opened, synchronize, reopened] - -jobs: - sonarcloud: - name: SonarCloud - runs-on: ubuntu-latest - steps: - - name: Checkout - uses: actions/checkout@v2 - with: - fetch-depth: 0 - - - name: Cache for node_modules - uses: actions/cache@v2 - with: - path: "**/node_modules" - key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }} - - - name: Install base packages - run: yarn install --frozen-lockfile - if: steps.cache-node-modules.outputs.cache-hit != 'true' - - - name: Install react packages - run: yarn install --frozen-lockfile - working-directory: ./react - if: steps.cache-node-modules.outputs.cache-hit != 'true' - - - name: SonarCloud Scan - uses: SonarSource/sonarcloud-github-action@master - env: - GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }} From a3af88bbfa5b68dd41773a16e7c6a2a16e7ac9da Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C2=A8Bruno?= <¨bruno.lopes@corebiz.ag¨> Date: Mon, 8 Aug 2022 14:55:01 -0300 Subject: [PATCH 14/17] feat: new camps --- manifest.json | 2 +- messages/context.json | 28 +- messages/en.json | 33 +- messages/pt.json | 35 + react/components/CostCenterDetails.tsx | 65 +- react/components/OrganizationDetails.tsx | 19 +- react/components/RequestOrganizationForm.tsx | 683 +++++++++---------- react/components/utils/messages.ts | 60 ++ react/config/masterdata.ts | 12 + react/requests/createOrganization.ts | 37 + react/styles.global.css | 42 +- react/tsconfig.json | 1 + react/utils/addresses.ts | 2 +- react/utils/attachFileToEntity.ts | 22 + 14 files changed, 593 insertions(+), 448 deletions(-) create mode 100644 messages/pt.json create mode 100644 react/config/masterdata.ts create mode 100644 react/requests/createOrganization.ts create mode 100644 react/utils/attachFileToEntity.ts diff --git a/manifest.json b/manifest.json index 495d4f60..4bcd94cf 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "name": "b2b-organizations", "vendor": "hermespardini", - "version": "1.0.0", + "version": "1.12.12", "title": "B2B Organizations", "description": "App to create and manage B2B Organizations and Cost Centers", "mustUpdateAt": "2022-08-28", diff --git a/messages/context.json b/messages/context.json index 45815fdd..bae5e58c 100644 --- a/messages/context.json +++ b/messages/context.json @@ -241,5 +241,31 @@ "store/b2b-organizations.user-widget.impersonating": "store/b2b-organizations.user-widget.impersonating", "store/b2b-organizations.request-new-organization.submit-button.create-new-request": "store/b2b-organizations.request-new-organization.submit-button.create-new-request", "store/b2b-organizations.stop-impersonation": "store/b2b-organizations.stop-impersonation", - "store/b2b-organizations.stop-impersonation-error": "store/b2b-organizations.stop-impersonation-error" + "store/b2b-organizations.stop-impersonation-error": "store/b2b-organizations.stop-impersonation-error", + "store/b2b-organizations.request-new-organization.newsletter.label": "store/b2b-organizations.request-new-organization.newsletter.label", + "store/b2b-organizations.request-new-organization.proof-attachment-description": "store/b2b-organizations.request-new-organization.proof-attachment-description", + "store/b2b-organizations.request-new-organization.proof-attachment": "store/b2b-organizations.request-new-organization.proof-attachment", + "store/b2b-organizations.request-new-organization.accept-terms-and-conditions": "store/b2b-organizations.request-new-organization.accept-terms-and-conditions", + "store/b2b-organizations.request-new-organization.privacyPolicies.label": "store/b2b-organizations.request-new-organization.privacyPolicies.label", + "store/b2b-organizations.request-new-organization.user-data":"store/b2b-organizations.request-new-organization.user-data", + "store/b2b-organizations.request-new-organization.form-container-subtitle":"store/b2b-organizations.request-new-organization.form-container-subtitle", + "store/b2b-organizations.request-new-organization.organization-data":"store/b2b-organizations.request-new-organization.organization-data", + "store/b2b-organizations.request-new-organization.organization-data-description":"store/b2b-organizations.request-new-organization.organization-data-description", + "store/b2b-organizations.request-new-organization.cnpj.label":"store/b2b-organizations.request-new-organization.cnpj.label", + "store/b2b-organizations.request-new-organization.free":"store/b2b-organizations.request-new-organization.free", + "store/b2b-organizations.request-new-organization.yes":"store/b2b-organizations.request-new-organization.yes", + "store/b2b-organizations.request-new-organization.no":"store/b2b-organizations.request-new-organization.no", + "store/b2b-organizations.request-new-organization.occupationArea":"store/b2b-organizations.request-new-organization.occupationArea", + "store/b2b-organizations.request-new-organization.occupationAreaDescription":"store/b2b-organizations.request-new-organization.occupationAreaDescription", + "store/b2b-organizations.request-new-organization.landline.label":"store/b2b-organizations.request-new-organization.landline.label", + "store/b2b-organizations.request-new-organization.register-billing-address":"store/b2b-organizations.request-new-organization.register-billing-address", + "store/b2b-organizations.request-new-organization.register-billing-address-description":"store/b2b-organizations.request-new-organization.register-billing-address-description", + "store/b2b-organizations.request-new-organization.form-title":"store/b2b-organizations.request-new-organization.form-title", + "store/b2b-organizations.request-new-organization.form-subtitle":"store/b2b-organizations.request-new-organization.form-subtitle", + "store/b2b-organizations.request-new-organization.form-title-description":"store/b2b-organizations.request-new-organization.form-title-description", + "store/b2b-organizations.request-new-organization.attach-file.label":"store/b2b-organizations.request-new-organization.attach-file.label", + "store/b2b-organizations.request-new-organization.attach-file.acceptedFormats":"store/b2b-organizations.request-new-organization.attach-file.acceptedFormats", + "store/b2b-organizations.request-new-organization.required-fields-panel.title":"store/b2b-organizations.request-new-organization.required-fields-panel.title", + "store/b2b-organizations.request-new-organization.state-registration-initials": "store/b2b-organizations.request-new-organization.state-registration-initials" + } diff --git a/messages/en.json b/messages/en.json index 978b2838..de736b1c 100644 --- a/messages/en.json +++ b/messages/en.json @@ -81,7 +81,7 @@ "admin/b2b-organizations.organization-details.button.remove-user-confirm": "Yes, remove user", "admin/b2b-organizations.organization-details.button.new": "New", "admin/b2b-organizations.organization-details.button.add": "Add", - "admin/b2b-organizations.organization-details.costCenters": "Cost Centers", + "admin/b2b-organizations.organization-details.costCenters": "Unidades de Negócio / Filiais", "admin/b2b-organizations.organization-details.status.active": "Active", "admin/b2b-organizations.organization-details.status.on-hold": "On Hold", "admin/b2b-organizations.organization-details.status.inactive": "Inactive", @@ -161,6 +161,10 @@ "store/b2b-organizations.request-new-organization.declined-request": "Your organization request submitted has been declined.", "store/b2b-organizations.request-new-organization.businessDocument": "Business document", "store/b2b-organizations.request-new-organization.businessDocument.helpText": "Optionally provide a business document for the default cost center. This can be a tax ID, VAT ID, CNPJ, or other document and will be attached to the cost center's orders.", + "store/b2b-organizations.request-new-organization.proof-attachment": "Proof attachments", + "store/b2b-organizations.request-new-organization.proof-attachment-description": "We sell items of restricted use, according to legislation, so it is necessary to attach the document below: Municipal Sanitary License in force", + "store/b2b-organizations.request-new-organization.attach-file.label": "Attach files", + "store/b2b-organizations.request-new-organization.accept-terms-and-conditions": "Accept terms and conditions", "store/b2b-organizations.organization-details.toast.add-costCenter-success": "Cost center created successfully", "store/b2b-organizations.organization-details.toast.add-costCenter-failure": "Cost center creation failed, see console for details", "store/b2b-organizations.organization-details.table.column-name.title": "Name", @@ -177,7 +181,7 @@ "store/b2b-organizations.organization-details.costCenters": "Cost Centers", "store/b2b-organizations.organization-details.add-costCenter": "Add cost center", "store/b2b-organizations.organization-details.add-costCenter.helpText": "Provide a default address for the cost center. Additional addresses may be added after creation.", - "store/b2b-organizations.organization-details.users": "Users", + "store/b2b-organizations.organization-details.users": "User registration / access profile", "store/b2b-organizations.organization-details.add-user": "Add New User", "store/b2b-organizations.organization-details.add-user.helpText": "If the inputted email does not match an existing user account on this store, a user account will be created for them.", "store/b2b-organizations.organization-details.edit-user": "Edit User", @@ -241,5 +245,28 @@ "store/b2b-organizations.user-widget.impersonating": "Impersonating:", "store/b2b-organizations.request-new-organization.submit-button.create-new-request": "Create a new request", "store/b2b-organizations.stop-impersonation": "Stop Impersonation", - "store/b2b-organizations.stop-impersonation-error": "Error stopping impersonation, see console for details." + "store/b2b-organizations.stop-impersonation-error": "Error stopping impersonation, see console for details.", + "store/b2b-organizations.request-new-organization.required-fields-panel.user-data": "User data", + "store/b2b-organizations.request-new-organization.newsletter.label": "I would like to receive a newsletter with promotions about Pardis", + "store/b2b-organizations.request-new-organization.privacyPolicies.label": "I agree with the Terms and Conditions and Privacy Policy", + "store/b2b-organizations.request-new-organization.state-registration-initials": "IE", + "store/b2b-organizations.request-new-organization.user-data": "User Data", + "store/b2b-organizations.request-new-organization.form-container-subtitle": "The user below will be assigned as the organization's administrator, and will be notified by email when the registration is approved.", + "store/b2b-organizations.request-new-organization.organization-data": "Company data", + "store/b2b-organizations.request-new-organization.organization-data-description": "Os dados a serem informados devem ser os mesmos do cartão CNPJ.", + "store/b2b-organizations.request-new-organization.cnpj.label": "CNPJ", + "store/b2b-organizations.request-new-organization.free": "Free", + "store/b2b-organizations.request-new-organization.yes": "Yes", + "store/b2b-organizations.request-new-organization.no": "No", + "store/b2b-organizations.request-new-organization.occupationArea": "Occupation Area", + "store/b2b-organizations.request-new-organization.occupationAreaDescription": "Description of the area of ​​activity", + "store/b2b-organizations.request-new-organization.landline.label": "Telephone", + "store/b2b-organizations.request-new-organization.register-billing-address": "Registration/Billing Address", + "store/b2b-organizations.request-new-organization.register-billing-address-description": "The delivery address can be entered in my account in my organization/cost center as long as it is within the same state (UF) as the registration address informed above.", + "store/b2b-organizations.request-new-organization.form-title": "Register your company and get access to exclusive benefits", + "store/b2b-organizations.request-new-organization.form-subtitle": "Fill in the form below to access our catalog and make your purchases on our website.", + "store/b2b-organizations.request-new-organization.form-title-description": "Your registration will undergo an analysis and you will receive a response within 24 business hours.", + "store/b2b-organizations.request-new-organization.attach-file.acceptedFormats": "Supported formats: jpg, png and pdf", + "store/b2b-organizations.request-new-organization.required-fields-panel.title": "To proceed, fill in all mandatory fields:" + } diff --git a/messages/pt.json b/messages/pt.json new file mode 100644 index 00000000..c57b3f28 --- /dev/null +++ b/messages/pt.json @@ -0,0 +1,35 @@ +{ + "store/b2b-organizations.request-new-organization.form-title": "Cadastre sua empresa e tenha acesso a benefícios exclusivos", + "store/b2b-organizations.request-new-organization.form-subtitle": "Preencha o formulário abaixo para ter acesso ao nosso catálogo e realizar suas compras em nosso site", + "store/b2b-organizations.request-new-organization.form-title-description": "Seu cadastro passará por uma análise e você receberá o retorno em até 24 horas úteis.", + "store/b2b-organizations.request-new-organization.user-data": "Dados do usuário", + "store/b2b-organizations.request-new-organization.form-container-subtitle": "O usuário abaixo será atribuído como administrador da organização, e será notificado por e-mail quando o cadastro for aprovado.", + "store/b2b-organizations.request-new-organization.organization-data": "Dados da empresa", + "store/b2b-organizations.request-new-organization.organization-data-description": "Os dados a serem informados devem ser os mesmos do cartão CNPJ.", + "store/b2b-organizations.request-new-organization.cnpj.label": "CNPJ", + "store/b2b-organizations.request-new-organization.organization-name.label": "Razão Social", + "store/b2b-organizations.request-new-organization.free": "Isento", + "store/b2b-organizations.request-new-organization.yes": "Sim", + "store/b2b-organizations.request-new-organization.no": "Não", + "store/b2b-organizations.request-new-organization.occupationArea": "Área de atuação", + "store/b2b-organizations.request-new-organization.occupationAreaDescription": "Descrição da área de atuação", + "store/b2b-organizations.request-new-organization.landline.label": "Telefone", + "store/b2b-organizations.request-new-organization.register-billing-address": "Endereço de Cadastro/Faturamento", + "store/b2b-organizations.request-new-organization.register-billing-address-description": "O endereço de entrega poderá ser inserido na minha conta em minha organização/centro de custo desde que seja dentro do mesmo estado (UF) do endereço de cadastro informado acima.", + "store/b2b-organizations.request-new-organization.proof-attachment": "Anexo de Comprovantes", + "store/b2b-organizations.request-new-organization.proof-attachment-description": "Comercializamos itens de uso restrito, conforme legislação, por isso é necessário anexar o documento abaixo: Licença Sanitária Municipal Vigente", + "store/b2b-organizations.request-new-organization.attach-file.label": "Anexar arquivos", + "store/b2b-organizations.request-new-organization.attach-file.acceptedFormats": "Formatos aceitos: jpg, png e pdf", + "store/b2b-organizations.request-new-organization.newsletter.label": "Gostaria de receber newsletter com promoções sobre a Pardis", + "store/b2b-organizations.request-new-organization.privacyPolicies.label": "Estou de acordo com os Termos e Condições e Políticas de Privacidade", + "store/b2b-organizations.request-new-organization.required-fields-panel.title": "Para avançar preencha todos os campos obrigatórios:", + "store/b2b-organizations.request-new-organization.required-fields-panel.user-data": "Dados do usuário", + + "store/b2b-organizations.request-new-organization.first-name.label": "Nome", + "store/b2b-organizations.request-new-organization.last-name.label": "Sobrenome", + "store/b2b-organizations.request-new-organization.email.label": "Email", + "store/b2b-organizations.request-new-organization.cpf.label": "CPF", + "store/b2b-organizations.request-new-organization.telephone.label": "Celular", + "store/b2b-organizations.request-new-organization.accept-terms-and-conditions": "Aceitar termos e condições", + "store/b2b-organizations.request-new-organization.state-registration-initials": "IE" +} diff --git a/react/components/CostCenterDetails.tsx b/react/components/CostCenterDetails.tsx index 8c1f4916..41ff164b 100644 --- a/react/components/CostCenterDetails.tsx +++ b/react/components/CostCenterDetails.tsx @@ -172,12 +172,12 @@ const CostCenterDetails: FunctionComponent = ({ const { permissions = [] } = permissionsData.checkUserPermission ?? {} - if(permissionsData.checkUserPermission.role.slug == "customer-admin"){ - permissions.push('add-users-organization') - permissions.push('create-cost-center-organization') - } + // if(permissionsData.checkUserPermission.role.slug == "customer-admin"){ + // permissions.push('add-users-organization') + // permissions.push('create-cost-center-organization') + // } - console.log(permissions) + // console.log(permissions) if (permissions.length) { setPermissionsState(permissions) @@ -260,9 +260,6 @@ const CostCenterDetails: FunctionComponent = ({ setDeleteAddressModalState({ addressId, isOpen: true }) } - const handleDeleteCostCenterModal = () => { - setDeleteCostCenterModalState({ isOpen: true }) - } const handleAddNewAddress = (address: AddressFormFields) => { const newAddress = { @@ -349,22 +346,6 @@ const CostCenterDetails: FunctionComponent = ({ handleCloseModals() } - const handleTogglePaymentTerm = (id: string) => { - let newTerms = paymentTerms - const termOption = paymentTermOptions.find(term => term.id === id) - - if (!termOption) return - const enabled = paymentTerms.find(term => term.id === id) - - if (enabled) { - newTerms = paymentTerms.filter(term => term.id !== enabled.id) - } else { - newTerms.push(termOption) - } - - // spread operator is used here so that react can see that the array has changed - setPaymentTerms([...newTerms]) - } const options = (addressId: string) => [ { @@ -451,19 +432,9 @@ const CostCenterDetails: FunctionComponent = ({ } onClick={() => handleUpdateCostCenter()} > - + Salvar - } > @@ -497,30 +468,6 @@ const CostCenterDetails: FunctionComponent = ({ } /> - {paymentTermOptions.length > 0 && ( - - {paymentTermOptions.map((option, index) => { - return ( -
- term.id === option.id)} - onChange={() => handleTogglePaymentTerm(option.id)} - disabled={ - !permissionsState.includes( - 'create-cost-center-organization' - ) - } - /> -
- ) - })} - - )} = ({ const { permissions = [] } = permissionsData.checkUserPermission ?? {} - if(permissionsData.checkUserPermission.role.slug == "customer-admin"){ - permissions.push('add-users-organization') - permissions.push('create-cost-center-organization') - } + // if(permissionsData.checkUserPermission.role.slug == "customer-admin"){ + // permissions.push('add-users-organization') + // permissions.push('create-cost-center-organization') + // } - console.log(permissions) + // console.log(permissions) if (permissions.length) { @@ -312,15 +312,6 @@ const OrganizationDetails: FunctionComponent = ({ ?.pagination?.total ?? 0, rowsOptions: [25, 50, 100], }} - toolbar={{ - newLine: { - label: formatMessage(messages.new), - handleCallback: () => setNewCostCenterModalState(true), - disabled: !permissionsState.includes( - 'create-cost-center-organization' - ), - }, - }} > diff --git a/react/components/RequestOrganizationForm.tsx b/react/components/RequestOrganizationForm.tsx index f0999da8..18430eb0 100644 --- a/react/components/RequestOrganizationForm.tsx +++ b/react/components/RequestOrganizationForm.tsx @@ -1,4 +1,4 @@ -import type { FC } from 'react' +import { FC, useRef } from 'react' import React, { useState, useContext, useEffect, Fragment } from 'react' import { Input, @@ -36,10 +36,10 @@ import CREATE_ORGANIZATION_REQUEST from '../graphql/createOrganizationRequest.gr import GET_ORGANIZATION_REQUEST from '../graphql/getOrganizationRequest.graphql' import GET_LOGISTICS from '../graphql/getLogistics.graphql' -import axios from 'axios'; -import api from './utils/api' - import '../styles.global.css' +import createOrganization from '../requests/createOrganization' +import attachFileToEntity from '../utils/attachFileToEntity' +import { masterData, types } from '../config/masterdata' const localStore = storageFactory(() => localStorage) let requestId = localStore.getItem('b2b-organizations_orgRequestId') ?? '' @@ -94,6 +94,45 @@ interface ModalMessage { active: boolean } + +function formataCNPJ(cnpj: string) { + //retira os caracteres indesejados... + cnpj = cnpj.replace(/[^\d]/g, ""); + + //realizar a formatação... + return cnpj.replace(/(\d{2})(\d{3})(\d{3})(\d{4})(\d{2})/, "$1.$2.$3/$4-$5"); +} + +function formataCPF(cpf: string) { + //retira os caracteres indesejados... + cpf = cpf.replace(/[^\d]/g, ""); + + //realizar a formatação... + return cpf.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, "$1.$2.$3-$4"); +} + +function formataPhone(phone: string) { + //retira os caracteres indesejados... + phone = phone.replace(/[^\d]/g, ""); + + //realizar a formatação... + return phone.replace(/(\d{2})(\d{5})(\d{4})/, "($1) $2-$3"); +} + +function formataPhoneEmpresa(phone: string) { + //retira os caracteres indesejados... + phone = phone.replace(/[^\d]/g, ""); + + //realizar a formatação... + return phone.replace(/(\d{2})(\d{2})(\d{5})(\d{4})/, "+$1 ($2) $3-$4"); +} + +function removeLettersAndSymbols(text: string) { + //retira os caracteres indesejados... + return text.replace(/[^\d]/g, ""); + +} + const ModalOrganizationMessage = (props: any) => { const settings: ModalMessage = props.settings return ( @@ -113,12 +152,20 @@ const ModalOrganizationMessage = (props: any) => { ) } +const PendingItem = ({ children }: { children: string }) => { + return {children} +} + +const organizationAreaOthersValue = 'others' + const RequestOrganizationForm: FC = () => { const { formatMessage, formatDate } = useIntl() const { culture: { country }, } = useRuntime() + const countryStateInputInterval: { current: number | null } = useRef(null) + const [modalSettings, setModalSettings] = useState( { title: 'Cadastro enviado!', @@ -132,9 +179,6 @@ const RequestOrganizationForm: FC = () => { const [permission, setPermission] = useState(false) - const [empresa, setEmpresa] = useState({razao: '',ie: '',icms: ''}) - - const { showToast } = useContext(ToastContext) const sessionResponse: any = useSessionResponse() const handles = useCssHandles(CSS_HANDLES) @@ -147,8 +191,7 @@ const RequestOrganizationForm: FC = () => { } ) - const [loadFunc, setLoadFunc] = useState(false) - const [lockFunc, setLockFunc] = useState(true) + const [pendings, setPendings] = useState([]) const [createOrganizationRequest] = useMutation(CREATE_ORGANIZATION_REQUEST) @@ -157,13 +200,14 @@ const RequestOrganizationForm: FC = () => { addValidation(getEmptyAddress(country)) ) + const { acronym, image } = masterData[types.ORGANIZATION] + const formStateModel = { organizationName: '', - organizationType: '', - organizationPublic: '', organizationIE: '', - organizationICMS: false, + organizationICMS: null, organizationArea: '', + organizationAreaOthers: '', organizationPhone: '', newsletter: false, firstName: '', @@ -175,9 +219,10 @@ const RequestOrganizationForm: FC = () => { businessDocument: '', isSubmitting: false, submitted: true, + file: null } - const [formState, setFormState] = useState(formStateModel) + const [formState, setFormState] = useState(formStateModel) const [hasProfile, setHasProfile] = useState(false) @@ -195,6 +240,89 @@ const RequestOrganizationForm: FC = () => { } }, [sessionResponse]) + const clearCountryStateInterval = () => { + if (countryStateInputInterval.current) clearInterval(countryStateInputInterval.current) + } + + const countryStateInputScript = () => { + countryStateInputInterval.current = setInterval(() => { + const countryState = document.querySelector('.vtex-address-form__state') as HTMLDivElement + if (!countryState) return + countryState.style.display = 'none' + const newGridTemplateAreas = '"endereco endereco" "numero complemento" "bairro cidade" "destinatario destinatario"' + if (countryState.parentElement) countryState.parentElement.style.gridTemplateAreas = newGridTemplateAreas + clearCountryStateInterval() + }, 1000) + } + + useEffect(() => { + countryStateInputScript() + return function cleanUp() { + clearCountryStateInterval() + } + }, []) + + useEffect(() => { + type ValidationType = { + isValid: boolean, + stringIfInvalid: string + } + + const validations: ValidationType[] = [ + { + isValid: formState.firstName?.trim() !== '', + stringIfInvalid: `${translateMessage(messages.userData)} > ${translateMessage(messages.firstName)}` + }, + { + isValid: formState.lastName?.trim() !== '', + stringIfInvalid: `${translateMessage(messages.userData)} > ${translateMessage(messages.lastName)}` + }, + { + isValid: formState.email?.trim() !== '', + stringIfInvalid: `${translateMessage(messages.userData)} > ${translateMessage(messages.email)}` + }, + { + isValid: formState.cpf !== '', + stringIfInvalid: `${translateMessage(messages.userData)} > ${translateMessage(messages.cpf)}` + }, + { + isValid: formState.telephone !== '', + stringIfInvalid: `${translateMessage(messages.userData)} > ${translateMessage(messages.telephone)}` + }, + { + isValid: formState.businessDocument !== '', + stringIfInvalid: `${translateMessage(messages.organizationData)} > ${translateMessage(messages.cnpjLabel)}` + }, + { + isValid: formState.organizationName !== '', + stringIfInvalid: `${translateMessage(messages.organizationData)} > ${translateMessage(messages.organizationName)}` + }, + { + isValid: formState.organizationIE !== '', + stringIfInvalid: `${translateMessage(messages.organizationData)} > ${translateMessage(messages.stateRegistrationInitials)}` + }, + { + isValid: formState.organizationArea !== '' && (formState.organizationArea !== organizationAreaOthersValue || (formState.organizationArea == organizationAreaOthersValue && formState.organizationAreaOthers !== '')), + stringIfInvalid: `${translateMessage(messages.organizationData)} > ${translateMessage(messages.occupationArea)}` + }, + { + isValid: formState.organizationPhone !== '', + stringIfInvalid: `${translateMessage(messages.organizationData)} > ${translateMessage(messages.telephone + )}` + }, + { + isValid: permission, + stringIfInvalid: translateMessage(messages.acceptTermsAndConditions) + }, + ] + + setPendings(() => validations.reduce((previous: string[], current: ValidationType) => { + if (current.isValid) return previous + return [...previous, current.stringIfInvalid] + }, [])) + + }, [formState, permission]) + const translateMessage = (message: MessageDescriptor) => { return formatMessage(message) } @@ -215,91 +343,6 @@ const RequestOrganizationForm: FC = () => { value: code, })) } - - const handleSefazApi = (cnpj: string) => { - console.log("call sefaz before validate") - if (cnpj.length == 18) { - cnpj = cnpj.replace(".", "").replace(".", "").replace("/", "").replace("-", "") - } - if (cnpj.length == 14) { - console.log("call sefaz after validate") - //insert loading here - setLoadFunc(true) - api.post('/receita-federal/cnpj', { - cnpj: cnpj - }).then((data: any) => { - //input all camps - - - - console.log(data?.data) - - if (data?.data?.code == 200) { - - console.log(data?.data?.data) - setEmpresa({ - ...empresa, - razao: data?.data?.data[0]?.razao_social - }) - setFormState({ - ...formState, - businessDocument: data?.data?.data[0]?.cnpj, - organizationName: data?.data?.data[0]?.razao_social, - }) - - if (data?.data?.data[0]?.situacao_cadastral === "ATIVA") { - - api.post('/sintegra/unificada', { - cnpj: cnpj, - uf: data?.data?.data[0]?.endereco_uf - }).then((response: any) => { - console.log(response) - if (response?.data?.code == 200) { - setFormState({ - ...formState, - organizationIE: response?.data?.data[0]?.inscricao_estadual - }) - setEmpresa({ - ...empresa, - ie: response?.data?.data[0]?.inscricao_estadual - }) - } - return [data?.data, response?.data] - - }) - //unlock unseen inputs - setLockFunc(false) - - //remove loading here - setLoadFunc(false) - } else { - setModalSettings({ - title: 'Seu CNPJ consta como inativo!', - message: 'Você deverá regularizar sua situação. E em caso de dúvidas, entre em contato com o sac.', - buttonText: 'Voltar para a loja', - buttonLink: '/', - active: true - }) - } - - - - } - }).catch((err) => { - //remove loading here - setLoadFunc(false) - setModalSettings({ - title: 'Erro!', - message: 'Ocorreu um erro ao recuperar os dados do CNPJ informado.', - buttonText: 'Fechar mensagem', - buttonLink: '', - active: true - }) - console.error(err) - }) - } - } - const handleAddressChange = (changedAddress: AddressFormFields) => { const curAddress = addressState @@ -308,15 +351,6 @@ const RequestOrganizationForm: FC = () => { setAddressState(newAddress) } - function getBase64(file: Blob) { - return new Promise((resolve, reject) => { - const reader = new FileReader(); - reader.readAsDataURL(file); - reader.onload = () => resolve(reader.result); - reader.onerror = error => reject(error); - }); - } - const handleNewOrganizationRequest = () => { localStore.removeItem('b2b-organizations_orgRequestId') setFormState({ @@ -325,15 +359,29 @@ const RequestOrganizationForm: FC = () => { }) setAddressState(() => addValidation(getEmptyAddress(country))) } - - const handleSubmit = () => { - console.log('click') + const handleSubmit = async () => { setFormState({ ...formState, isSubmitting: true, submitted: true, }) + const data = { + name: formState.organizationName, + cnpj: formState.businessDocument, + phone: formState.organizationPhone, + ie: formState.organizationIE, + icms: formState.organizationICMS, + area: formState.organizationArea, + areaOthers: formState.organizationAreaOthers + } + + createOrganization(data) + .then(data => { + const file = (document.querySelector('.file-button > input[type="file"]') as HTMLInputElement).files?.[0] + if (file) attachFileToEntity(acronym, data.DocumentId, image, file) + }) + const organizationRequest = { name: formState.organizationName, b2bCustomerAdmin: { @@ -345,12 +393,11 @@ const RequestOrganizationForm: FC = () => { }, defaultCostCenter: { name: formState.organizationName, - type: formState.organizationType, - organizationPublic: formState.organizationPublic, ie: formState.organizationIE, icms: formState.organizationICMS, area: formState.organizationArea, - phone: formState.organizationPhone, + areaOthers: formState.organizationAreaOthers, + phone: removeLettersAndSymbols(formState.organizationPhone), newsletter: formState.newsletter, address: { addressId: addressState.addressId.value, @@ -373,64 +420,6 @@ const RequestOrganizationForm: FC = () => { } - const options = { - method: 'POST', - url: 'https://hppardis.environment.com.br/api/dataentities/MO/documents', - headers: { Accept: 'application/vnd.vtex.ds.v10+json', 'Content-Type': 'application/json' }, - data: { - name: formState.organizationName, - cnpj: formState.businessDocument, - phone: formState.organizationPhone, - public: formState.organizationPublic, - ie: formState.organizationIE, - icms: formState.organizationICMS, - type: formState.organizationType, - area: formState.organizationArea - } - }; - - axios.request(options).then(function (response) { - console.log(response.data); - var contentfile - - var id = response.data.id - var input = document.querySelector('.file-button > input[type="file"]') as HTMLInputElement; - - if (input != null) { - // 👉️ input has type HTMLInputElement here - var file = input.files - - if (file != null) { - getBase64(file[0]).then( - data => contentfile = data - ); - } - - } - if (contentfile) { - const form = new FormData(); - - form.append('file', `${contentfile}`) - - const options = { - method: 'POST', - url: `https://hppardis.environment.com.br/api/dataentities/MO/documents/${id}/arquivo/attachments`, - headers: { 'Content-Type': 'multipart/form-data; boundary=---011000010111000001101001' }, - data: '[form]' - }; - - axios.request(options).then(function (res) { - console.log(res.data); - }).catch(function (error) { - console.error(error); - }); - } - - }).catch(function (error) { - console.error(error); - }); - - createOrganizationRequest({ variables: { input: organizationRequest, @@ -439,34 +428,18 @@ const RequestOrganizationForm: FC = () => { .then(response => { const statusRequest = response.data.createOrganizationRequest.status - console.log(response) - if (statusRequest === 'pending') { toastMessage(messages.toastPending) setFormState({ ...formState, isSubmitting: false, }) - setModalSettings({ - title: 'Cadastro pendente!', - message: 'Estamos analisando os dados enviados e após isso vamos liberar o seu cadastro. Aguarde nosso e-mail com mais informações e liberar seu cadastro em até 24 horas. Por enquanto, você já pode comprar itens de USO LIVRE.', - buttonText: 'Voltar para a loja', - buttonLink: '/', - active: true - }) } else if (statusRequest === 'approved') { toastMessage(messages.toastApproved) setFormState({ ...formState, isSubmitting: false, }) - setModalSettings({ - title: 'Cadastro Aprovado!', - message: '', - buttonText: 'Voltar para a loja', - buttonLink: '/', - active: true - }) } else { requestId = response.data.createOrganizationRequest.id localStore.setItem('b2b-organizations_orgRequestId', requestId) @@ -507,14 +480,15 @@ const RequestOrganizationForm: FC = () => { pageHeader={

- Cadastre sua empresa e tenha acesso a benefícios exclusivos. +

- Preencha o formulário abaixo para ter acesso ao nosso catálogo e realizar suas compras em nosso site. +

- Seu cadastro passará por uma análise e você receberá o retorno em até 24 horas úteis. +

+
} > @@ -602,10 +576,11 @@ const RequestOrganizationForm: FC = () => { ) : (
+
@@ -633,7 +608,7 @@ const RequestOrganizationForm: FC = () => { size="large" label={translateMessage(messages.lastName)} value={formState.lastName} - placeholder={"Último Nome"} + placeholder={translateMessage(messages.lastName)} onChange={(e: React.ChangeEvent) => { setFormState({ @@ -668,12 +643,14 @@ const RequestOrganizationForm: FC = () => { size="large" label={translateMessage(messages.cpf)} value={formState.cpf} + maxLength={'14'} placeholder={"000.000.000-00"} onChange={(e: React.ChangeEvent) => { + setFormState({ ...formState, - cpf: e.target.value, + cpf: formataCPF(e.target.value), }) }} /> @@ -685,12 +662,14 @@ const RequestOrganizationForm: FC = () => { size="large" label={translateMessage(messages.telephone)} value={formState.telephone} + maxLength={'15'} + placeholder={"(00) 00000-000"} onChange={(e: React.ChangeEvent) => { setFormState({ ...formState, - telephone: e.target.value, + telephone: formataPhone(e.target.value), }) }} /> @@ -699,8 +678,8 @@ const RequestOrganizationForm: FC = () => {
@@ -710,14 +689,15 @@ const RequestOrganizationForm: FC = () => { ) => { + setFormState({ ...formState, - businessDocument: e.target.value, + businessDocument: formataCNPJ(e.target.value), }) }} /> @@ -725,74 +705,16 @@ const RequestOrganizationForm: FC = () => {
-
- {!lockFunc ? <> -
- -
- { - setFormState({ - ...formState, - organizationPublic: value, - }) - }} - required - /> -
-
-
-
- -
- { - setFormState({ - ...formState, - organizationType: value, - }) - }} - required - /> -
-
-
-
) => { setFormState({ @@ -811,7 +733,7 @@ const RequestOrganizationForm: FC = () => { autocomplete="off" size="large" label={"IE"} - disabled={formState.organizationIE == "Isento" || empresa.ie != ''} + readOnly={formState.organizationIE == "Isento"} value={formState.organizationIE} onChange={(e: React.ChangeEvent) => { setFormState({ @@ -822,10 +744,9 @@ const RequestOrganizationForm: FC = () => { required /> { formState.organizationIE == "Isento" ? @@ -850,7 +771,7 @@ const RequestOrganizationForm: FC = () => { checked={formState.organizationICMS} id="option-0" name="default-checkbox-group" - label={"Sim"} + label={translateMessage(messages.yes)} onChange={() => { setFormState({ ...formState, @@ -860,10 +781,10 @@ const RequestOrganizationForm: FC = () => { value="option-0" /> { setFormState({ ...formState, @@ -880,7 +801,7 @@ const RequestOrganizationForm: FC = () => { > { { value: 'Laboratório de Análises', label: 'Laboratório de Análises' }, { value: 'Instituição de Ensino', label: 'Instituição de Ensino' }, { value: 'Veterinária & Pet', label: 'Veterinária & Pet' }, - { value: 'Outros', label: 'Outros' } + { value: organizationAreaOthersValue, label: 'Outros' } ]} value={formState.organizationArea} onChange={(__: any, value: string) => { @@ -902,6 +823,30 @@ const RequestOrganizationForm: FC = () => { required />
+ + { + formState.organizationArea === organizationAreaOthersValue && +
+ ) => { + setFormState({ + ...formState, + organizationAreaOthers: e.target.value, + }) + }} + required + /> +
+ } + +
{ ) => { setFormState({ ...formState, - organizationPhone: e.target.value, + organizationPhone: formataPhoneEmpresa(e.target.value), }) }} required @@ -925,116 +871,135 @@ const RequestOrganizationForm: FC = () => {
- : null - } - {!lockFunc ? - <> - + +
-
- - - - - - - - - -
+ + - - -
+ + + +
-
- - -
- Formatos aceitos: jpg, png e pdf -
- -
- { + + +
+ +
+ + { setFormState({ ...formState, - newsletter: !formState.newsletter, + file: ev.target?.files?.[0], }) }} - value="newsletter" - /> -
-
- { - setPermission(!permission) - }} - value="permission" - /> + multiple />
- - - : null - } + + + + +
+ +
+ { + setFormState({ + ...formState, + newsletter: !formState.newsletter, + }) + + }} + value="newsletter" + /> +
+
+ { + setPermission(!permission) + }} + value="permission" + /> +
+ +
-
+
- {!lockFunc ? - - : null + { + pendings.length + ?
+ + + + + { + pendings.map((pending: string) => {pending}) + } +
+ : false } + +
diff --git a/react/components/utils/messages.ts b/react/components/utils/messages.ts index 907de8a1..b44b1c24 100644 --- a/react/components/utils/messages.ts +++ b/react/components/utils/messages.ts @@ -246,6 +246,66 @@ export const organizationRequestMessages = defineMessages({ businessDocumentHelp: { id: `${storePrefix}request-new-organization.businessDocument.helpText`, }, + userData: { + id: `${storePrefix}request-new-organization.user-data`, + }, + formContainerSubTitle: { + id: `${storePrefix}request-new-organization.form-container-subtitle`, + }, + organizationData: { + id: `${storePrefix}request-new-organization.organization-data`, + }, + organizationDataDescription: { + id: `${storePrefix}request-new-organization.organization-data-description`, + }, + cnpjLabel: { + id: `${storePrefix}request-new-organization.cnpj.label` + }, + free: { + id: `${storePrefix}request-new-organization.free` + }, + yes: { + id: `${storePrefix}request-new-organization.yes` + }, + no: { + id: `${storePrefix}request-new-organization.no` + }, + occupationArea: { + id: `${storePrefix}request-new-organization.occupationArea` + }, + occupationAreaDescription: { + id: `${storePrefix}request-new-organization.occupationAreaDescription` + }, + landline: { + id: `${storePrefix}request-new-organization.landline.label` + }, + registerBillingAddress: { + id: `${storePrefix}request-new-organization.register-billing-address` + }, + registerBillingAddressDescription: { + id: `${storePrefix}request-new-organization.register-billing-address-description` + }, + proofAttachment: { + id: `${storePrefix}request-new-organization.proof-attachment` + }, + proofAttachmentDescription: { + id: `${storePrefix}request-new-organization.proof-attachment-description` + }, + newsletterLabel: { + id: `${storePrefix}request-new-organization.newsletter.label` + }, + privacyPoliciesLabel: { + id: `${storePrefix}request-new-organization.privacyPolicies.label` + }, + stateRegistrationInitials: { + id: `${storePrefix}request-new-organization.state-registration-initials` + }, + attachFiles: { + id: `${storePrefix}request-new-organization.attach-file.label` + }, + acceptTermsAndConditions: { + id: `${storePrefix}request-new-organization.accept-terms-and-conditions` + } }) export const userWidgetMessages = defineMessages({ diff --git a/react/config/masterdata.ts b/react/config/masterdata.ts new file mode 100644 index 00000000..83267454 --- /dev/null +++ b/react/config/masterdata.ts @@ -0,0 +1,12 @@ +const types = { + ORGANIZATION: 'ORGANIZATION' +} + +const masterData = { + [types.ORGANIZATION]: { + acronym: 'MO', + image: 'arquivo' + } +} + +export { masterData, types } diff --git a/react/requests/createOrganization.ts b/react/requests/createOrganization.ts new file mode 100644 index 00000000..5b06e4fa --- /dev/null +++ b/react/requests/createOrganization.ts @@ -0,0 +1,37 @@ +import { masterData, types } from "../config/masterdata" + +type createOrganizationDataType = { + name: string, + cnpj: string, + phone: string, + ie: string, + icms: string, + area: string, + areaOthers: string +} + +const createOrganization = async (data: createOrganizationDataType) => { + try { + + const url = `/api/dataentities/${masterData[types.ORGANIZATION].acronym}/documents` + const options = { + method: 'POST', + headers: { + Accept: 'application/vnd.vtex.ds.v10+json', + 'Content-Type': 'application/json' + }, + body: JSON.stringify(data) + } + + const request = await fetch(url, options) + const acceptedStatus = [200, 201, 204] + if(!acceptedStatus.includes(request.status)) throw new Error('') + + return request.json() + + } catch(__) { + return + } +} + +export default createOrganization diff --git a/react/styles.global.css b/react/styles.global.css index 8e5f2165..5be3df4a 100644 --- a/react/styles.global.css +++ b/react/styles.global.css @@ -135,11 +135,7 @@ select, /* Form geral */ -.customb2b-pageBody .hppardis-b2b-organizations-1-x-newOrganizationInput input:not([type=checkbox]) { - margin-top: 10px !important; -} - -.customb2b-pageBody .hppardis-b2b-organizations-1-x-newOrganizationInput span { +.customb2b-pageBody .hermespardini-b2b-organizations-1-x-newOrganizationInput span { margin-top: 5px !important; font: normal normal normal 13px/18px Poppins; color: #111; @@ -257,7 +253,6 @@ select, color: #707070; } .file-button { - margin-top: 20px !important; margin-bottom: 5px !important; } @@ -349,12 +344,12 @@ select, } -.hppardis-b2b-organizations-1-x-newOrganizationButtonsContainer { - align-items: center; - justify-content: center; +.hermespardini-b2b-organizations-1-x-newOrganizationButtonsContainer { + align-items: center !important; + justify-content: center !important; } -.hppardis-b2b-organizations-1-x-newOrganizationButtonsContainer button { +.hermespardini-b2b-organizations-1-x-newOrganizationButtonsContainer button { width: 184px !important; height: 38px !important; background: #12576E 0% 0% no-repeat padding-box !important; @@ -370,4 +365,31 @@ select, align-items: center !important; display: flex !important; cursor: pointer; +} + +.hermespardini-b2b-organizations-1-x-newOrganizationButtonsContainer button[disabled] { + width: 184px !important; + height: 38px !important; + background: #696969 0% 0% no-repeat padding-box !important; + border-radius: 2px !important; + text-align: center !important; + font-size: 13px !important; + line-height: 18px !important; + font-weight: 400 !important; + text-transform: none !important; + letter-spacing: 0px !important; + color: #FFFFFF !important; + justify-content: center !important; + align-items: center !important; + display: flex !important; + cursor: pointer; +} + + +.styleguide__pageBlock > div:first-child{ + margin-bottom: 20px !important; +} + +.vtex-input-prefix__group{ + height: 38px; } \ No newline at end of file diff --git a/react/tsconfig.json b/react/tsconfig.json index 9ac901b7..8e825d5c 100644 --- a/react/tsconfig.json +++ b/react/tsconfig.json @@ -1,6 +1,7 @@ { "extends": "@vtex/tsconfig", "compilerOptions": { + "jsx": "react", "noEmitOnError": false, "lib": [ "dom" diff --git a/react/utils/addresses.ts b/react/utils/addresses.ts index 323838d5..4325bf75 100644 --- a/react/utils/addresses.ts +++ b/react/utils/addresses.ts @@ -25,7 +25,7 @@ export const getEmptyAddress = (country: string) => { export const isValidAddress = (address: AddressFormFields) => { // check for empty address - if (!address.street.value || !address.receiverName.value) return false + if (!address.street.value || !address.receiverName.value || !address.state.value) return false for (const field in address) { if (address[field].valid === false) { diff --git a/react/utils/attachFileToEntity.ts b/react/utils/attachFileToEntity.ts new file mode 100644 index 00000000..3592853d --- /dev/null +++ b/react/utils/attachFileToEntity.ts @@ -0,0 +1,22 @@ +const attachFileToEntity = async (acronym: String, id: string, field: string, file: File) => { + try { + const form = new FormData(); + form.append('file', file); + + const options = { + method: 'POST', + body: form + }; + + + const request = await fetch(`/api/dataentities/${acronym}/documents/${id}/${field}/attachments`, options) + const acceptedStatus = [200, 201, 204] + if(!acceptedStatus.includes(request.status)) throw new Error('') + + return request.json() + } catch(__) { + return false + } +} + +export default attachFileToEntity From ec9c8093532fcfe1ffe0a452fcf4fe7e14c4cb36 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C2=A8Bruno?= <¨bruno.lopes@corebiz.ag¨> Date: Mon, 8 Aug 2022 15:29:11 -0300 Subject: [PATCH 15/17] feat: new camps --- messages/context.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/messages/context.json b/messages/context.json index bae5e58c..a68b419c 100644 --- a/messages/context.json +++ b/messages/context.json @@ -266,6 +266,6 @@ "store/b2b-organizations.request-new-organization.attach-file.label":"store/b2b-organizations.request-new-organization.attach-file.label", "store/b2b-organizations.request-new-organization.attach-file.acceptedFormats":"store/b2b-organizations.request-new-organization.attach-file.acceptedFormats", "store/b2b-organizations.request-new-organization.required-fields-panel.title":"store/b2b-organizations.request-new-organization.required-fields-panel.title", - "store/b2b-organizations.request-new-organization.state-registration-initials": "store/b2b-organizations.request-new-organization.state-registration-initials" - + "store/b2b-organizations.request-new-organization.state-registration-initials": "store/b2b-organizations.request-new-organization.state-registration-initials", + "store/b2b-organizations.request-new-organization.required-fields-panel.user-data": "store/b2b-organizations.request-new-organization.required-fields-panel.user-data" } From 504cc41ded52020f0800a13fd42cf0427ba18580 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C2=A8Bruno?= <¨bruno.lopes@corebiz.ag¨> Date: Tue, 9 Aug 2022 14:15:04 -0300 Subject: [PATCH 16/17] feat: new camps in form --- react/MyOrganizationLink.tsx | 1 - react/admin/OrganizationRequestDetails.tsx | 37 +- react/components/OrganizationUsersTable.tsx | 2 - react/components/RequestOrganizationForm.tsx | 550 ++++++++++--------- react/components/utils/api.ts | 12 +- react/components/utils/messages.ts | 34 +- react/config/masterdata.ts | 6 +- react/requests/createOrganization.ts | 34 +- react/utils/addresses.ts | 7 +- react/utils/attachFileToEntity.ts | 23 +- 10 files changed, 384 insertions(+), 322 deletions(-) diff --git a/react/MyOrganizationLink.tsx b/react/MyOrganizationLink.tsx index 04c8d730..7a701cac 100644 --- a/react/MyOrganizationLink.tsx +++ b/react/MyOrganizationLink.tsx @@ -1,7 +1,6 @@ import type { FC } from 'react' const MyOrganizationLink: FC = ({ render }: any) => { - return render([ { name: 'Cadastro da empresa', diff --git a/react/admin/OrganizationRequestDetails.tsx b/react/admin/OrganizationRequestDetails.tsx index c62f0ea4..307f1f79 100644 --- a/react/admin/OrganizationRequestDetails.tsx +++ b/react/admin/OrganizationRequestDetails.tsx @@ -151,11 +151,12 @@ const OrganizationRequestDetails: FunctionComponent = () => {
- {data.getOrganizationRequestById.b2bCustomerAdmin.email}
- {data.getOrganizationRequestById.b2bCustomerAdmin.cpf}
- {data.getOrganizationRequestById.b2bCustomerAdmin.telephone}
- - + {data.getOrganizationRequestById.b2bCustomerAdmin.email} +
+ {data.getOrganizationRequestById.b2bCustomerAdmin.cpf} +
+ {data.getOrganizationRequestById.b2bCustomerAdmin.telephone} +

@@ -187,15 +188,25 @@ const OrganizationRequestDetails: FunctionComponent = () => { />

)} - - Tipo: {data.getOrganizationRequestById.defaultCostCenter.type}
- Publico: {data.getOrganizationRequestById.defaultCostCenter.organizationPublic}
- Inscrição estadual: {data.getOrganizationRequestById.defaultCostCenter.ie}
- ICMS: {data.getOrganizationRequestById.defaultCostCenter.icms ? 'Sim' : 'Não'}
- Area de atuação: {data.getOrganizationRequestById.defaultCostCenter.area}
- Telefone: {data.getOrganizationRequestById.defaultCostCenter.phone}
+ Tipo: {data.getOrganizationRequestById.defaultCostCenter.type} +
+ Publico:{' '} + {data.getOrganizationRequestById.defaultCostCenter.organizationPublic} +
+ Inscrição estadual:{' '} + {data.getOrganizationRequestById.defaultCostCenter.ie} +
+ ICMS:{' '} + {data.getOrganizationRequestById.defaultCostCenter.icms + ? 'Sim' + : 'Não'} +
+ Area de atuação:{' '} + {data.getOrganizationRequestById.defaultCostCenter.area} +
+ Telefone: {data.getOrganizationRequestById.defaultCostCenter.phone} +

- = ({ } } - console.log(permissions) - const canEdit = isAdmin || permissions.includes('add-users-organization') const canEditSales = isAdmin || diff --git a/react/components/RequestOrganizationForm.tsx b/react/components/RequestOrganizationForm.tsx index 075d048e..1520686f 100644 --- a/react/components/RequestOrganizationForm.tsx +++ b/react/components/RequestOrganizationForm.tsx @@ -1,5 +1,5 @@ -import { FC, useRef } from 'react' -import React, { useState, useContext, useEffect, Fragment } from 'react' +import type { FC } from 'react' +import React, { useRef, useState, useContext, useEffect, Fragment } from 'react' import { Input, Button, @@ -9,7 +9,7 @@ import { Alert, Spinner, Dropdown, - Checkbox + Checkbox, } from 'vtex.styleguide' import { AddressRules, @@ -24,8 +24,8 @@ import { useCssHandles } from 'vtex.css-handles' import { useQuery, useMutation } from 'react-apollo' import { useIntl, FormattedMessage } from 'react-intl' import { useRuntime } from 'vtex.render-runtime' -import 'vtex.country-codes/locales' +import 'vtex.country-codes/locales' import { organizationRequestMessages as messages } from './utils/messages' import storageFactory from '../utils/storage' import { getSession } from '../modules/session' @@ -35,7 +35,6 @@ import { getEmptyAddress } from '../utils/addresses' import CREATE_ORGANIZATION_REQUEST from '../graphql/createOrganizationRequest.graphql' import GET_ORGANIZATION_REQUEST from '../graphql/getOrganizationRequest.graphql' import GET_LOGISTICS from '../graphql/getLogistics.graphql' - import '../styles.global.css' import createOrganization from '../requests/createOrganization' import attachFileToEntity from '../utils/attachFileToEntity' @@ -87,73 +86,88 @@ const CreateNewOrganizationRequest = (props: any) => { } interface ModalMessage { - title: string, - message: string, - buttonText: string, - buttonLink: string, + title: string + message: string + buttonText: string + buttonLink: string active: boolean } - function formataCNPJ(cnpj: string) { - //retira os caracteres indesejados... - cnpj = cnpj.replace(/[^\d]/g, ""); + // retira os caracteres indesejados... + cnpj = cnpj.replace(/[^\d]/g, '') - //realizar a formatação... - return cnpj.replace(/(\d{2})(\d{3})(\d{3})(\d{4})(\d{2})/, "$1.$2.$3/$4-$5"); + // realizar a formatação... + return cnpj.replace(/(\d{2})(\d{3})(\d{3})(\d{4})(\d{2})/, '$1.$2.$3/$4-$5') } function formataCPF(cpf: string) { - //retira os caracteres indesejados... - cpf = cpf.replace(/[^\d]/g, ""); + // retira os caracteres indesejados... + cpf = cpf.replace(/[^\d]/g, '') - //realizar a formatação... - return cpf.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, "$1.$2.$3-$4"); + // realizar a formatação... + return cpf.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, '$1.$2.$3-$4') } function formataPhone(phone: string) { - //retira os caracteres indesejados... - phone = phone.replace(/[^\d]/g, ""); + // retira os caracteres indesejados... + phone = phone.replace(/[^\d]/g, '') - //realizar a formatação... - return phone.replace(/(\d{2})(\d{5})(\d{4})/, "($1) $2-$3"); + // realizar a formatação... + return phone.replace(/(\d{2})(\d{5})(\d{4})/, '($1) $2-$3') } function formataPhoneEmpresa(phone: string) { - //retira os caracteres indesejados... - phone = phone.replace(/[^\d]/g, ""); + // retira os caracteres indesejados... + phone = phone.replace(/[^\d]/g, '') - //realizar a formatação... - return phone.replace(/(\d{2})(\d{2})(\d{5})(\d{4})/, "+$1 ($2) $3-$4"); + // realizar a formatação... + return phone.replace(/(\d{2})(\d{2})(\d{5})(\d{4})/, '+$1 ($2) $3-$4') } function removeLettersAndSymbols(text: string) { - //retira os caracteres indesejados... - return text.replace(/[^\d]/g, ""); - + // retira os caracteres indesejados... + return text.replace(/[^\d]/g, '') } const ModalOrganizationMessage = (props: any) => { - const settings: ModalMessage = props.settings - return ( - {settings.active ? - - : null} - ) + const { settings } = props + + return ( + + {settings.active ? ( + + ) : null} + + ) } const PendingItem = ({ children }: { children: string }) => { - return {children} + return ( + + {children} + + ) } const organizationAreaOthersValue = 'others' @@ -166,19 +180,17 @@ const RequestOrganizationForm: FC = () => { const countryStateInputInterval: { current: number | null } = useRef(null) - const [modalSettings, setModalSettings] = useState( - { - title: 'Cadastro enviado!', - message: 'Vamos analisar os dados enviados e liberar o seu cadastro. Aguarde nosso e-mail com mais informações e liberar seu cadastro em até 24 horas. Por enquanto, você já pode comprar itens de USO LIVRE.', - buttonText: 'Voltar para a loja', - buttonLink: '/', - active: false - } - ) + const [modalSettings, setModalSettings] = useState({ + title: 'Cadastro enviado!', + message: + 'Vamos analisar os dados enviados e liberar o seu cadastro. Aguarde nosso e-mail com mais informações e liberar seu cadastro em até 24 horas. Por enquanto, você já pode comprar itens de USO LIVRE.', + buttonText: 'Voltar para a loja', + buttonLink: '/', + active: false, + }) const [permission, setPermission] = useState(false) - const { showToast } = useContext(ToastContext) const sessionResponse: any = useSessionResponse() const handles = useCssHandles(CSS_HANDLES) @@ -193,7 +205,6 @@ const RequestOrganizationForm: FC = () => { const [pendings, setPendings] = useState([]) - const [createOrganizationRequest] = useMutation(CREATE_ORGANIZATION_REQUEST) const [addressState, setAddressState] = useState(() => @@ -220,13 +231,24 @@ const RequestOrganizationForm: FC = () => { businessDocument: '', isSubmitting: false, submitted: true, - file: null + file: null, } const [formState, setFormState] = useState(formStateModel) const [hasProfile, setHasProfile] = useState(false) + const translateMessage = (message: MessageDescriptor) => { + return formatMessage(message) + } + + const toastMessage = (message: MessageDescriptor) => { + const translatedMessage = translateMessage(message) + const action = undefined + + showToast({ message: translatedMessage, action }) + } + useEffect(() => { if (!sessionResponse || hasProfile) return @@ -242,22 +264,30 @@ const RequestOrganizationForm: FC = () => { }, [sessionResponse]) const clearCountryStateInterval = () => { - if (countryStateInputInterval.current) clearInterval(countryStateInputInterval.current) + if (countryStateInputInterval.current) + clearInterval(countryStateInputInterval.current) } const countryStateInputScript = () => { countryStateInputInterval.current = setInterval(() => { - const countryState = document.querySelector('.vtex-address-form__state') as HTMLDivElement + const countryState = document.querySelector( + '.vtex-address-form__state' + ) as HTMLDivElement + if (!countryState) return countryState.style.display = 'none' - const newGridTemplateAreas = '"endereco endereco" "numero complemento" "bairro cidade" "destinatario destinatario"' - if (countryState.parentElement) countryState.parentElement.style.gridTemplateAreas = newGridTemplateAreas + const newGridTemplateAreas = + '"endereco endereco" "numero complemento" "bairro cidade" "destinatario destinatario"' + + if (countryState.parentElement) + countryState.parentElement.style.gridTemplateAreas = newGridTemplateAreas clearCountryStateInterval() }, 1000) } useEffect(() => { countryStateInputScript() + return function cleanUp() { clearCountryStateInterval() } @@ -265,77 +295,90 @@ const RequestOrganizationForm: FC = () => { useEffect(() => { type ValidationType = { - isValid: boolean, + isValid: boolean stringIfInvalid: string } const validations: ValidationType[] = [ { isValid: formState.firstName?.trim() !== '', - stringIfInvalid: `${translateMessage(messages.userData)} > ${translateMessage(messages.firstName)}` + stringIfInvalid: `${translateMessage( + messages.userData + )} > ${translateMessage(messages.firstName)}`, }, { isValid: formState.lastName?.trim() !== '', - stringIfInvalid: `${translateMessage(messages.userData)} > ${translateMessage(messages.lastName)}` + stringIfInvalid: `${translateMessage( + messages.userData + )} > ${translateMessage(messages.lastName)}`, }, { isValid: formState.email?.trim() !== '', - stringIfInvalid: `${translateMessage(messages.userData)} > ${translateMessage(messages.email)}` + stringIfInvalid: `${translateMessage( + messages.userData + )} > ${translateMessage(messages.email)}`, }, { isValid: formState.cpf !== '', - stringIfInvalid: `${translateMessage(messages.userData)} > ${translateMessage(messages.cpf)}` + stringIfInvalid: `${translateMessage( + messages.userData + )} > ${translateMessage(messages.cpf)}`, }, { isValid: formState.telephone !== '', - stringIfInvalid: `${translateMessage(messages.userData)} > ${translateMessage(messages.telephone)}` + stringIfInvalid: `${translateMessage( + messages.userData + )} > ${translateMessage(messages.telephone)}`, }, { isValid: formState.businessDocument !== '', - stringIfInvalid: `${translateMessage(messages.organizationData)} > ${translateMessage(messages.cnpjLabel)}` + stringIfInvalid: `${translateMessage( + messages.organizationData + )} > ${translateMessage(messages.cnpjLabel)}`, }, { isValid: formState.organizationName !== '', - stringIfInvalid: `${translateMessage(messages.organizationData)} > ${translateMessage(messages.organizationName)}` + stringIfInvalid: `${translateMessage( + messages.organizationData + )} > ${translateMessage(messages.organizationName)}`, }, { isValid: formState.organizationIE !== '', - stringIfInvalid: `${translateMessage(messages.organizationData)} > ${translateMessage(messages.stateRegistrationInitials)}` + stringIfInvalid: `${translateMessage( + messages.organizationData + )} > ${translateMessage(messages.stateRegistrationInitials)}`, }, { - isValid: formState.organizationArea !== '' && (formState.organizationArea !== organizationAreaOthersValue || (formState.organizationArea == organizationAreaOthersValue && formState.organizationAreaOthers !== '')), - stringIfInvalid: `${translateMessage(messages.organizationData)} > ${translateMessage(messages.occupationArea)}` + isValid: + formState.organizationArea !== '' && + (formState.organizationArea !== organizationAreaOthersValue || + (formState.organizationArea === organizationAreaOthersValue && + formState.organizationAreaOthers !== '')), + stringIfInvalid: `${translateMessage( + messages.organizationData + )} > ${translateMessage(messages.occupationArea)}`, }, { isValid: formState.organizationPhone !== '', - stringIfInvalid: `${translateMessage(messages.organizationData)} > ${translateMessage(messages.telephone - )}` + stringIfInvalid: `${translateMessage( + messages.organizationData + )} > ${translateMessage(messages.telephone)}`, }, { isValid: permission, - stringIfInvalid: translateMessage(messages.acceptTermsAndConditions) + stringIfInvalid: translateMessage(messages.acceptTermsAndConditions), }, ] - setPendings(() => validations.reduce((previous: string[], current: ValidationType) => { - if (current.isValid) return previous - return [...previous, current.stringIfInvalid] - }, [])) + setPendings(() => + validations.reduce((previous: string[], current: ValidationType) => { + if (current.isValid) return previous + return [...previous, current.stringIfInvalid] + }, []) + ) }, [formState, permission]) - const translateMessage = (message: MessageDescriptor) => { - return formatMessage(message) - } - - - const toastMessage = (message: MessageDescriptor) => { - const translatedMessage = translateMessage(message) - const action = undefined - - showToast({ message: translatedMessage, action }) - } - const translateCountries = () => { const { shipsTo = [] } = data?.logistics @@ -344,6 +387,7 @@ const RequestOrganizationForm: FC = () => { value: code, })) } + const handleAddressChange = (changedAddress: AddressFormFields) => { const curAddress = addressState @@ -360,6 +404,7 @@ const RequestOrganizationForm: FC = () => { }) setAddressState(() => addValidation(getEmptyAddress(country))) } + const handleSubmit = async () => { setFormState({ ...formState, @@ -367,21 +412,25 @@ const RequestOrganizationForm: FC = () => { submitted: true, }) - const data = { + const dataOrganization = { name: formState.organizationName, cnpj: formState.businessDocument, phone: formState.organizationPhone, ie: formState.organizationIE, icms: formState.organizationICMS, area: formState.organizationArea, - areaOthers: formState.organizationAreaOthers + areaOthers: formState.organizationAreaOthers, } - createOrganization(data) - .then(data => { - const file = (document.querySelector('.file-button > input[type="file"]') as HTMLInputElement).files?.[0] - if (file) attachFileToEntity(acronym, data.DocumentId, image, file) - }) + createOrganization(dataOrganization).then(data => { + const file = (document.querySelector( + '.file-button > input[type="file"]' + ) as HTMLInputElement).files?.[0] + + const AcronymId = { acronym, id: data.DocumentId } + + if (file) attachFileToEntity(AcronymId, image, file) + }) const organizationRequest = { name: formState.organizationName, @@ -391,7 +440,7 @@ const RequestOrganizationForm: FC = () => { lastName: formState.lastName, email: formState.email, cpf: formState.cpf, - telephone: formState.telephone + telephone: formState.telephone, }, defaultCostCenter: { name: formState.organizationName, @@ -421,7 +470,6 @@ const RequestOrganizationForm: FC = () => { }, } - createOrganizationRequest({ variables: { input: organizationRequest, @@ -455,12 +503,12 @@ const RequestOrganizationForm: FC = () => { }) setModalSettings({ title: 'Cadastro enviado!', - message: 'Vamos analisar os dados enviados e liberar o seu cadastro. Aguarde nosso e-mail com mais informações e liberar seu cadastro em até 24 horas. Por enquanto, você já pode comprar itens de USO LIVRE.', + message: + 'Vamos analisar os dados enviados e liberar o seu cadastro. Aguarde nosso e-mail com mais informações e liberar seu cadastro em até 24 horas. Por enquanto, você já pode comprar itens de USO LIVRE.', buttonText: 'Voltar para a loja', buttonLink: '/', - active: true + active: true, }) - } }) .catch(error => { @@ -476,83 +524,81 @@ const RequestOrganizationForm: FC = () => { if (!data) return null const renderIfSubmitted = formState.submitted && - existingRequestData?.getOrganizationRequestById?.status ? ( + existingRequestData?.getOrganizationRequestById?.status ? ( {existingRequestData.getOrganizationRequestById.status === 'pending' && ( - -
- - - -
- - - )} + +
+ + + +
+ + + )} {existingRequestData.getOrganizationRequestById.status === 'approved' && ( - -
- - - -
- - - )} + +
+ + + +
+ + + )} {existingRequestData.getOrganizationRequestById.status === 'declined' && ( - -
- - - -
- - - )} + +
+ + + +
+ + + )} ) : ( -
- +
-
- +
@@ -560,8 +606,7 @@ const RequestOrganizationForm: FC = () => { size="large" label={translateMessage(messages.firstName)} value={formState.firstName} - placeholder={"Nome"} - + placeholder={'Nome'} onChange={(e: React.ChangeEvent) => { setFormState({ ...formState, @@ -578,7 +623,6 @@ const RequestOrganizationForm: FC = () => { label={translateMessage(messages.lastName)} value={formState.lastName} placeholder={translateMessage(messages.lastName)} - onChange={(e: React.ChangeEvent) => { setFormState({ ...formState, @@ -603,8 +647,7 @@ const RequestOrganizationForm: FC = () => { }} />
-
- +
@@ -613,10 +656,8 @@ const RequestOrganizationForm: FC = () => { label={translateMessage(messages.cpf)} value={formState.cpf} maxLength={'14'} - placeholder={"000.000.000-00"} - + placeholder={'000.000.000-00'} onChange={(e: React.ChangeEvent) => { - setFormState({ ...formState, cpf: formataCPF(e.target.value), @@ -632,9 +673,7 @@ const RequestOrganizationForm: FC = () => { label={translateMessage(messages.telephone)} value={formState.telephone} maxLength={'15'} - - placeholder={"(00) 00000-000"} - + placeholder={'(00) 00000-000'} onChange={(e: React.ChangeEvent) => { setFormState({ ...formState, @@ -650,8 +689,7 @@ const RequestOrganizationForm: FC = () => { title={translateMessage(messages.organizationData)} subtitle={translateMessage(messages.organizationDataDescription)} > - -
+
@@ -660,10 +698,9 @@ const RequestOrganizationForm: FC = () => { size="large" label={translateMessage(messages.cnpjLabel)} value={formState.businessDocument} - placeholder={"00.000.000/0000-00"} + placeholder={'00.000.000/0000-00'} maxLength={'18'} onChange={(e: React.ChangeEvent) => { - setFormState({ ...formState, businessDocument: formataCNPJ(e.target.value), @@ -673,8 +710,7 @@ const RequestOrganizationForm: FC = () => {
-
+ >
<>
{ }} />
-
+
) => { setFormState({ @@ -730,27 +764,25 @@ const RequestOrganizationForm: FC = () => { required /> { - formState.organizationIE == "Isento" ? - setFormState({ - ...formState, - organizationIE: "", - }) + formState.organizationIE === 'Isento' + ? setFormState({ + ...formState, + organizationIE: '', + }) : setFormState({ - ...formState, - organizationIE: "Isento", - }) + ...formState, + organizationIE: 'Isento', + }) }} />
-
+
{ label={translateMessage(messages.occupationArea)} options={[ { value: 'Clínica Médica', label: 'Clínica Médica' }, - { value: 'Clínica Odontológica', label: 'Clínica Odontológica' }, + { + value: 'Clínica Odontológica', + label: 'Clínica Odontológica', + }, { value: 'Estética', label: 'Estética' }, { value: 'Farmácia', label: 'Farmácia' }, { value: 'Hospital', label: 'Hospital' }, - { value: 'Laboratório de Análises', label: 'Laboratório de Análises' }, - { value: 'Instituição de Ensino', label: 'Instituição de Ensino' }, + { + value: 'Laboratório de Análises', + label: 'Laboratório de Análises', + }, + { + value: 'Instituição de Ensino', + label: 'Instituição de Ensino', + }, { value: 'Veterinária & Pet', label: 'Veterinária & Pet' }, - { value: organizationAreaOthersValue, label: 'Outros' } + { value: organizationAreaOthersValue, label: 'Outros' }, ]} value={formState.organizationArea} onChange={(__: any, value: string) => { @@ -810,8 +851,7 @@ const RequestOrganizationForm: FC = () => { />
- { - formState.organizationArea === organizationAreaOthersValue && + {formState.organizationArea === organizationAreaOthersValue && (
@@ -830,11 +870,9 @@ const RequestOrganizationForm: FC = () => { required />
- } - - -
+ )} +
@@ -842,7 +880,7 @@ const RequestOrganizationForm: FC = () => { autocomplete="off" size="large" label={translateMessage(messages.landline)} - placeholder={"+55 (11) 12345-1234"} + placeholder={'+55 (11) 12345-1234'} maxLength={'18'} value={formState.organizationPhone} onChange={(e: React.ChangeEvent) => { @@ -862,7 +900,9 @@ const RequestOrganizationForm: FC = () => {
{
- - -
- -
-