Merge branch 'gamification' into GAME-QA-S4

Author: kkartunov

src-ts/tools/gamification-admin/game-lib/modals/badge-activated-modal/BadgeActivatedModal.module.scss

@@ -0,0 +1,54 @@
+@import "../../../../../lib/styles/variables";
+@import "../../../../../lib/styles/includes";
+
+.wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    .badge {
+        display: flex;
+        align-items: center;
+        margin-bottom: $space-xxl;
+        
+        @include ltemd {
+            margin-bottom: 0;
+        }
+
+        .badge-image {
+            width: 43px;
+            height: 43px;
+            margin-right: $space-xl;
+        }
+
+        .badge-image-disabled {
+            width: 43px;
+            height: 43px;
+            margin-right: $space-xl;
+            opacity: 0.5;
+            filter: grayscale(1);
+        }
+
+        .badge-name {
+            font-size: 16px;
+        }
+    }
+
+    .actions-wrap {
+        display: flex;
+        flex-direction: column;
+
+        .actions {
+            display: flex;
+            align-items: center;
+
+            @include ltemd {
+                justify-content: flex-end;
+            }
+
+            a {
+                margin-right: $space-md;
+            }
+        }
+    }
+}

src-ts/tools/gamification-admin/game-lib/modals/badge-activated-modal/BadgeActivatedModal.tsx

@@ -0,0 +1,55 @@
+import { FC } from 'react'
+
+import { BaseModal, Button, PageDivider, useCheckIsMobile } from '../../../../../lib'
+import { GameBadge } from '../../game-badge.model'
+
+import styles from './BadgeActivatedModal.module.scss'
+export interface BadgeActivatedModalProps {
+    badge: GameBadge
+    isOpen: boolean
+    onClose: () => void
+}
+
+const BadgeActivatedModal: FC<BadgeActivatedModalProps> = (props: BadgeActivatedModalProps) => {
+
+    const isMobile: boolean = useCheckIsMobile()
+
+    function onClose(): void {
+        props.onClose()
+    }
+
+    return (
+        <BaseModal
+            onClose={onClose}
+            open={props.isOpen}
+            size='md'
+            title={`Badge updated`}
+            closeOnOverlayClick={false}
+        >
+            <div className={styles.wrapper}>
+                <div className={styles.badge}>
+                    <img
+                        alt={props.badge.badge_name}
+                        className={styles[props.badge.active ? 'badge-image' : 'badge-image-disabled']}
+                        src={props.badge.badge_image_url}
+                    />
+                    <p className={styles['badge-name']}>{props.badge.badge_name} badge has been sucessfully {props.badge.active ? 'activated' : 'deactivated'}.</p>
+                </div>
+                <div className={styles['actions-wrap']}>
+                    {
+                        isMobile && <PageDivider />
+                    }
+                    <div className={styles.actions}>
+                        <Button
+                            label='Close'
+                            buttonStyle='primary'
+                            onClick={onClose}
+                        />
+                    </div>
+                </div>
+            </div>
+        </BaseModal>
+    )
+}
+
+export default BadgeActivatedModal

src-ts/tools/gamification-admin/game-lib/modals/badge-activated-modal/index.ts

@@ -0,0 +1 @@
+export { default as BadgeActivatedModal } from './BadgeActivatedModal'

src-ts/tools/gamification-admin/pages/badge-detail/BadgeDetailPage.tsx

@@ -144,11 +144,33 @@ const BadgeDetailPage: FC = () => {
     )
 
     function onActivateBadge(): void {
-        // TODO: implement in GAME-127
+        updateBadgeAsync({
+            badgeActive: true,
+            id: badgeDetailsHandler.data?.id as string,
+        })
+            .then(() => {
+                badgeDetailsHandler.mutate({
+                    ...badgeDetailsHandler.data,
+                    active: true,
+                })
+                setShowActivatedModal(true)
+            })
+            .catch((e) => alert(`onActivateBadge error: ${e.message}`))
     }
 
     function onDisableBadge(): void {
-        // TODO: implement in GAME-127
+        updateBadgeAsync({
+            badgeActive: false,
+            id: badgeDetailsHandler.data?.id as string,
+        })
+            .then(() => {
+                badgeDetailsHandler.mutate({
+                    ...badgeDetailsHandler.data,
+                    active: false,
+                })
+                setShowActivatedModal(true)
+            })
+            .catch((e) => alert(`onDisableBadge error: ${e.message}`))
     }
 
     function onNameEditKeyDown(e: KeyboardEvent): void {
@@ -339,6 +361,14 @@ const BadgeDetailPage: FC = () => {
                     )
                 }
             </div>
+            {
+                badgeDetailsHandler.data &&
+                <BadgeActivatedModal
+                    isOpen={showActivatedModal}
+                    onClose={() => setShowActivatedModal(false)}
+                    badge={badgeDetailsHandler.data}
+                />
+            }
         </ContentLayout>
     )
 }