Gift updates

src/layout/Layout.scss

@@ -29,3 +29,4 @@
 @import './mini-camera/NitroLayoutMiniCameraView';
 @import './notification-bubble/NotificationBubbleView';
 @import './trophy/NitroLayoutTrophyView';
+@import './gift-card/NitroLayoutGiftCardView';

src/layout/gift-card/NitroLayoutGiftCardView.scss

@@ -0,0 +1,41 @@
+.nitro-gift-card {
+    width: 306px;
+    height: 159px;
+    background: url(../../assets/images/gift/gift_tag.png) center no-repeat;
+
+    .gift-face {
+        width: 65px;
+
+        .gift-incognito {
+            width: 37px;
+            height: 48px;
+            background: url(../../assets/images/gift/incognito.png) center no-repeat;
+        }
+
+        .gift-avatar {
+            position: relative;
+            overflow: hidden;
+            width: 40px;
+            height: 50px;
+
+            .avatar-image {
+                position: absolute;
+                left: -25px;
+                top: -20px;
+            }
+        }
+    }
+
+    .gift-message {
+        width: 100%;
+        min-width: 100%;
+        max-width: 100%;
+        height: 90px;
+        min-height: 90px;
+        max-height: 90px;
+        border: none;
+        resize: none;
+        outline: none;
+        line-height: 17px;
+    }
+}

src/layout/gift-card/NitroLayoutGiftCardView.tsx

@@ -0,0 +1,25 @@
+import { FC } from 'react';
+import { LocalizeText } from '../../api';
+import { AvatarImageView } from '../../views/shared/avatar-image/AvatarImageView';
+import { NitroLayoutGiftCardViewProps } from './NitroLayoutGiftCardView.types';
+
+export const NitroLayoutGiftCardView: FC<NitroLayoutGiftCardViewProps> = props =>
+{
+    const { figure = null, userName = null, message = null, editable = false, onChange = null } = props;
+    
+    return (
+        <div className="nitro-gift-card d-flex">
+            <div className="d-flex align-items-center justify-content-center gift-face flex-shrink-0">
+                { !userName && <div className="gift-incognito"></div> }
+                { figure && <div className="gift-avatar">
+                    <AvatarImageView figure={ figure } direction={ 2 } headOnly={ true } />
+                </div> }
+            </div>
+            <div className="d-flex flex-column w-100 pt-4 pb-4 pe-4 ps-3">
+                { !editable && <div className="gift-message">{ message }</div> }
+                { editable && onChange && <textarea className="gift-message" maxLength={ 140 } value={ message } onChange={ (e) => onChange(e.target.value) } placeholder={ LocalizeText('catalog.gift_wrapping_new.message_hint') }></textarea> }
+                { userName && <div className="mt-auto text-end fst-italic">{ LocalizeText('catalog.gift_wrapping_new.message_from', ['name'], [userName]) }</div> }
+            </div>
+        </div>
+    );
+};

src/layout/gift-card/NitroLayoutGiftCardView.types.ts

@@ -0,0 +1,8 @@
+export interface NitroLayoutGiftCardViewProps
+{
+    figure?:string;
+    userName?: string;
+    message?: string;
+    editable?: boolean;
+    onChange?: (value: string) => void;
+}

src/layout/gift-card/index.ts

@@ -0,0 +1,2 @@
+export * from './NitroLayoutGiftCardView';
+export * from './NitroLayoutGiftCardView.types';

src/layout/index.ts

@@ -1,5 +1,6 @@
 export * from './card';
 export * from './draggable-window';
+export * from './gift-card';
 export * from './loading-spinner';
 export * from './mini-camera';
 export * from './notification-bubble';

src/views/catalog/views/gift/CatalogPageGiftView.scss

@@ -1,47 +1,5 @@
 .nitro-catalog-gift {
     
-    .gift-tag {
-        width: 306px;
-        height: 159px;
-        background: url(../../../../assets/images/catalog/gift/gift_tag.png) center no-repeat;
-    }
-
-    .gift-face {
-        width: 65px;
-
-        .gift-incognito {
-            width: 37px;
-            height: 48px;
-            background: url(../../../../assets/images/catalog/gift/incognito.png) center no-repeat;
-        }
-
-        .gift-avatar {
-            position: relative;
-            overflow: hidden;
-            width: 40px;
-            height: 50px;
-
-            .avatar-image {
-                position: absolute;
-                left: -25px;
-                top: -20px;
-            }
-        }
-    }
-
-    .gift-message {
-        width: 100%;
-        min-width: 100%;
-        max-width: 100%;
-        height: 90px;
-        min-height: 90px;
-        max-height: 90px;
-        border: none;
-        resize: none;
-        outline: none;
-        line-height: 17px;
-    }
-
     .gift-preview {
         width: 80px;
         height: 80px;

src/views/catalog/views/gift/CatalogPageGiftView.tsx

@@ -5,8 +5,7 @@ import { GetSessionDataManager, LocalizeText } from '../../../../api';
 import { CatalogEvent } from '../../../../events';
 import { CatalogInitGiftEvent } from '../../../../events/catalog/CatalogInitGiftEvent';
 import { SendMessageHook, useUiEvent } from '../../../../hooks';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutGiftCardView } from '../../../../layout';
-import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
 import { CurrencyIcon } from '../../../shared/currency-icon/CurrencyIcon';
 import { FurniImageView } from '../../../shared/furni-image/FurniImageView';
 import { useCatalogContext } from '../../context/CatalogContext';
@@ -166,17 +165,8 @@ export const CatalogPageGiftView: FC<{}> = props =>
                     <label>{ LocalizeText('catalog.gift_wrapping.receiver') }</label>
                     <input type="text" className="form-control form-control-sm" value={ receiverName } onChange={ (e) => setReceiverName(e.target.value) } />
                 </div>
-                <div className="gift-tag d-flex mt-2">
+                <div className="mt-2">
-                    <div className="d-flex align-items-center justify-content-center gift-face flex-shrink-0">
+                    <NitroLayoutGiftCardView figure={ GetSessionDataManager().figure } userName={ GetSessionDataManager().userName } message={ message } editable={ true } onChange={ (value) => setMessage(value) } />
-                        { !showMyFace && <div className="gift-incognito"></div> }
-                        { showMyFace && <div className="gift-avatar">
-                            <AvatarImageView figure={ GetSessionDataManager().figure } direction={ 2 } headOnly={ true } />
-                        </div> }
-                    </div>
-                    <div className="d-flex flex-column w-100 pt-4 pb-4 pe-4 ps-3">
-                        <textarea className="gift-message" maxLength={ 140 } value={ message } onChange={ (e) => setMessage(e.target.value) } placeholder={ LocalizeText('catalog.gift_wrapping_new.message_hint') }></textarea>
-                        { showMyFace && <div className="mt-auto text-end fst-italic">{ LocalizeText('catalog.gift_wrapping_new.message_from', ['name'], [GetSessionDataManager().userName]) }</div> }
-                    </div>
                 </div>
                 <div className="form-check mt-1">
                     <input className="form-check-input" type="checkbox" name="showMyFace" checked={ showMyFace } onChange={ (e) => setShowMyFace(value => !value) } />