@rpg-engine/long-bow 0.5.12 → 0.5.14

package/dist/long-bow.cjs.development.js

@@ -17979,27 +17979,35 @@ var TradingItemRow = function TradingItemRow(_ref) {
     onQuantityChange(traderItem, Math.min((_traderItem$stackQty = traderItem.stackQty) != null ? _traderItem$stackQty : 999, selectedQty + qty));
   };
   var renderAccountTypeIndicator = function renderAccountTypeIndicator() {
-    if (isBuy) {
-      switch (traderItem == null ? void 0 : traderItem.accountType) {
-        case shared.UserAccountTypes.PremiumBronze:
-          return React__default.createElement("div", null, React__default.createElement(SmallCircle, {
-            color: "#CD7F32"
-          }), " Account");
-        case shared.UserAccountTypes.PremiumSilver:
-          return React__default.createElement("div", null, React__default.createElement(SmallCircle, {
-            color: "#C0C0C0"
-          }), " Account");
-        case shared.UserAccountTypes.PremiumGold:
-          return React__default.createElement("div", null, React__default.createElement(SmallCircle, {
-            color: "#FFD700"
-          }), " Account");
-        case shared.UserAccountTypes.PremiumUltimate:
-          return React__default.createElement("div", null, React__default.createElement(SmallCircle, {
-            color: "#002E99"
-          }), " Account");
-        default:
-          return null;
-      }
+    if (isBuy && traderItem.canBePurchasedOnlyByPremiumPlans) {
+      return traderItem.canBePurchasedOnlyByPremiumPlans.map(function (accountType) {
+        if (accountType !== shared.UserAccountTypes.Free) {
+          var backgroundColor;
+          var textColor = 'black';
+          switch (accountType) {
+            case shared.UserAccountTypes.PremiumBronze:
+              backgroundColor = '#CD7F32';
+              break;
+            case shared.UserAccountTypes.PremiumSilver:
+              backgroundColor = '#C0C0C0';
+              break;
+            case shared.UserAccountTypes.PremiumGold:
+              backgroundColor = '#FFD700';
+              break;
+            case shared.UserAccountTypes.PremiumUltimate:
+              backgroundColor = '#002E99';
+              break;
+            default:
+              return null;
+          }
+          return React__default.createElement(PremiumLabel, {
+            backgroundColor: backgroundColor,
+            textColor: textColor,
+            key: accountType
+          }, capitalize(accountType) + ' PA');
+        }
+        return null;
+      });
     }
     return null;
   };
@@ -18022,7 +18030,7 @@ var TradingItemRow = function TradingItemRow(_ref) {
   })))), React__default.createElement(ItemNameContainer, null, React__default.createElement(NameValue, null, React__default.createElement("p", null, React__default.createElement(Ellipsis, {
     maxLines: 1,
     maxWidth: "250px"
-  }, capitalize(traderItem.name), renderAccountTypeIndicator())), React__default.createElement("p", null, "$", traderItem.price))), React__default.createElement(QuantityContainer$1, null, React__default.createElement(SelectArrow, {
+  }, capitalize(traderItem.name))), React__default.createElement("p", null, "$", traderItem.price), React__default.createElement("p", null, renderAccountTypeIndicator()))), React__default.createElement(QuantityContainer$1, null, React__default.createElement(SelectArrow, {
     size: 32,
     className: "arrow-selector",
     direction: "left",
@@ -18044,13 +18052,15 @@ var TradingItemRow = function TradingItemRow(_ref) {
     onPointerDown: onRightClick.bind(null, outerQty)
   })));
 };
-// Styled component for the small circle
-var SmallCircle = /*#__PURE__*/styled.span.withConfig({
-  displayName: "TradingItemRow__SmallCircle",
+var PremiumLabel = /*#__PURE__*/styled.span.withConfig({
+  displayName: "TradingItemRow__PremiumLabel",
   componentId: "sc-mja0b5-0"
-})(["display:inline-block;margin-left:8px;height:10px;width:10px;background-color:", ";border-radius:50%;"], function (_ref2) {
-  var color = _ref2.color;
-  return color;
+})(["background-color:", ";color:", ";font-weight:bold;padding:2px 5px;border-radius:5px;margin-right:5px;margin-bottom:5px;display:inline-block;"], function (_ref2) {
+  var backgroundColor = _ref2.backgroundColor;
+  return backgroundColor;
+}, function (_ref3) {
+  var textColor = _ref3.textColor;
+  return textColor;
 });
 var StyledArrow = /*#__PURE__*/styled(SelectArrow).withConfig({
   displayName: "TradingItemRow__StyledArrow",