Merge pull request #246 from vtex-apps/feature/IDCS-834/remove-react-…

…vtexid

Feature/idcs 834/remove react vtexid

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Removed
+
+- `vtex.react-vtexid` dependency
+
 ## [1.24.0] - 2021-11-09
 
 ### Removed

manifest.json

@@ -16,7 +16,6 @@
     "vtex.profile-form": "3.x",
     "vtex.country-codes": "2.x",
     "vtex.address-form": "4.x",
-    "vtex.react-vtexid": "4.x",
     "vtex.pixel-manager": "1.x",
     "vtex.store-messages": "0.x",
     "vtex.css-handles": "0.x"

node/package.json

@@ -17,7 +17,6 @@
     "vtex.my-orders-app": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.my-orders-app",
     "vtex.pixel-manager": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.pixel-manager",
     "vtex.profile-form": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.profile-form",
-    "vtex.react-vtexid": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/_types/react",
     "vtex.store-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.store-graphql",
     "vtex.store-messages": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/_types/react",
     "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.styleguide"

node/yarn.lock

@@ -2118,10 +2118,6 @@ vary@^1.1.2:
   version "3.5.1"
   resolved "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.profile-form#1f8ff9d2bc39422731ad2a6a5c9054a1d0264ee4"
 
-"vtex.react-vtexid@http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/_types/react":
-  version "0.0.0"
-  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/_types/react#fa7a0347e046eab3dd768998fc9252b2c0dd5aef"
-
 "vtex.store-graphql@http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.store-graphql":
   version "2.139.1"
   resolved "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.store-graphql#d22e5c587ca917149430e5fce733a04f7a40aa33"

react/components/Menu/index.tsx

@@ -4,15 +4,15 @@ import React, { Component, Fragment } from 'react'
 import type { InjectedIntlProps } from 'react-intl'
 import { injectIntl, FormattedMessage } from 'react-intl'
 import { compose } from 'recompose'
-import { ExtensionPoint } from 'vtex.render-runtime'
-import { AuthService, AuthState } from 'vtex.react-vtexid'
+import { ExtensionPoint, withRuntimeContext } from 'vtex.render-runtime'
 import { ModalDialog } from 'vtex.styleguide'
 import { withCssHandles } from 'vtex.css-handles'
 
 import UserInfo from './UserInfo'
 import MenuLink from './MenuLink'
 import type { Settings } from '../shared/withSettings'
 import { withSettings } from '../shared/withSettings'
+import getRedirectLogout from '../../utils/getRedirectLogout'
 
 const CSS_HANDLES = ['css', 'menu', 'menuLinks', 'menuLink'] as const
 
@@ -50,7 +50,7 @@ class Menu extends Component<Props, { isModalOpen: boolean }> {
   }
 
   public render() {
-    const { cssHandles, intl, settings } = this.props
+    const { cssHandles, intl, settings, runtime } = this.props
     const { showMyCards = false, showMyOrders = false } = settings || {}
 
     return (
@@ -68,44 +68,38 @@ class Menu extends Component<Props, { isModalOpen: boolean }> {
               })
             }
           />
