Stripe starter packs

src/game/interface/details/crewAssignments/Create.js

@@ -34,6 +34,7 @@ import useNameAvailability from '~/hooks/useNameAvailability';
 import usePriceConstants from '~/hooks/usePriceConstants';
 import usePriceHelper from '~/hooks/usePriceHelper';
 import useSimulationEnabled from '~/hooks/useSimulationEnabled';
+import useStarterPacks from '~/hooks/useStarterPacks';
 import useStore from '~/hooks/useStore';
 import useWalletPurchasableBalances from '~/hooks/useWalletPurchasableBalances';
 import { useSwayBalance } from '~/hooks/useWalletTokenBalance';
@@ -832,6 +833,7 @@ const TraitSelector = ({ crewmate, currentTraits, onUpdateTraits, onClose, trait
 
 const CrewAssignmentCreate = ({ backLocation, bookSession, coverImage, crewId, crewmateId, locationId, pendingCrewmate }) => {
   const history = useHistory();
+  const starterPacks = useStarterPacks();
 
   const simulationEnabled = useSimulationEnabled();
   const dispatchSimulationState = useStore((s) => s.dispatchSimulationState);
@@ -1013,8 +1015,10 @@ const CrewAssignmentCreate = ({ backLocation, bookSession, coverImage, crewId, c
     // always show prompt while processing (so can see "loading")
     if (isPurchasingPack || isPackPurchaseIsProcessing) return true;
 
+    // else, show prompt when no sway, crewmate credits, or crewmates (if not already dismissed)
+    return !(swayBalance > 0n || adalianRecruits.length > 0 || Object.keys(crewmateMap || {}).length > 0) && !packPromptDismissed
     // else, show prompt when no sway and not using a credit (if not already dismissed)
-    return !(swayBalance > 0n || !!crewmate?.id) && !packPromptDismissed;
+    // return !(swayBalance > 0n || !!crewmate?.id) && !packPromptDismissed;
   }, [!!crewmate?.id, isPurchasingPack, packPromptDismissed, pendingTransactions, swayBalance]);
 
   // init appearance options as desired
@@ -1626,9 +1630,15 @@ const CrewAssignmentCreate = ({ backLocation, bookSession, coverImage, crewId, c
               </p>
               <Selector><div>Select</div></Selector>
               <div style={{ color: 'white', display: 'flex', flexDirection: 'row', marginBottom: 20 }}>
-                <StarterPack packLabel="intro" asButton setIsPurchasing={setIsPurchasingPack} style={{ marginRight: 15 }} />
-                <StarterPack packLabel="basic" asButton setIsPurchasing={setIsPurchasingPack} style={{ marginRight: 15 }} />
-                <StarterPack packLabel="advanced" asButton setIsPurchasing={setIsPurchasingPack} />
+                {(starterPacks || []).map((product, i) => (
+                  <StarterPack
+                    key={product.id}
+                    asButton
+                    index={i}
+                    product={product}
+                    setIsPurchasing={setIsPurchasingPack}
+                    style={i > 0 ? { marginLeft: 15 } : {}} />
+                ))}
               </div>
             </PromptBody>
           )}
@@ -1638,7 +1648,7 @@ const CrewAssignmentCreate = ({ backLocation, bookSession, coverImage, crewId, c
           }}
           confirmText="Proceed with crewmate only"
           onReject={() => setConfirming(false)}
-          style={{ width: 960 }}
+          style={{ width: Math.max(480, starterPacks?.length * 320 + Math.max(0, (starterPacks?.length - 1) * 15) + 60) }}
         />
       )}
       {confirming && !shouldPromptForPack && (

src/game/launcher/Store.js

@@ -16,12 +16,13 @@ import StarterPackSKU from './store/StarterPackSKU';
 import SwaySKU from './store/SwaySKU';
 import SKULayout from './store/components/SKULayout';
 import { appConfig } from '~/appConfig';
+import { useSwayBalance } from '~/hooks/useWalletTokenBalance';
 
 const storeAssets = {
   packs: 'Starter Packs',
-  sway: 'Sway',
-  crewmates: 'Crewmates',
   asteroids: 'Asteroids',
+  crewmates: 'Crewmates',
+  sway: 'Sway',
 };
 if (appConfig.get('Starknet.chainId') === '0x534e5f5345504f4c4941') {
   storeAssets.faucets = 'Faucets';
@@ -34,22 +35,33 @@ const coverImages = {
   sway: SwayHeroImage,
 };
 
-
 const Store = () => {
-  const { crew } = useCrewContext();
+  const { crew, crewmateMap, adalianRecruits } = useCrewContext();
+  const { data: swayBalance } = useSwayBalance();
   const { data: priceConstants, isLoading } = usePriceConstants();
 
   const initialSubpage = useStore(s => s.launcherSubpage);
 
+  // force to starter packs if !(hasSway || hasCrewmateCredits || hasCrewmates)
+  const isStarterPackUser = useMemo(
+    () => !(swayBalance > 0n || adalianRecruits.length > 0 || Object.keys(crewmateMap || {}).length > 0),
+    [adalianRecruits, crewmateMap, swayBalance]
+  );
+
+  const eligibleAssetKeys = useMemo(() => {
+    return Object.keys(storeAssets)
+      .filter((asset) => isStarterPackUser ? ['packs', 'faucets'].includes(asset) : (asset !== 'packs'))
+  }, [isStarterPackUser]);
+
   const initialSelection = useMemo(() => {
     // use specified starting page, or default (starter packs for new users, sway for existing)
-    let selectionKey = initialSubpage || (!!crew ? 'sway' : 'packs');
-    const linkedSelectionIndex = Object.keys(storeAssets).indexOf(selectionKey);
+    let selectionKey = initialSubpage || (isStarterPackUser ? 'packs' : 'sway');
+    const linkedSelectionIndex = eligibleAssetKeys.indexOf(selectionKey);
     return linkedSelectionIndex >= 0 ? linkedSelectionIndex : 0;
-  }, [!crew, initialSubpage]);
+  }, [!crew, initialSubpage, isStarterPackUser]);
 
   const panes = useMemo(() => {
-    return Object.keys(storeAssets).map((asset) => ({
+    return eligibleAssetKeys.map((asset) => ({
       label: storeAssets[asset],
       pane: (
         <div style={{ height: '100%' }}>
@@ -63,9 +75,10 @@ const Store = () => {
         </div>
       ),
     }))
-  }, []);
+  }, [isStarterPackUser]);
 
   if (!priceConstants?.ADALIAN_PURCHASE_PRICE) return isLoading ? <PageLoader /> : null;
+  if (panes.length === 1) return <LauncherDialog singlePane={[panes[0].pane]} />;
   return (
     <LauncherDialog
       panes={panes}