Add redeem button

(do not redeem)

src/api/inventory.js

@@ -86,6 +86,24 @@ const inventoryReq = {
             };
             return args;
         });
+    },
+
+    /**
+     * @param {{ code: string }} params
+     * @returns {Promise<{json: any, params}>}
+     * Note: Do not redeem
+     */
+    redeemReward(params) {
+        return request('reward/redeem', {
+            method: 'POST',
+            params
+        }).then((json) => {
+            const args = {
+                json,
+                params
+            };
+            return args;
+        });
     }
 };
 

src/localization/en/en.json

@@ -1534,7 +1534,8 @@
             "item": "Item",
             "sticker": "Sticker",
             "drone_skin": "Drone Skin",
-            "emoji": "Emoji"
+            "emoji": "Emoji",
+            "redeem": "Redeem"
         },
         "change_content_image": {
             "avatar": "Change Avatar Image",
@@ -1998,6 +1999,15 @@
             "placeholder": "127.0.0.1:8080",
             "close": "Close",
             "restart": "Restart"
+        },
+        "redeem": {
+            "header": "Redeem Code",
+            "description": "Enter your code to redeem",
+            "cancel": "Cancel",
+            "redeem": "Redeem",
+            "input_placeholder": "Code",
+            "input_error": "Code is required",
+            "success": "Code redeemed successfully"
         }
     },
     "table": {

src/service/request.js

@@ -285,6 +285,7 @@ export function $throw(code, error, endpoint) {
         (endpoint.startsWith('users/') ||
             endpoint.startsWith('worlds/') ||
             endpoint.startsWith('avatars/') ||
+            endpoint.startsWith('groups/') ||
             endpoint.startsWith('file/'))
     ) {
         ignoreError = true;

src/views/Tools/dialogs/GalleryDialog.vue

@@ -486,6 +486,9 @@
                         <el-button type="default" size="small" @click="getInventory" :icon="Refresh">
                             {{ t('dialog.gallery_icons.refresh') }}
                         </el-button>
+                        <el-button type="default" size="small" @click="redeemReward" :icon="Present">
+                            {{ t('dialog.gallery_icons.redeem') }}
+                        </el-button>
                     </el-button-group>
                 </div>
                 <br />
@@ -534,8 +537,8 @@
 </template>
 
 <script setup>
-    import { ElMessage } from 'element-plus';
+    import { ElMessage, ElMessageBox } from 'element-plus';
-    import { Refresh, Upload, Close, Picture, Delete, Plus } from '@element-plus/icons-vue';
+    import { Refresh, Upload, Close, Picture, Delete, Plus, Present } from '@element-plus/icons-vue';
     import { storeToRefs } from 'pinia';
     import { ref } from 'vue';
     import { useI18n } from 'vue-i18n';
@@ -1073,4 +1076,33 @@
         // inventoryItems : []
         // inventoryItemsCreated: 0
     }
+
+    async function redeemReward() {
+        ElMessageBox.prompt(t('prompt.redeem.description'), t('prompt.redeem.header'), {
+            confirmButtonText: t('prompt.redeem.redeem'),
+            cancelButtonText: t('prompt.redeem.cancel')
+        })
+            .then(({ value }) => {
+                if (value) {
+                    inventoryRequest
+                        .redeemReward({
+                            code: value.trim()
+                        })
+                        .then((args) => {
+                            ElMessage({
+                                message: t('prompt.redeem.success'),
+                                type: 'success'
+                            });
+                            getInventory();
+                            return args;
+                        })
+                        .catch((error) => {
+                            console.error('Error redeeming reward:', error);
+                        });
+                }
+            })
+            .catch(() => {
+                // on cancel
+            });
+    }
 </script>