-          <AuthState skip scope="STORE">
-            <AuthService.RedirectLogout returnUrl="/">
-              {({ action: logout }: any) => (
-                <Fragment>
-                  <div
-                    className={`
+          <Fragment>
+            <div
+              className={`
                     ${cssHandles.menuLink}
                     f6 no-underline db hover-near-black pv5 mv3 pl5 bl bw2 nowrap c-muted-1 b--transparent pointer
                   `}
-                    onClick={this.handleModalToggle}
-                  >
-                    <FormattedMessage id="[email protected]::pages.logout" />
-                  </div>
-                  <ModalDialog
-                    centered
-                    confirmation={{
-                      onClick: logout,
-                      label: intl.formatMessage({
-                        id: '[email protected]::pages.logout',
-                      }),
-                    }}
-                    cancelation={{
-                      onClick: this.handleModalToggle,
-                      label: intl.formatMessage({
-                        id: '[email protected]::logoutModal.cancel',
-                      }),
-                    }}
-                    isOpen={this.state.isModalOpen}
-                    onClose={this.handleModalToggle}
-                  >
-                    <span className="t-heading-5 pa6">
-                      <FormattedMessage id="[email protected]::logoutModal.title" />
-                    </span>
-                  </ModalDialog>
-                </Fragment>
-              )}
-            </AuthService.RedirectLogout>
-          </AuthState>
+              onClick={this.handleModalToggle}
+            >
+              <FormattedMessage id="[email protected]::pages.logout" />
+            </div>
+            <ModalDialog
+              centered
+              confirmation={{
+                onClick: getRedirectLogout(runtime),
+                label: intl.formatMessage({
+                  id: '[email protected]::pages.logout',
+                }),
+              }}
+              cancelation={{
+                onClick: this.handleModalToggle,
+                label: intl.formatMessage({
+                  id: '[email protected]::logoutModal.cancel',
+                }),
+              }}
+              isOpen={this.state.isModalOpen}
+              onClose={this.handleModalToggle}
+            >
+              <span className="t-heading-5 pa6">
+                <FormattedMessage id="[email protected]::logoutModal.title" />
+              </span>
+            </ModalDialog>
+          </Fragment>
         </nav>
       </aside>
     )
@@ -120,10 +114,12 @@ interface Link {
 interface Props extends InjectedIntlProps {
   settings?: Settings
   cssHandles: CssHandles<typeof CSS_HANDLES>
+  runtime: Runtime
 }
 
 export default compose<Props, Record<string, unknown>>(
   injectIntl,
   withSettings,
-  withCssHandles(CSS_HANDLES)
+  withCssHandles(CSS_HANDLES),
+  withRuntimeContext
 )(Menu)

react/package.json

@@ -31,7 +31,6 @@
     "vtex.my-orders-app": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.my-orders-app",
     "vtex.pixel-manager": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.pixel-manager",
     "vtex.profile-form": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.profile-form",
-    "vtex.react-vtexid": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/_types/react",
     "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.render-runtime",
     "vtex.store-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.store-graphql",
     "vtex.store-messages": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/_types/react",

react/typings/global.d.ts

@@ -82,6 +82,8 @@ declare global {
     culture: {
       country: string
     }
+    query: Record<string, string> | undefined
+    rootPath: string | undefined
   }
 
   interface InjectedContentWrapperProps {

react/utils/getRedirectLogout.ts

@@ -0,0 +1,33 @@
+export const getBindingAddrQuery = (runtime: Runtime) => {
+  const { query: { __bindingAddress: bindingAddress = null } = {} } = runtime
+
+  return new URLSearchParams({
+    ...(bindingAddress && { __bindingAddress: bindingAddress }),
+  }).toString()
+}
+
+const getAbsReturnUrl = (runtime: Runtime) => {
+  const { rootPath = '' } = runtime
+
+  const bindingAddrQuery = getBindingAddrQuery(runtime)
+  const query = bindingAddrQuery ? `?${bindingAddrQuery}` : ''
+  const path = rootPath !== '' ? rootPath : '/'
+
+  return new URL(`${path}${query}`, window.location.href).href
+}
+
+const getRedirectLogout = (runtime: Runtime) => {
+  const { account, rootPath = '' } = runtime
+
+  const absReturnUrl = getAbsReturnUrl(runtime)
+
+  const searchParams = new URLSearchParams({
+    scope: account,
+    returnUrl: absReturnUrl,
+  }).toString()
+
+  return () =>
+    window.location.assign(`${rootPath}/api/vtexid/pub/logout?${searchParams}`)
+}
+
+export default getRedirectLogout

react/yarn.lock

@@ -4712,10 +4712,6 @@ [email protected]:
   version "3.5.1"
   resolved "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.profile-form#1f8ff9d2bc39422731ad2a6a5c9054a1d0264ee4"
 
-"vtex.react-vtexid@http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/_types/react":
-  version "0.0.0"
-  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/_types/react#fa7a0347e046eab3dd768998fc9252b2c0dd5aef"
-
 "vtex.render-runtime@http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.render-runtime":
   version "8.128.2"
   resolved "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.render-runtime#67f5975f7edd73c9afa7bee57734540c0ead5428"