Merge pull request #374 from vtex-apps/fix/locale-selector

Fix/locale selector

Author: vitorflg

CHANGELOG.md

@@ -7,6 +7,15 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Fixed
+- Block selector not working after a locale change.
+
+### Added
+- Block selector status(wait).
+
+### Changed
+- Hides query strings from site editor top bar.
+
 ## [4.40.0] - 2021-04-13
 
 ### Fixed

manifest.json

@@ -26,9 +26,7 @@
   },
   "mustUpdateAt": "2018-09-05",
   "categories": [],
-  "registries": [
-    "smartcheckout"
-  ],
+  "registries": ["smartcheckout"],
   "settingsSchema": {},
   "scripts": {
     "postreleasy": "vtex publish -r vtex --verbose"

react/components/EditorContainer/StoreIframe.tsx

@@ -36,7 +36,9 @@ const StoreIframe: React.FunctionComponent<Props> = ({ path }) => {
     src += `${getJoiner(src)}__bindingAddress=${binding.canonicalBaseAddress}`
   }
 
-  src += `${getJoiner(src)}__siteEditor`
+  if (!src.includes('__siteEditor')) {
+    src += `${getJoiner(src)}__siteEditor=true`
+  }
 
   return (
     <iframe

react/components/EditorContainer/Topbar/BlockPicker.tsx

@@ -4,7 +4,6 @@ import { InjectedIntlProps, injectIntl } from 'react-intl'
 import { Tooltip } from 'vtex.styleguide'
 
 import { useEditorContext } from '../../EditorContext'
-
 import { useHover } from './hooks'
 import IconPicker from './icons/IconPicker'
 
@@ -26,13 +25,17 @@ const BlockPicker: React.FC<InjectedIntlProps> = ({ intl }) => {
       position="bottom"
     >
       <button
+        style={editor.mode === 'disabled' ? { cursor: 'wait' } : {}}
         className={`w2 h2 bg-white br2 b--transparent outline-0 pointer flex justify-center items-center ${
-          editor.editMode || hover ? 'c-action-primary' : 'c-on-disabled'
+          editor.editMode || (hover && editor.mode !== 'disabled')
+            ? 'c-action-primary'
+            : 'c-on-disabled'
         }`}
         onClick={handleEditModeToggle}
         onKeyPress={handleKeyPress}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
+        disabled={editor.mode === 'disabled'}
       >
         <IconPicker />
       </button>

react/components/EditorContainer/Topbar/ContextSelectors/LocaleSelector.tsx

@@ -20,13 +20,44 @@ const LocaleSelector: React.FC<Props> = ({
 }) => {
   const { culture, emitter } = iframeRuntime
 
+  const editor = useEditorContext()
+
   const [locale, setLocale] = React.useState(culture.locale)
 
   const handleChange = React.useCallback(
     (e: React.ChangeEvent<HTMLSelectElement>) => {
-      setLocale(e.target.value)
+      editor.setMode('disabled')
+
+      setLocale(e?.target?.value)
+
+      emitter.emit(
+        'localesChanged',
+        e?.target?.value,
+        null,
+        (locale: string) => {
+          let bindingQueryString
+
+          if (editor.iframeWindow) {
+            const searchParams = new URLSearchParams(
+              editor?.iframeWindow?.location.search
+            )
+
+            const bindingAddress = searchParams.get('__bindingAddress')
 
-      emitter.emit('localesChanged', e.target.value)
+            if (bindingAddress) {
+              bindingQueryString = `__bindingAddress=${decodeURIComponent(
+                bindingAddress
+              )}`
+            }
+
+            if (e?.target?.value) {
+              editor.iframeWindow.location.search = `${bindingQueryString}&__locale=${e.target.value}&__siteEditor=true`
+            } else {
+              editor.iframeWindow.location.search = `${bindingQueryString}&__locale=${locale}&__siteEditor=true`
+            }
+          }
+        }
+      )
     },
     [emitter]
   )
@@ -38,6 +69,12 @@ const LocaleSelector: React.FC<Props> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [culture.locale])
 
+  React.useEffect(() => {
+    if (editor.mode !== 'content') {
+      editor.setMode('content')
+    }
+  }, [culture.locale, culture.country])
+
   const Selector = React.useCallback(
     () => (
       <div className={className}>
@@ -53,7 +90,6 @@ const LocaleSelector: React.FC<Props> = ({
     [className, handleChange, isDisabled, locale, options]
   )
 
-  const editor = useEditorContext()
   const intl = useIntl()
 
   return editor.editTreePath ? (

react/components/EditorContainer/Topbar/ContextSelectors/index.tsx

@@ -96,8 +96,10 @@ const ContextSelectors: React.FC<WithApolloClient<Props>> = ({
         if (newBinding && editor.iframeWindow) {
           setBinding(newBinding)
 
-          editor.iframeWindow.location.search = `__bindingAddress=${newBinding.canonicalBaseAddress}&__siteEditor`
+          editor.iframeWindow.location.search = `__bindingAddress=${newBinding.canonicalBaseAddress}&__siteEditor=true`
         }
+
+        editor.setMode('disabled')
       }
     },
     [bindings, setBinding, editor.iframeWindow]

react/components/EditorContainer/Topbar/UrlInput.tsx

@@ -8,9 +8,30 @@ const UrlInput = () => {
 
   const editor = useEditorContext()
 
+  const resolveUrlPath = (pathname: string, searchQueries: string) => {
+    const searchParams = new URLSearchParams(searchQueries)
+    const SEARCH_QUERIES_TO_HIDE = [
+      '__siteEditor',
+      '__bindingAddress',
+      '__locale',
+    ]
+
+    SEARCH_QUERIES_TO_HIDE.forEach(query => {
+      searchParams.delete(query)
+    })
+
+    if (searchParams.toString().length) {
+      return pathname + decodeURIComponent(`?${searchParams.toString()}`)
+    }
+
+    return pathname
+  }
+
   const urlPath = editor.iframeWindow
-    ? editor.iframeWindow.location.pathname +
-      editor.iframeWindow.location.search
+    ? resolveUrlPath(
+        editor.iframeWindow.location.pathname,
+        editor.iframeWindow.location.search
+      )
     : ''
 
   const [url, setUrl] = React.useState(urlPath)

react/components/EditorProvider.tsx

@@ -306,7 +306,7 @@ class EditorProvider extends Component<Props, State> {
   }
 
   public handleSetMode = (mode: EditorMode) => {
-    this.setState({ mode })
+    this.setState({ mode, editMode: mode === 'content' ? false : true })
   }
 
   public handleChangeIframeUrl = (url: string) => {

react/typings/global.d.ts

@@ -170,7 +170,7 @@ declare global {
 
   type ConfigurationDevice = 'any' | 'desktop' | 'mobile'
 
-  type EditorMode = 'content' | 'layout'
+  type EditorMode = 'content' | 'layout' | 'disabled'
 
   interface EditorConditionSection {
     activeConditions: string[]