Merge branch 'develop' into feat/custom-reg-fields

jwplayer · Jun 15, 2023 · c0369e3 · c0369e3
2 parents d66d5da + bbc2465
commit c0369e3
Show file tree

Hide file tree

Showing 36 changed files with 663 additions and 88 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,24 @@
+# [4.14.0](https://github.com/jwplayer/ott-web-app/compare/v4.13.0...v4.14.0) (2023-06-15)
+
+
+### Features
+
+* add logic for inplayer social login ([04c1d74](https://github.com/jwplayer/ott-web-app/commit/04c1d74967c905009d6bdf2e9ce352e6f32cdafa))
+* initial social login buttons implementation ([0dd1204](https://github.com/jwplayer/ott-web-app/commit/0dd120486ef47a6e9dcfd9036cc72ceb699e1a45))
+
+
+
+# [4.13.0](https://github.com/jwplayer/ott-web-app/compare/v4.12.1...v4.13.0) (2023-06-15)
+
+
+### Features
+
+* add error handling for account deletion ([25b2f5a](https://github.com/jwplayer/ott-web-app/commit/25b2f5a5ca96491bed3bae789c1e60fef35f09d2))
+* add reset to useForm, handle back button in DeleteAccountModal ([eacd3b7](https://github.com/jwplayer/ott-web-app/commit/eacd3b7575cc0d6cbf891c7ed7943c9b4b66ab76))
+* **user:** initial account deletion implementation ([b6eda04](https://github.com/jwplayer/ott-web-app/commit/b6eda042a230f106b6a14ea7844b887778a0696d))
+
+
+
 ## [4.12.1](https://github.com/jwplayer/ott-web-app/compare/v4.12.0...v4.12.1) (2023-06-08)
 
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jw-ott-webapp",
-  "version": "4.12.1",
+  "version": "4.14.0",
   "main": "index.js",
   "repository": "https://github.com/jwplayer/ott-web-app.git",
   "author": "JW Player",

diff --git a/public/locales/en/account.json b/public/locales/en/account.json
@@ -74,14 +74,17 @@
   },
   "login": {
     "email": "Email",
+    "facebook": "Sign in with Facebook",
     "field_is_not_valid_email": "Please re-enter your email details and try again.",
     "field_required": "This field is required",
     "forgot_password": "Forgot password?",
+    "google": "Sign in with Google",
     "hide_password": "Hide password",
     "not_registered": "New to {{siteName}}?",
     "password": "Password",
     "sign_in": "Sign in",
     "sign_up": "Sign up",
+    "twitter": "Sign in with Twitter",
     "view_password": "View password",
     "wrong_combination": "Incorrect email/password combination",
     "wrong_email": "Please check your email and try again."

diff --git a/public/locales/en/user.json b/public/locales/en/user.json
@@ -3,6 +3,21 @@
     "about_you": "Profile info",
     "cancel": "Cancel",
     "confirm_password": "Confirm password",
+    "continue": "Continue",
+    "delete_account": {
+      "body": "Permanently delete your account and all of your content.",
+      "error": "An error occurred while deleting your account. Please try again.",
+      "modal": {
+        "placeholder": "Enter your password",
+        "text_cant_be_undone": "Please be aware that this process cannot be undone, so proceed with caution.",
+        "text_contacts": "If you have any further questions or concerns, please do not hesitate to contact our support team.",
+        "text_data_erasure": "Please note that if you choose to proceed with this process, all of your personal data will be erased from our system. This includes any personal information you provided during the registration process, as well as any location and device information that we gathered during the authentication process. Additionally, all other personal information stored in various parts of our database will be deleted as well. However, please be aware that due to some legislations we are required to keep certain personal data as part of transaction and subscription records.",
+        "text_revoked_access": "Once the erasure is complete, all of your active accesses will be revoked, and any active login sessions, including this one, will be terminated. Your account information will no longer be accessible to our staff in any capacity.",
+        "title": "Enter password to continue",
+        "warning": "All active subscriptions that were purchased through a web browser will be automatically canceled upon erasure of personal data. However, if you purchased a subscription through iOS, Android, Roku, or Amazon apps, please be aware that it will not be canceled automatically. In this case, you will need to follow the usual subscription cancelation steps for each respective platform to manually cancel the subscription."
+      },
+      "title": "Delete account"
+    },
     "edit_account": "Edit account",
     "edit_information": "Edit information",
     "edit_password": "Edit password",
@@ -24,7 +39,7 @@
     "firstname": "First name",
     "hide_password": "Hide password",
     "lastname": "Last name",
-    "other_registration_details": "Other registration details",
+    "password": "Password",
     "save": "Save",
     "security": "Password",
     "terms_and_tracking": "Legal & Marketing",
@@ -39,6 +54,9 @@
     "not_found": "Favorites not found!",
     "title": "Favorites"
   },
+  "login": {
+    "field_required": ""
+  },
   "nav": {
     "account": "Account",
     "favorites": "Favorites",

diff --git a/public/locales/es/account.json b/public/locales/es/account.json
@@ -80,14 +80,17 @@
   },
   "login": {
     "email": "Correo electrónico",
+    "facebook": "",
     "field_is_not_valid_email": "Por favor, vuelve a ingresar tus datos de correo electrónico y prueba nuevamente.",
     "field_required": "Este campo es obligatorio",
     "forgot_password": "¿Olvidaste tu contraseña?",
+    "google": "",
     "hide_password": "Ocultar contraseña",
     "not_registered": "¿Nuevo/a en {{siteName}}?",
     "password": "Contraseña",
     "sign_in": "Iniciar sesión",
     "sign_up": "Registrarse",
+    "twitter": "",
     "view_password": "Ver contraseña",
     "wrong_combination": "Combinación de correo electrónico/contraseña incorrecta",
     "wrong_email": "Por favor, verifica tu correo electrónico e intenta nuevamente."

diff --git a/public/locales/es/user.json b/public/locales/es/user.json
@@ -3,6 +3,21 @@
     "about_you": "Información de perfil",
     "cancel": "Cancelar",
     "confirm_password": "Confirmar contraseña",
+    "continue": "",
+    "delete_account": {
+      "body": "",
+      "error": "",
+      "modal": {
+        "placeholder": "",
+        "text_cant_be_undone": "",
+        "text_contacts": "",
+        "text_data_erasure": "",
+        "text_revoked_access": "",
+        "title": "",
+        "warning": ""
+      },
+      "title": ""
+    },
     "edit_account": "Editar cuenta",
     "edit_information": "Editar información",
     "edit_password": "Editar contraseña",
@@ -24,7 +39,7 @@
     "firstname": "Nombre",
     "hide_password": "Ocultar contraseña",
     "lastname": "Apellido",
-    "other_registration_details": "Otros detalles de registro",
+    "password": "",
     "save": "Guardar",
     "security": "Contraseña",
     "terms_and_tracking": "Jurídico y marketing",
@@ -39,6 +54,9 @@
     "not_found": "¡Favoritos no encontrados!",
     "title": "Favoritos"
   },
+  "login": {
+    "field_required": ""
+  },
   "nav": {
     "account": "Cuenta",
     "favorites": "Favoritos",

diff --git a/src/assets/icons/facebook.svg b/src/assets/icons/facebook.svg
diff --git a/src/assets/icons/google.svg b/src/assets/icons/google.svg
diff --git a/src/assets/icons/twitter.svg b/src/assets/icons/twitter.svg
diff --git a/src/components/Account/Account.module.scss b/src/components/Account/Account.module.scss
@@ -1,4 +1,4 @@
-.exportDataContainer {
+.textWithButtonContainer {
   display: flex;
   flex-direction: column;
   gap: 1rem;

diff --git a/src/components/Account/Account.tsx b/src/components/Account/Account.tsx
@@ -24,7 +24,7 @@ import useToggle from '#src/hooks/useToggle';
 import { formatConsentsFromValues, formatConsents, formatConsentValues } from '#src/utils/collection';
 import { addQueryParam } from '#src/utils/location';
 import { useAccountStore } from '#src/stores/AccountStore';
-import { logDev } from '#src/utils/common';
+import { isTruthy, logDev } from '#src/utils/common';
 import { exportAccountData, updateConsents, updateUser } from '#src/stores/AccountController';
 
 type Props = {
@@ -56,13 +56,14 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true }
     }
   }, [exportData.isSuccess, exportData.isError]);
 
-  const { customer, customerConsents, publisherConsents, canChangePasswordWithOldPassword, canExportAccountData } = useAccountStore(
-    ({ user, customerConsents, publisherConsents, canChangePasswordWithOldPassword, canExportAccountData }) => ({
+  const { customer, customerConsents, publisherConsents, canChangePasswordWithOldPassword, canExportAccountData, canDeleteAccount } = useAccountStore(
+    ({ user, customerConsents, publisherConsents, canChangePasswordWithOldPassword, canExportAccountData, canDeleteAccount }) => ({
       customer: user,
       customerConsents,
       publisherConsents,
       canChangePasswordWithOldPassword,
       canExportAccountData,
+      canDeleteAccount,
     }),
     shallow,
   );
@@ -278,57 +279,70 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true }
               </>
             ),
           }),
-          ...(nonTermsConsents?.length
-            ? [
-                formSection({
-                  label: t('account.other_registration_details'),
-                  saveButton: t('account.update_consents'),
-                  onSubmit: (values) => updateConsents(formatConsentsFromValues(publisherConsents, values.consentsValues)),
-                  content: (section) => (
-                    <div className={styles.customFields}>
-                      {nonTermsConsents.map((consent) => (
-                        <CustomRegisterField
-                          key={consent.name}
-                          type={consent.type}
-                          name={`consentsValues.${consent.name}`}
-                          options={consent.options}
-                          label={formatConsentLabel(consent.label)}
-                          placeholder={consent.placeholder}
-                          value={section.values.consentsValues[consent.name]}
-                          disabled={(consent.type === ConsentFieldVariants.CHECKBOX && consent.required) || section.isBusy}
-                          onChange={(name, value) => section.onChangeValue(name, value)}
-                        />
-                      ))}
-                    </div>
-                  ),
-                }),
-              ]
-            : []),
-          ...(canExportAccountData
-            ? [
-                formSection({
-                  label: t('account.export_data_title'),
-                  content: (section) => (
-                    <div className={styles.exportDataContainer}>
-                      <div>
-                        <Trans t={t} i18nKey="account.export_data_body" values={{ email: section.values.email }} />
-                      </div>
-                      <div>
-                        <Button
-                          label={t('account.export_data_title')}
-                          type="button"
-                          disabled={exportData.isLoading}
-                          onClick={async () => {
-                            exportData.mutate();
-                          }}
-                        />
-                      </div>
-                    </div>
-                  ),
-                }),
-              ]
-            : []),
-        ]}
+          nonTermsConsents?.length &&
+            formSection({
+              label: t('account.other_registration_details'),
+              saveButton: t('account.update_consents'),
+              onSubmit: (values) => updateConsents(formatConsentsFromValues(publisherConsents, values.consentsValues)),
+              content: (section) => (
+                <div className={styles.customFields}>
+                  {nonTermsConsents.map((consent) => (
+                    <CustomRegisterField
+                      key={consent.name}
+                      type={consent.type}
+                      name={`consentsValues.${consent.name}`}
+                      options={consent.options}
+                      label={formatConsentLabel(consent.label)}
+                      placeholder={consent.placeholder}
+                      value={section.values.consentsValues[consent.name]}
+                      disabled={(consent.type === ConsentFieldVariants.CHECKBOX && consent.required) || section.isBusy}
+                      onChange={(name, value) => section.onChangeValue(name, value)}
+                    />
+                  ))}
+                </div>
+              ),
+            }),
+          canExportAccountData &&
+            formSection({
+              label: t('account.export_data_title'),
+              content: (section) => (
+                <div className={styles.textWithButtonContainer}>
+                  <div>
+                    <Trans t={t} i18nKey="account.export_data_body" values={{ email: section.values.email }} />
+                  </div>
+                  <div>
+                    <Button
+                      label={t('account.export_data_title')}
+                      type="button"
+                      disabled={exportData.isLoading}
+                      onClick={async () => {
+                        exportData.mutate();
+                      }}
+                    />
+                  </div>
+                </div>
+              ),
+            }),
+          canDeleteAccount &&
+            formSection({
+              label: t('account.delete_account.title'),
+              content: () => (
+                <div className={styles.textWithButtonContainer}>
+                  <div>{t('account.delete_account.body')}</div>
+                  <div>
+                    <Button
+                      label={t('account.delete_account.title')}
+                      type="button"
+                      variant="danger"
+                      onClick={() => {
+                        navigate(addQueryParam(location, 'u', 'delete-account'));
+                      }}
+                    />
+                  </div>
+                </div>
+              ),
+            }),
+        ].filter(isTruthy)}
       </Form>
       {canExportAccountData && (
         <Alert open={isAlertVisible} message={exportDataMessage} onClose={() => setIsAlertVisible(false)} isSuccess={exportData.isSuccess} />

diff --git a/src/components/Button/Button.module.scss b/src/components/Button/Button.module.scss
@@ -98,6 +98,18 @@ $large-button-height: 40px;
     }
   }
 
+  &.danger {
+    color: theme.$btn-danger-color;
+    background-color: theme.$btn-danger-bg;
+    outline: theme.$btn-danger-outline;
+  }
+
+  &.delete {
+    color: theme.$btn-delete-color;
+    background-color: theme.$btn-delete-bg;
+    outline: none;
+  }
+
   &.fullWidth {
     justify-content: center;
     width: 100%;

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -8,7 +8,7 @@ import Spinner from '#components/Spinner/Spinner';
 
 type Color = 'default' | 'primary';
 
-type Variant = 'contained' | 'outlined' | 'text';
+type Variant = 'contained' | 'outlined' | 'text' | 'danger' | 'delete';
 
 type Props = {
   children?: React.ReactNode;