Listening to non-react updates to the preferences and update the reac…

…t component (#123)

* updating the preferences when the modal opens

* update the changelog and package version

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 5.1.0(Nov 17, 2020)
+
+- [#123](https://github.com/segmentio/consent-manager/pull/123) Fixed an issue where the react state wasn't being updated after the user updates the preferences via the `.savePreferences` API. This change also slightly changes how the Cancel confirmation modal is displayed.
+
 ## 5.0.2(Nov 9, 2020)
 
 - [#111](https://github.com/segmentio/consent-manager/pull/111) Added missing TypeScript declarations in packaged output

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@segment/consent-manager",
-  "version": "5.0.2",
+  "version": "5.1.0",
   "description": "Drop-in consent management plugin for analytics.js",
   "keywords": [
     "gdpr",

src/consent-manager/container.tsx

@@ -122,6 +122,12 @@ const Container: React.FC<ContainerProps> = props => {
     }
   })
 
+  React.useEffect(() => {
+    if (isDialogOpen) {
+      props.resetPreferences()
+    }
+  }, [isDialogOpen])
+
   const onClose = () => {
     if (props.closeBehavior === undefined || props.closeBehavior === CloseBehavior.DISMISS) {
       return toggleBanner(false)
@@ -161,22 +167,22 @@ const Container: React.FC<ContainerProps> = props => {
   }
 
   const handleCancel = () => {
-    toggleDialog(false)
     // Only show the cancel confirmation if there's unconsented destinations
     if (props.newDestinations.length > 0) {
       toggleCancel(true)
     } else {
+      toggleDialog(false)
       props.resetPreferences()
     }
   }
 
   const handleCancelBack = () => {
-    toggleDialog(true)
     toggleCancel(false)
   }
 
   const handleCancelConfirm = () => {
     toggleCancel(false)
+    toggleDialog(false)
     props.resetPreferences()
   }