@mx-cartographer/experiences 9.7.101 → 9.7.103

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [9.7.103] - 11-04-2026
+
+- **ADDED** - `savings_summary_block` for the Save Enough to Live On beat on Insights 2.0 (MEW2-3410)
+
+## [9.7.102] - 11-04-2026
+
+- **ADDED** - `gas_purchase_block` for the Green Gas Purchases Summary beat on Insights 2.0 (MEW2-3411): a gas pump graphic, a fill-ups pill and the amount spent on gas
+
 ## [9.7.101] - 11-04-2026
 
 - **CHANGED** - Monthly Non-Essential Category Summary's donut card renders through `BaseLayout` on Insights 2.0 (WEC-2213)

package/dist/core/types/Insights.d.ts

@@ -265,11 +265,13 @@ export declare const BlockType: {
     readonly DoubleBarChartBlock: "double_bar_chart_block";
     readonly DoubleProgressBarBlock: "double_progress_bar_block";
     readonly DebtsBlock: "debts_block";
+    readonly GasPurchaseBlock: "gas_purchase_block";
     readonly GoalsBlock: "goals_block";
     readonly NoSpendDaysBlock: "no_spend_days_block";
     readonly RepeatingTransactionBlock: "repeating_transaction_block";
     readonly SaveExtraBlock: "save_extra_block";
     readonly SavingsAmountBlock: "savings_amount_block";
+    readonly SavingsSummaryBlock: "savings_summary_block";
     readonly StepChartBlock: "step_chart_block";
     readonly SVGImageBlock: "svg_image_block";
     readonly UpcomingBillBlock: "upcoming_bill_block";
@@ -364,4 +366,18 @@ export interface InstanceSlot {
     interest_rate?: number;
     start_date?: string;
     no_spend_days?: string[];
+    /** First day of the month a monthly summary covers, in ISO form (e.g. `2026-09-01`). */
+    date?: string;
+    /** Number of gas station visits in the month. */
+    total_fill_up_visits?: number;
+    /** Amount spent at gas stations in the month, unformatted. */
+    total_spend?: number;
+    /** V1 name for `total_spend`, read when `total_spend` is absent. */
+    total_debt_for_fill_up_visits_in_prev_month?: number;
+    /** Total available balance across the user's accounts, unformatted. */
+    available_balance?: number;
+    /** Average monthly spend, unformatted. */
+    avg_monthly_spend?: number;
+    /** How long the balance lasts, e.g. "2 months, 11 days". */
+    time_period?: string;
 }

package/dist/core/types/Insights.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Insights.es.js","names":[],"sources":["../../../src/core/types/Insights.ts"],"sourcesContent":["// ============ Core InsightsV2 Types ============\n\nimport { InsightsInstanceSlotData } from './InsightsInstanceSlotData'\n\nexport interface ThemedSVGImageProps {\n  divProps?: React.HTMLAttributes<HTMLDivElement>\n  image: React.ComponentType<React.SVGProps<SVGSVGElement>>\n  isMini?: boolean\n}\n\n/**\n * Emitted by a block when the user drills into a specific datum (e.g. clicks a\n * chart bar). Named fields rather than positional args so blocks with differing\n * shapes can extend this without the call sites transposing values.\n */\nexport interface DrilldownPayload {\n  chartBarIndex: number\n  tabIndex?: number\n  transaction_guid?: string\n  block?: string\n}\n\n/**\n * Which envelope a beat was fetched with. `embedded` (the transaction-row pill + details-drawer\n * card) and `notification` are V2 additions; a surface asks for one with `widget_type=` on the fetch.\n */\nexport type WidgetType = 'full' | 'mini' | 'micro' | 'embedded' | 'notification'\n\n/**\n * V2: the transaction-row tag, its own small section of the `embedded` envelope (the same grammar\n * as `description` / `footer`, with room for a tone or an icon later). Omitted for an insight that\n * tags no transaction row. It deliberately is *not* `short_title`, which stays a per-variant\n * attribute with a second consumer (the bank-holiday sub-header).\n */\nexport interface Pill {\n  text: string\n}\n\n/**\n * V2: facts a drilldown shows that the card does not. On the payload: what every CTA of the card\n * shares (e.g. the account number for the Transaction Details drawer, or the guid list a list drawer\n * shows, `transaction_guids`). On a CTA: the figures that CTA's own drilldown renders (the Transaction\n * List summary header's `amount`, `start_date` / `end_date` and `count`, see `readSummary`). Scalars\n * or string lists, omitted when the insight has none. Never carries copy or user actions (memo,\n * tags, hide, flag come from the transaction store). Values come from the server, so a reader still\n * checks each value's runtime shape.\n */\nexport type DrilldownData = Record<string, string | number | boolean | null | string[]>\n\nexport interface InsightsPayload {\n  widget_type: WidgetType\n  instance_slot: InstanceSlot\n  /**\n   * V1 only. The v2 contract carries everything a block needs on `instance_slot.data`,\n   * and omits this key entirely (see the LargeTransactionV2 payload). Blocks that still require it\n   * get it as a required field through `BlockProps`, which re-declares it.\n   */\n  instance_slot_data?: InsightsInstanceSlotData\n  description: Description\n  primary_cta?: PrimaryCTA\n  secondary_cta?: SecondaryCTA\n  title?: string\n  sub_title?: Subtitle\n  /**\n   * V2 rename of `sub_title`: a flat string, with the logo promoted to the payload-level `logo`\n   * field below. `sub_title` wins when both are present.\n   */\n  subtitle?: string\n  /** V2: header logo paired with the flat `subtitle`: an entity guid or a status icon (`LogoRef`). */\n  logo?: LogoRef\n  /** V2: which design branch the backend picked (e.g. `no_merchant`). */\n  variant?: string\n  /** V2, `embedded` envelope only: the transaction-row pill. */\n  pill?: Pill\n  /**\n   * V2: drilldown-only facts, e.g. `{ account_number: 'XXXXXXXX043' }`, or the guid list a list\n   * drawer shows (`{ transaction_guids: [...] }`).\n   */\n  drilldown_data?: DrilldownData\n  footer?: Footer\n  /**\n   * V2: the link inside the description: on the full card a drawer of its own (Low Account\n   * Balance's \"Transactions ›\"); on mini and micro the card's action, sent instead of `primary_cta`.\n   * Absent when the beat has no link.\n   */\n  in_description_cta?: InDescriptionCTA\n  guid: string\n  user_guid: string\n  client_guid?: string\n  /** Template name, e.g. `LargeTransactionV2`. */\n  template?: string\n  revision?: number\n  /** Unix seconds. */\n  created_at?: number\n  /** Unix seconds. */\n  updated_at?: number\n  /** Unix seconds. */\n  active_at?: number\n  displayed_at?: number | null\n  dismissed_at: number | null\n  cta_clicked_at?: number | null\n  has_been_displayed?: boolean\n  is_dismissed: boolean\n  is_deleted?: boolean\n  is_hidden_by_system?: boolean\n  is_obsolete?: boolean\n  is_refreshable?: boolean\n  is_sampled?: boolean\n  is_zero_state?: boolean\n  status?: string | null\n  /**\n   * V2 (LargeTransactionV2 onward): the entities the beat is about, carried on the payload so\n   * action blocks do not have to reach back out to the beat envelope.\n   */\n  primary_account_guid?: string | null\n  primary_transaction_guid?: string | null\n  primary_category_guid?: string | null\n  primary_merchant_guid?: string | null\n  /**\n   * V2: the repeating transaction a subscription beat is about (Upcoming Subscription, Subscription\n   * Price Increase). Read by `recurring_transaction_block`, see\n   * `actionBlocks/RecurringTransactionBlock/subscriptionBeats.ts`.\n   */\n  primary_repeating_transaction_guid?: string | null\n}\n\nexport interface Legends {\n  label: string\n  value: number\n  additional_value?: number\n  additional_value_type?: string\n  value_type?: string\n}\n\nexport interface Logo {\n  category_guid?: string\n  category_name?: string\n  institution_guid?: string\n  institution_name?: string\n  logo_color?: string\n  /** Draw the `logo_name` icon filled (V2 `ICO-` logos). */\n  logo_fill?: boolean\n  logo_name?: string\n  merchant_guid?: string\n  merchant_name?: string\n}\n\nexport interface Subtitle {\n  logo?: Logo\n  text: string\n}\n\n/**\n * A V2 logo, shared by the header (`InsightsPayload.logo`) and every instance-slot row. It takes\n * one of two shapes:\n *\n * - **Entity**: `guid`, whose prefix (`INS-` / `MCH-` / `CAT-`) picks the logo component, plus an\n *   optional `fallback_guid` for when that component's asset cannot load. Today that is the\n *   category behind an `MCH-` guid, which `MerchantLogo` shows as a tile when the merchant image\n *   is missing.\n * - **Status icon**: `icon` (an mx-icons name, e.g. `warning`) and `color` (a theme palette path,\n *   e.g. `error.main`), for subheaders that show a state rather than an entity (V1's\n *   `logo_name` / `logo_color`).\n *\n * `alt` is the accessible name for either shape. A logo sends one shape; if it sends both, `icon`\n * wins, as `logo_name` does in V1's `SubHeader`.\n */\nexport interface LogoRef {\n  alt?: string\n  color?: string\n  fallback_guid?: string\n  guid?: string\n  icon?: string\n}\n\nexport interface CategoryLogo {\n  category_guid: string\n  category_name: string\n}\n\nexport interface MerchantLogo {\n  merchant_guid: string\n  merchant_name: string\n}\n\nexport interface InstitutionLogo {\n  institution_guid: string\n  institution_name: string\n}\n\nexport interface Description {\n  text: string\n  html_text: string\n}\n\n/**\n * Post message a CTA press sends to the host, resolved by the backend for the beat's current\n * state. Absent/null = the backend has not described one: the frontend uses the template's\n * interim `ctaPostMessages` entry if there is one, else sends no message. `payload` carries only\n * beat-specific extras; the frontend always adds `beat_guid`, `beat_template`, `user_guid` and\n * `action_string`.\n */\nexport interface CtaPostMessageMetadata {\n  /** Post message event; defaults to `beat/cta`. */\n  event?: string | null\n  /** Operation the host should perform, e.g. `op_1`, `op_2`, `op_3`. Defaults to `op_1`. */\n  action?: string | null\n  /** Beat-specific fields merged into the message metadata (account ids, amounts, ...). */\n  payload?: Record<string, unknown> | null\n}\n\nexport interface PrimaryCTA {\n  label: string\n  block: string\n  variant?: string | null\n  /**\n   * What pressing the CTA does beyond opening its block, named by the backend (ditto\n   * `primary_cta_action`, passed through by tupac). Looked up in `insights-v2/ctaActions`;\n   * null / absent / unknown means the CTA only opens its block or posts its message.\n   */\n  action_key?: string | null\n  metadata?: CtaPostMessageMetadata | null\n  /** Figures this CTA's drilldown renders (e.g. a summary header's amount/dates/count). */\n  drilldown_data?: DrilldownData\n}\n\nexport interface SecondaryCTA {\n  label: string\n  /**\n   * Drawer block to open. `null` when the CTA opens nothing (ditto `secondary_cta_block: null`,\n   * e.g. Fee Detected's \"Contact Support\"): the press posts its message to the host instead.\n   */\n  block: string | null\n  variant?: string | null\n  /** See `PrimaryCTA.action_key` (ditto `secondary_cta_action`). */\n  action_key?: string | null\n  metadata?: CtaPostMessageMetadata | null\n  /** Figures this CTA's drilldown renders (e.g. a summary header's amount/dates/count). */\n  drilldown_data?: DrilldownData\n}\n\n/**\n * The description link: its label, the action block it opens and, like a CTA's, the variant that\n * tells that block what to show (ditto's `in_description_cta_variant`, e.g. `low_balance`). On mini\n * and micro it words the card's action; `block` is empty when that action opens no drawer.\n */\nexport interface InDescriptionCTA {\n  label: string\n  block?: string\n  variant?: string | null\n  action_key?: string | null\n  /** tupac's flat host message for the link (`action` plus fields), e.g. Switch's op_1. */\n  post_message_metadata?: ({ action?: string | null } & Record<string, unknown>) | null\n  /** Figures this CTA's drilldown renders (e.g. a summary header's amount/dates/count). */\n  drilldown_data?: DrilldownData\n}\n\nexport interface Footer {\n  /** V1: a pre-formatted date string. */\n  date?: string\n  /**\n   * The account label, on both V1 and V2. The backend resolves the plurality: one account sends\n   * its name (e.g. `Epic Bank`), several send a localized count (e.g. `2 Accounts`), none sends\n   * `null` (tupac's `footer_account_label` returns nil for a beat with no accounts, as Payday Cash\n   * Left Over Status does). There is deliberately no separate `accounts` key.\n   */\n  account?: string | null\n  /**\n   * V2 (LargeTransactionV2 onward): unix seconds, formatted by `Footer` for display.\n   * Replaces `date`; `date` wins when a beat somehow sends both.\n   */\n  timestamp?: number\n}\n\n// ============ Instance Slot Types ============\n// Values are the snake_case block names the backend sends on a beat's instance slot; the PascalCase\n// keys stay as friendly references (e.g. BlockType.BarChartBlock === 'bar_chart_block').\nexport const BlockType = {\n  AccountBlock: 'account_block',\n  AccountSwitchBlock: 'account_switch_block',\n  BarChartBlock: 'bar_chart_block',\n  BudgetBlock: 'budget_block',\n  DirectDepositBlock: 'direct_deposit_block',\n  ImageBlock: 'image_block',\n  MerchantBlock: 'merchant_block',\n  TransactionBlock: 'transaction_block',\n  DonutChartBlock: 'donut_chart_block',\n  DoubleBarChartBlock: 'double_bar_chart_block',\n  DoubleProgressBarBlock: 'double_progress_bar_block',\n  DebtsBlock: 'debts_block',\n  GoalsBlock: 'goals_block',\n  NoSpendDaysBlock: 'no_spend_days_block',\n  RepeatingTransactionBlock: 'repeating_transaction_block',\n  SaveExtraBlock: 'save_extra_block',\n  SavingsAmountBlock: 'savings_amount_block',\n  StepChartBlock: 'step_chart_block',\n  SVGImageBlock: 'svg_image_block',\n  UpcomingBillBlock: 'upcoming_bill_block',\n  UpcomingSubscriptionBlock: 'upcoming_subscription_block',\n  WithdrawalBlock: 'withdrawal_block',\n} as const\n\nexport type BlockType = (typeof BlockType)[keyof typeof BlockType]\n\n/**\n * A pre-localized row on a V2 instance slot. The backend resolves the copy and formatting; the\n * logo is a `LogoRef` (an entity guid or a status icon, see `logoFromRef`).\n */\nexport interface InstanceSlotRow {\n  amount?: number\n  logo?: LogoRef\n  primary_text?: string\n  secondary_text?: string\n}\n\n/**\n * V2: the slots a block's variant filled, keyed by slot name; ditto owns the names and omits any\n * slot it has no value for (`lib/ditto/blocks/<block>.yml`). Read with `slot()`, which names the\n * kind the caller expects.\n */\nexport interface InstanceSlotData {\n  [slot: string]: unknown\n}\n\n/**\n * Reads one slot off a block's `data`; undefined when ditto did not fill it.\n *\n * The caller names the kind, because the slot's kind lives in the block's ditto schema and not\n * here — a block fills slots with whatever its card needs, so no fixed list of kinds would hold\n * (`account_switch_block` alone carries a boolean and `budget_block` a nested object).\n */\nexport const slot = <T = unknown>(\n  data: InstanceSlotData | undefined,\n  name: string,\n): T | undefined => data?.[name] as T | undefined\n\n/**\n * V2: which block renders this beat's content, and what it renders.\n *\n * `block` is optional: a beat whose template has no ditto config arrives as an empty `{}` and the\n * card renders its copy and CTAs alone, so a reader cannot assume a block is named. One interface\n * with `block` optional rather than a union with `Record<string, never>`, which TypeScript absorbs\n * — that union left `block` reading as required and typed a promise it did not keep.\n *\n * `variant` is optional for the same reason — the empty `{}` carries neither. Every ditto beat\n * file that names a block also names a variant, so a *filled* slot always has one; ditto drops a\n * nil variant rather than sending null, which is why the type is `string | null | undefined`.\n */\nexport interface InstanceSlot {\n  block?: BlockType\n  variant?: string | null\n  /** The slots this block's variant declares in ditto. */\n  data?: InstanceSlotData\n  // Direct Deposit block (Set Up Direct Deposit, Switch Direct Deposit, Missing\n  // Interest Rate): account facts carried flat on the slot, beside `data`.\n  /** Primary line on the hero card, e.g. \"Epic Bank Checking, *1234\". */\n  account_name?: string\n  /** Secondary line beneath the name, e.g. \"Checking Account\" / \"Credit Card\". */\n  account_type?: string\n  /** Status pill label, e.g. \"Direct Deposit Not Set Up\" / \"Interest Rate: 19.99% APR\". */\n  status_text?: string\n  institution_guid?: string\n  institution_name?: string\n  // Shared across multiple V2 component blocks:\n  //   `amount` — UpcomingBillBlock (projected bill), UpcomingSubscriptionBlock (price per cadence).\n  //              (SavingsOpportunityBlock now reads `amount` off `instance_slot.data`, not this flat field.)\n  //   `merchant_guid` / `merchant_name` — UpcomingBillBlock (bill row logo + name),\n  //              UpcomingSubscriptionBlock (hero logo + name).\n  /** Dollar amount (unformatted); the block formats it as currency. */\n  amount?: number\n  // Withdrawal block (Emergency Fund Withdrawal): one row flat on the slot - `amount` above is the\n  // withdrawal, shown with its date line \"{amount_label} {withdrawal_date}\" over the balance row.\n  /** Pre-localized lead-in for the date line, e.g. \"Withdrawn on\". */\n  amount_label?: string\n  /** The withdrawal's calendar day, `YYYY-MM-DD` (e.g. `2026-10-20`); the card formats it. */\n  withdrawal_date?: string\n  /** Account balance after the withdrawal (unformatted); the card formats it as currency. */\n  balance?: number\n  /** Pre-localized label for the balance row, e.g. \"Balance\". */\n  balance_label?: string\n  /** Merchant guid used to render the inline / hero logo via `LogoFromGuid` (`MCH-...`). */\n  merchant_guid?: string\n  /** Merchant display name — shown as logo alt text and as the merchant/hero label. */\n  merchant_name?: string\n  // Upcoming Bill block (Projected Bill Payment): the block derives the Sun→Sat week strip\n  // around `due_date` at render time.\n  /** Due date of the projected bill in ISO form (e.g. `2025-10-30`). */\n  due_date?: string\n  // Account block (confetti tile): V1 flat fallback for the label line when `instance_slot.data` is\n  // absent — `AccountBlock` reads `data.sub_text` first, then this. (The Savings Opportunity coupon\n  // now reads `primary_text`/`amount` off `data`, so it no longer reads this flat field.)\n  /** Caption/label line for the confetti tile (V1 fallback). */\n  label?: string\n  // Upcoming Subscription block: billing cadence for the price pill (`${amount} / ${cadence}`).\n  /** Billing cadence word that trails the price, e.g. `month` or `year`. */\n  cadence?: string\n  // Account block (status on/off-track, deposit, payoff variants): card content carried flat on\n  // the slot (the V2 contract drops `instance_slot_data`). `amount`, `label`, `merchant_guid`,\n  // `merchant_name`, `institution_guid`, `institution_name` are shared fields declared above.\n  /** Secondary line beneath the amount on the standard card, e.g. \"Remaining after expenses\". */\n  sub_text?: string\n  /** Header bar text (standard card) or the colored category strip label (deposit cards). */\n  header_text?: string\n  /** Generic-tile icon name used when no merchant/institution logo is available. */\n  icon_name?: string\n  /** Category guid used to render the deposit-card logo fallback. */\n  category_guid?: string\n  // Debts block: `amount` is the current balance; the shared account/institution fields above.\n  /** Projected payoff date in ISO form (e.g. `2027-03-01`); the block formats it as month + year. */\n  payoff_date?: string\n  /** Monthly payment toward the debt (unformatted); the block formats it as currency. */\n  monthly_payment?: number\n  /** Annual interest rate as a percentage (e.g. `19.99`); the block formats it as a percent. */\n  interest_rate?: number\n  start_date?: string\n  no_spend_days?: string[]\n}\n"],"mappings":"AA2UA,IAAa,IAAA,CACX,GACA,MACkB,IAAO,CAAA"}
+{"version":3,"file":"Insights.es.js","names":[],"sources":["../../../src/core/types/Insights.ts"],"sourcesContent":["// ============ Core InsightsV2 Types ============\n\nimport { InsightsInstanceSlotData } from './InsightsInstanceSlotData'\n\nexport interface ThemedSVGImageProps {\n  divProps?: React.HTMLAttributes<HTMLDivElement>\n  image: React.ComponentType<React.SVGProps<SVGSVGElement>>\n  isMini?: boolean\n}\n\n/**\n * Emitted by a block when the user drills into a specific datum (e.g. clicks a\n * chart bar). Named fields rather than positional args so blocks with differing\n * shapes can extend this without the call sites transposing values.\n */\nexport interface DrilldownPayload {\n  chartBarIndex: number\n  tabIndex?: number\n  transaction_guid?: string\n  block?: string\n}\n\n/**\n * Which envelope a beat was fetched with. `embedded` (the transaction-row pill + details-drawer\n * card) and `notification` are V2 additions; a surface asks for one with `widget_type=` on the fetch.\n */\nexport type WidgetType = 'full' | 'mini' | 'micro' | 'embedded' | 'notification'\n\n/**\n * V2: the transaction-row tag, its own small section of the `embedded` envelope (the same grammar\n * as `description` / `footer`, with room for a tone or an icon later). Omitted for an insight that\n * tags no transaction row. It deliberately is *not* `short_title`, which stays a per-variant\n * attribute with a second consumer (the bank-holiday sub-header).\n */\nexport interface Pill {\n  text: string\n}\n\n/**\n * V2: facts a drilldown shows that the card does not. On the payload: what every CTA of the card\n * shares (e.g. the account number for the Transaction Details drawer, or the guid list a list drawer\n * shows, `transaction_guids`). On a CTA: the figures that CTA's own drilldown renders (the Transaction\n * List summary header's `amount`, `start_date` / `end_date` and `count`, see `readSummary`). Scalars\n * or string lists, omitted when the insight has none. Never carries copy or user actions (memo,\n * tags, hide, flag come from the transaction store). Values come from the server, so a reader still\n * checks each value's runtime shape.\n */\nexport type DrilldownData = Record<string, string | number | boolean | null | string[]>\n\nexport interface InsightsPayload {\n  widget_type: WidgetType\n  instance_slot: InstanceSlot\n  /**\n   * V1 only. The v2 contract carries everything a block needs on `instance_slot.data`,\n   * and omits this key entirely (see the LargeTransactionV2 payload). Blocks that still require it\n   * get it as a required field through `BlockProps`, which re-declares it.\n   */\n  instance_slot_data?: InsightsInstanceSlotData\n  description: Description\n  primary_cta?: PrimaryCTA\n  secondary_cta?: SecondaryCTA\n  title?: string\n  sub_title?: Subtitle\n  /**\n   * V2 rename of `sub_title`: a flat string, with the logo promoted to the payload-level `logo`\n   * field below. `sub_title` wins when both are present.\n   */\n  subtitle?: string\n  /** V2: header logo paired with the flat `subtitle`: an entity guid or a status icon (`LogoRef`). */\n  logo?: LogoRef\n  /** V2: which design branch the backend picked (e.g. `no_merchant`). */\n  variant?: string\n  /** V2, `embedded` envelope only: the transaction-row pill. */\n  pill?: Pill\n  /**\n   * V2: drilldown-only facts, e.g. `{ account_number: 'XXXXXXXX043' }`, or the guid list a list\n   * drawer shows (`{ transaction_guids: [...] }`).\n   */\n  drilldown_data?: DrilldownData\n  footer?: Footer\n  /**\n   * V2: the link inside the description: on the full card a drawer of its own (Low Account\n   * Balance's \"Transactions ›\"); on mini and micro the card's action, sent instead of `primary_cta`.\n   * Absent when the beat has no link.\n   */\n  in_description_cta?: InDescriptionCTA\n  guid: string\n  user_guid: string\n  client_guid?: string\n  /** Template name, e.g. `LargeTransactionV2`. */\n  template?: string\n  revision?: number\n  /** Unix seconds. */\n  created_at?: number\n  /** Unix seconds. */\n  updated_at?: number\n  /** Unix seconds. */\n  active_at?: number\n  displayed_at?: number | null\n  dismissed_at: number | null\n  cta_clicked_at?: number | null\n  has_been_displayed?: boolean\n  is_dismissed: boolean\n  is_deleted?: boolean\n  is_hidden_by_system?: boolean\n  is_obsolete?: boolean\n  is_refreshable?: boolean\n  is_sampled?: boolean\n  is_zero_state?: boolean\n  status?: string | null\n  /**\n   * V2 (LargeTransactionV2 onward): the entities the beat is about, carried on the payload so\n   * action blocks do not have to reach back out to the beat envelope.\n   */\n  primary_account_guid?: string | null\n  primary_transaction_guid?: string | null\n  primary_category_guid?: string | null\n  primary_merchant_guid?: string | null\n  /**\n   * V2: the repeating transaction a subscription beat is about (Upcoming Subscription, Subscription\n   * Price Increase). Read by `recurring_transaction_block`, see\n   * `actionBlocks/RecurringTransactionBlock/subscriptionBeats.ts`.\n   */\n  primary_repeating_transaction_guid?: string | null\n}\n\nexport interface Legends {\n  label: string\n  value: number\n  additional_value?: number\n  additional_value_type?: string\n  value_type?: string\n}\n\nexport interface Logo {\n  category_guid?: string\n  category_name?: string\n  institution_guid?: string\n  institution_name?: string\n  logo_color?: string\n  /** Draw the `logo_name` icon filled (V2 `ICO-` logos). */\n  logo_fill?: boolean\n  logo_name?: string\n  merchant_guid?: string\n  merchant_name?: string\n}\n\nexport interface Subtitle {\n  logo?: Logo\n  text: string\n}\n\n/**\n * A V2 logo, shared by the header (`InsightsPayload.logo`) and every instance-slot row. It takes\n * one of two shapes:\n *\n * - **Entity**: `guid`, whose prefix (`INS-` / `MCH-` / `CAT-`) picks the logo component, plus an\n *   optional `fallback_guid` for when that component's asset cannot load. Today that is the\n *   category behind an `MCH-` guid, which `MerchantLogo` shows as a tile when the merchant image\n *   is missing.\n * - **Status icon**: `icon` (an mx-icons name, e.g. `warning`) and `color` (a theme palette path,\n *   e.g. `error.main`), for subheaders that show a state rather than an entity (V1's\n *   `logo_name` / `logo_color`).\n *\n * `alt` is the accessible name for either shape. A logo sends one shape; if it sends both, `icon`\n * wins, as `logo_name` does in V1's `SubHeader`.\n */\nexport interface LogoRef {\n  alt?: string\n  color?: string\n  fallback_guid?: string\n  guid?: string\n  icon?: string\n}\n\nexport interface CategoryLogo {\n  category_guid: string\n  category_name: string\n}\n\nexport interface MerchantLogo {\n  merchant_guid: string\n  merchant_name: string\n}\n\nexport interface InstitutionLogo {\n  institution_guid: string\n  institution_name: string\n}\n\nexport interface Description {\n  text: string\n  html_text: string\n}\n\n/**\n * Post message a CTA press sends to the host, resolved by the backend for the beat's current\n * state. Absent/null = the backend has not described one: the frontend uses the template's\n * interim `ctaPostMessages` entry if there is one, else sends no message. `payload` carries only\n * beat-specific extras; the frontend always adds `beat_guid`, `beat_template`, `user_guid` and\n * `action_string`.\n */\nexport interface CtaPostMessageMetadata {\n  /** Post message event; defaults to `beat/cta`. */\n  event?: string | null\n  /** Operation the host should perform, e.g. `op_1`, `op_2`, `op_3`. Defaults to `op_1`. */\n  action?: string | null\n  /** Beat-specific fields merged into the message metadata (account ids, amounts, ...). */\n  payload?: Record<string, unknown> | null\n}\n\nexport interface PrimaryCTA {\n  label: string\n  block: string\n  variant?: string | null\n  /**\n   * What pressing the CTA does beyond opening its block, named by the backend (ditto\n   * `primary_cta_action`, passed through by tupac). Looked up in `insights-v2/ctaActions`;\n   * null / absent / unknown means the CTA only opens its block or posts its message.\n   */\n  action_key?: string | null\n  metadata?: CtaPostMessageMetadata | null\n  /** Figures this CTA's drilldown renders (e.g. a summary header's amount/dates/count). */\n  drilldown_data?: DrilldownData\n}\n\nexport interface SecondaryCTA {\n  label: string\n  /**\n   * Drawer block to open. `null` when the CTA opens nothing (ditto `secondary_cta_block: null`,\n   * e.g. Fee Detected's \"Contact Support\"): the press posts its message to the host instead.\n   */\n  block: string | null\n  variant?: string | null\n  /** See `PrimaryCTA.action_key` (ditto `secondary_cta_action`). */\n  action_key?: string | null\n  metadata?: CtaPostMessageMetadata | null\n  /** Figures this CTA's drilldown renders (e.g. a summary header's amount/dates/count). */\n  drilldown_data?: DrilldownData\n}\n\n/**\n * The description link: its label, the action block it opens and, like a CTA's, the variant that\n * tells that block what to show (ditto's `in_description_cta_variant`, e.g. `low_balance`). On mini\n * and micro it words the card's action; `block` is empty when that action opens no drawer.\n */\nexport interface InDescriptionCTA {\n  label: string\n  block?: string\n  variant?: string | null\n  action_key?: string | null\n  /** tupac's flat host message for the link (`action` plus fields), e.g. Switch's op_1. */\n  post_message_metadata?: ({ action?: string | null } & Record<string, unknown>) | null\n  /** Figures this CTA's drilldown renders (e.g. a summary header's amount/dates/count). */\n  drilldown_data?: DrilldownData\n}\n\nexport interface Footer {\n  /** V1: a pre-formatted date string. */\n  date?: string\n  /**\n   * The account label, on both V1 and V2. The backend resolves the plurality: one account sends\n   * its name (e.g. `Epic Bank`), several send a localized count (e.g. `2 Accounts`), none sends\n   * `null` (tupac's `footer_account_label` returns nil for a beat with no accounts, as Payday Cash\n   * Left Over Status does). There is deliberately no separate `accounts` key.\n   */\n  account?: string | null\n  /**\n   * V2 (LargeTransactionV2 onward): unix seconds, formatted by `Footer` for display.\n   * Replaces `date`; `date` wins when a beat somehow sends both.\n   */\n  timestamp?: number\n}\n\n// ============ Instance Slot Types ============\n// Values are the snake_case block names the backend sends on a beat's instance slot; the PascalCase\n// keys stay as friendly references (e.g. BlockType.BarChartBlock === 'bar_chart_block').\nexport const BlockType = {\n  AccountBlock: 'account_block',\n  AccountSwitchBlock: 'account_switch_block',\n  BarChartBlock: 'bar_chart_block',\n  BudgetBlock: 'budget_block',\n  DirectDepositBlock: 'direct_deposit_block',\n  ImageBlock: 'image_block',\n  MerchantBlock: 'merchant_block',\n  TransactionBlock: 'transaction_block',\n  DonutChartBlock: 'donut_chart_block',\n  DoubleBarChartBlock: 'double_bar_chart_block',\n  DoubleProgressBarBlock: 'double_progress_bar_block',\n  DebtsBlock: 'debts_block',\n  GasPurchaseBlock: 'gas_purchase_block',\n  GoalsBlock: 'goals_block',\n  NoSpendDaysBlock: 'no_spend_days_block',\n  RepeatingTransactionBlock: 'repeating_transaction_block',\n  SaveExtraBlock: 'save_extra_block',\n  SavingsAmountBlock: 'savings_amount_block',\n  SavingsSummaryBlock: 'savings_summary_block',\n  StepChartBlock: 'step_chart_block',\n  SVGImageBlock: 'svg_image_block',\n  UpcomingBillBlock: 'upcoming_bill_block',\n  UpcomingSubscriptionBlock: 'upcoming_subscription_block',\n  WithdrawalBlock: 'withdrawal_block',\n} as const\n\nexport type BlockType = (typeof BlockType)[keyof typeof BlockType]\n\n/**\n * A pre-localized row on a V2 instance slot. The backend resolves the copy and formatting; the\n * logo is a `LogoRef` (an entity guid or a status icon, see `logoFromRef`).\n */\nexport interface InstanceSlotRow {\n  amount?: number\n  logo?: LogoRef\n  primary_text?: string\n  secondary_text?: string\n}\n\n/**\n * V2: the slots a block's variant filled, keyed by slot name; ditto owns the names and omits any\n * slot it has no value for (`lib/ditto/blocks/<block>.yml`). Read with `slot()`, which names the\n * kind the caller expects.\n */\nexport interface InstanceSlotData {\n  [slot: string]: unknown\n}\n\n/**\n * Reads one slot off a block's `data`; undefined when ditto did not fill it.\n *\n * The caller names the kind, because the slot's kind lives in the block's ditto schema and not\n * here — a block fills slots with whatever its card needs, so no fixed list of kinds would hold\n * (`account_switch_block` alone carries a boolean and `budget_block` a nested object).\n */\nexport const slot = <T = unknown>(\n  data: InstanceSlotData | undefined,\n  name: string,\n): T | undefined => data?.[name] as T | undefined\n\n/**\n * V2: which block renders this beat's content, and what it renders.\n *\n * `block` is optional: a beat whose template has no ditto config arrives as an empty `{}` and the\n * card renders its copy and CTAs alone, so a reader cannot assume a block is named. One interface\n * with `block` optional rather than a union with `Record<string, never>`, which TypeScript absorbs\n * — that union left `block` reading as required and typed a promise it did not keep.\n *\n * `variant` is optional for the same reason — the empty `{}` carries neither. Every ditto beat\n * file that names a block also names a variant, so a *filled* slot always has one; ditto drops a\n * nil variant rather than sending null, which is why the type is `string | null | undefined`.\n */\nexport interface InstanceSlot {\n  block?: BlockType\n  variant?: string | null\n  /** The slots this block's variant declares in ditto. */\n  data?: InstanceSlotData\n  // Direct Deposit block (Set Up Direct Deposit, Switch Direct Deposit, Missing\n  // Interest Rate): account facts carried flat on the slot, beside `data`.\n  /** Primary line on the hero card, e.g. \"Epic Bank Checking, *1234\". */\n  account_name?: string\n  /** Secondary line beneath the name, e.g. \"Checking Account\" / \"Credit Card\". */\n  account_type?: string\n  /** Status pill label, e.g. \"Direct Deposit Not Set Up\" / \"Interest Rate: 19.99% APR\". */\n  status_text?: string\n  institution_guid?: string\n  institution_name?: string\n  // Shared across multiple V2 component blocks:\n  //   `amount` — UpcomingBillBlock (projected bill), UpcomingSubscriptionBlock (price per cadence).\n  //              (SavingsOpportunityBlock now reads `amount` off `instance_slot.data`, not this flat field.)\n  //   `merchant_guid` / `merchant_name` — UpcomingBillBlock (bill row logo + name),\n  //              UpcomingSubscriptionBlock (hero logo + name).\n  /** Dollar amount (unformatted); the block formats it as currency. */\n  amount?: number\n  // Withdrawal block (Emergency Fund Withdrawal): one row flat on the slot - `amount` above is the\n  // withdrawal, shown with its date line \"{amount_label} {withdrawal_date}\" over the balance row.\n  /** Pre-localized lead-in for the date line, e.g. \"Withdrawn on\". */\n  amount_label?: string\n  /** The withdrawal's calendar day, `YYYY-MM-DD` (e.g. `2026-10-20`); the card formats it. */\n  withdrawal_date?: string\n  /** Account balance after the withdrawal (unformatted); the card formats it as currency. */\n  balance?: number\n  /** Pre-localized label for the balance row, e.g. \"Balance\". */\n  balance_label?: string\n  /** Merchant guid used to render the inline / hero logo via `LogoFromGuid` (`MCH-...`). */\n  merchant_guid?: string\n  /** Merchant display name — shown as logo alt text and as the merchant/hero label. */\n  merchant_name?: string\n  // Upcoming Bill block (Projected Bill Payment): the block derives the Sun→Sat week strip\n  // around `due_date` at render time.\n  /** Due date of the projected bill in ISO form (e.g. `2025-10-30`). */\n  due_date?: string\n  // Account block (confetti tile): V1 flat fallback for the label line when `instance_slot.data` is\n  // absent — `AccountBlock` reads `data.sub_text` first, then this. (The Savings Opportunity coupon\n  // now reads `primary_text`/`amount` off `data`, so it no longer reads this flat field.)\n  /** Caption/label line for the confetti tile (V1 fallback). */\n  label?: string\n  // Upcoming Subscription block: billing cadence for the price pill (`${amount} / ${cadence}`).\n  /** Billing cadence word that trails the price, e.g. `month` or `year`. */\n  cadence?: string\n  // Account block (status on/off-track, deposit, payoff variants): card content carried flat on\n  // the slot (the V2 contract drops `instance_slot_data`). `amount`, `label`, `merchant_guid`,\n  // `merchant_name`, `institution_guid`, `institution_name` are shared fields declared above.\n  /** Secondary line beneath the amount on the standard card, e.g. \"Remaining after expenses\". */\n  sub_text?: string\n  /** Header bar text (standard card) or the colored category strip label (deposit cards). */\n  header_text?: string\n  /** Generic-tile icon name used when no merchant/institution logo is available. */\n  icon_name?: string\n  /** Category guid used to render the deposit-card logo fallback. */\n  category_guid?: string\n  // Debts block: `amount` is the current balance; the shared account/institution fields above.\n  /** Projected payoff date in ISO form (e.g. `2027-03-01`); the block formats it as month + year. */\n  payoff_date?: string\n  /** Monthly payment toward the debt (unformatted); the block formats it as currency. */\n  monthly_payment?: number\n  /** Annual interest rate as a percentage (e.g. `19.99`); the block formats it as a percent. */\n  interest_rate?: number\n  start_date?: string\n  no_spend_days?: string[]\n  /** First day of the month a monthly summary covers, in ISO form (e.g. `2026-09-01`). */\n  date?: string\n  /** Number of gas station visits in the month. */\n  total_fill_up_visits?: number\n  /** Amount spent at gas stations in the month, unformatted. */\n  total_spend?: number\n  /** V1 name for `total_spend`, read when `total_spend` is absent. */\n  total_debt_for_fill_up_visits_in_prev_month?: number\n  /** Total available balance across the user's accounts, unformatted. */\n  available_balance?: number\n  /** Average monthly spend, unformatted. */\n  avg_monthly_spend?: number\n  /** How long the balance lasts, e.g. \"2 months, 11 days\". */\n  time_period?: string\n}\n"],"mappings":"AA6UA,IAAa,IAAA,CACX,GACA,MACkB,IAAO,CAAA"}

package/dist/core/types/localization/InsightsFeedCopy.d.ts

@@ -32,6 +32,11 @@ interface GeneralInsightsFeedCopy {
     update: string;
     updating: string;
     dollar_bill?: string;
+    /** `_1{count}` — number of gas fill-ups, e.g. "5 Fill-ups". */
+    gas_fill_ups_count?: string;
+    gas_fill_ups_count_one?: string;
+    gas_pump?: string;
+    gas_spent_on_gas?: string;
     /** `_1{institution}` — the alt text of an institution's logo, e.g. "Chase Institution Logo". */
     institution_Logo?: string;
     weekly_no_spending_component_alt_text?: DynamicKeyValue;

package/dist/insights-v2/actionBlocks/MakeTransferActionBlock/SaveEnoughToLiveOnBottomSection.es.js

@@ -1,5 +1,5 @@
 import { ThemedSVGImage as m } from "../../components/chartblocks/ThemedSVGImage.es.js";
-import { ReactComponent as p } from "./images/SaveEnoughToLiveOnBottom.es.js";
+import { ReactComponent as p } from "../../components/shared/images/SaveEnoughToLiveOnBottom.es.js";
 import a from "@mui/material/Stack";
 import { H2 as x, Text as d } from "@mxenabled/mxui";
 import { jsx as e, jsxs as r } from "react/jsx-runtime";

package/dist/insights-v2/actionBlocks/MakeTransferActionBlock/SaveEnoughToLiveOnBottomSection.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"SaveEnoughToLiveOnBottomSection.es.js","names":[],"sources":["../../../../src/insights-v2/actionBlocks/MakeTransferActionBlock/SaveEnoughToLiveOnBottomSection.tsx"],"sourcesContent":["import Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\n\nimport { type SxProps } from '@mui/material/styles'\n\nimport { H2, Text } from '@mxenabled/mxui'\n\nimport { ReactComponent as Image } from './images/SaveEnoughToLiveOnBottom.svg'\nimport { ThemedSVGImage } from '../../components/chartblocks/ThemedSVGImage'\n\nconst ROW_STYLES = {\n  alignItems: 'center',\n  flexDirection: 'row',\n  height: 40,\n  justifyContent: 'space-between',\n  px: 16,\n  py: 2,\n}\n\ninterface BalanceRowProps {\n  label: string\n  value: string\n  withBorder?: boolean\n}\n\nconst BalanceRow = ({ label, value, withBorder = false }: BalanceRowProps) => (\n  <Stack\n    sx={{\n      ...ROW_STYLES,\n      ...(withBorder && {\n        borderBottom: '1px solid',\n        borderColor: 'divider',\n      }),\n    }}\n  >\n    <Text color=\"text.secondary\" variant=\"caption\">\n      {label}\n    </Text>\n    <Text bold={true} variant=\"body2\">\n      {value}\n    </Text>\n  </Stack>\n)\n\ninterface SaveEnoughToLiveOnBottomSectionProps {\n  content: string\n  leftLabel: string\n  leftValue: string\n  rightLabel: string\n  rightValue: string\n  sx?: SxProps\n}\n\nconst SaveEnoughToLiveOnBottomSection = ({\n  content,\n  leftLabel,\n  leftValue,\n  rightLabel,\n  rightValue,\n  sx,\n}: SaveEnoughToLiveOnBottomSectionProps) => (\n  <Stack sx={{ alignItems: 'center', gap: 12 }}>\n    <Box sx={{ display: 'grid', placeItems: 'center' }}>\n      <ThemedSVGImage divProps={{ style: { height: 'auto', gridArea: '1 / 1' } }} image={Image} />\n      <H2 sx={{ color: 'neutral.contrastText', gridArea: '1 / 1', textAlign: 'center' }}>\n        {content}\n      </H2>\n    </Box>\n    <Stack\n      sx={{\n        border: '1px solid',\n        borderColor: 'divider',\n        borderRadius: 1,\n        width: 288,\n        ...sx,\n      }}\n    >\n      <BalanceRow label={leftLabel} value={leftValue} withBorder={true} />\n      <BalanceRow label={rightLabel} value={rightValue} />\n    </Stack>\n  </Stack>\n)\n\nexport default SaveEnoughToLiveOnBottomSection\n"],"mappings":";;;;;;AAUA,IAAM,IAAa;AAAA,EACjB,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB,IAAI;AAAA,EACJ,IAAI;AACN,GAQM,IAAA,CAAc,EAAE,OAAA,GAAO,OAAA,GAAO,YAAA,IAAa,GAAA,MAC/C,gBAAA,EAAC,GAAD;AAAA,EACE,IAAI;AAAA,IACF,GAAG;AAAA,IACH,GAAI,KAAc;AAAA,MAChB,cAAc;AAAA,MACd,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EAPF,UAAA,CASE,gBAAA,EAAC,GAAD;AAAA,IAAM,OAAM;AAAA,IAAiB,SAAQ;AAAA,IAClC,UAAA;AAAA,EACG,CAAA,GACN,gBAAA,EAAC,GAAD;AAAA,IAAM,MAAM;AAAA,IAAM,SAAQ;AAAA,IACvB,UAAA;AAAA,EACG,CAAA,CACD;IAYH,IAAA,CAAmC,EACvC,SAAA,GACA,WAAA,GACA,WAAA,GACA,YAAA,GACA,YAAA,GACA,IAAA,EAAA,MAEA,gBAAA,EAAC,GAAD;AAAA,EAAO,IAAI;AAAA,IAAE,YAAY;AAAA,IAAU,KAAK;AAAA,EAAG;AAAA,EAA3C,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,IAAK,IAAI;AAAA,MAAE,SAAS;AAAA,MAAQ,YAAY;AAAA,IAAS;AAAA,IAAjD,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MAAgB,UAAU,EAAE,OAAO;AAAA,QAAE,QAAQ;AAAA,QAAQ,UAAU;AAAA,MAAQ,EAAE;AAAA,MAAG,OAAO;AAAA,IAAQ,CAAA,GAC3F,gBAAA,EAAC,GAAD;AAAA,MAAI,IAAI;AAAA,QAAE,OAAO;AAAA,QAAwB,UAAU;AAAA,QAAS,WAAW;AAAA,MAAS;AAAA,MAC7E,UAAA;AAAA,IACC,CAAA,CACD;AAAA,EACL,CAAA,GAAA,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,cAAc;AAAA,MACd,OAAO;AAAA,MACP,GAAG;AAAA,IACL;AAAA,IAPF,UAAA,CASE,gBAAA,EAAC,GAAD;AAAA,MAAY,OAAO;AAAA,MAAW,OAAO;AAAA,MAAW,YAAY;AAAA,IAAO,CAAA,GACnE,gBAAA,EAAC,GAAD;AAAA,MAAY,OAAO;AAAA,MAAY,OAAO;AAAA,IAAa,CAAA,CAC9C;AAAA,EACF,CAAA,CAAA"}
+{"version":3,"file":"SaveEnoughToLiveOnBottomSection.es.js","names":[],"sources":["../../../../src/insights-v2/actionBlocks/MakeTransferActionBlock/SaveEnoughToLiveOnBottomSection.tsx"],"sourcesContent":["import Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\n\nimport { type SxProps } from '@mui/material/styles'\n\nimport { H2, Text } from '@mxenabled/mxui'\n\nimport { ReactComponent as Image } from '../../components/shared/images/SaveEnoughToLiveOnBottom.svg'\nimport { ThemedSVGImage } from '../../components/chartblocks/ThemedSVGImage'\n\nconst ROW_STYLES = {\n  alignItems: 'center',\n  flexDirection: 'row',\n  height: 40,\n  justifyContent: 'space-between',\n  px: 16,\n  py: 2,\n}\n\ninterface BalanceRowProps {\n  label: string\n  value: string\n  withBorder?: boolean\n}\n\nconst BalanceRow = ({ label, value, withBorder = false }: BalanceRowProps) => (\n  <Stack\n    sx={{\n      ...ROW_STYLES,\n      ...(withBorder && {\n        borderBottom: '1px solid',\n        borderColor: 'divider',\n      }),\n    }}\n  >\n    <Text color=\"text.secondary\" variant=\"caption\">\n      {label}\n    </Text>\n    <Text bold={true} variant=\"body2\">\n      {value}\n    </Text>\n  </Stack>\n)\n\ninterface SaveEnoughToLiveOnBottomSectionProps {\n  content: string\n  leftLabel: string\n  leftValue: string\n  rightLabel: string\n  rightValue: string\n  sx?: SxProps\n}\n\nconst SaveEnoughToLiveOnBottomSection = ({\n  content,\n  leftLabel,\n  leftValue,\n  rightLabel,\n  rightValue,\n  sx,\n}: SaveEnoughToLiveOnBottomSectionProps) => (\n  <Stack sx={{ alignItems: 'center', gap: 12 }}>\n    <Box sx={{ display: 'grid', placeItems: 'center' }}>\n      <ThemedSVGImage divProps={{ style: { height: 'auto', gridArea: '1 / 1' } }} image={Image} />\n      <H2 sx={{ color: 'neutral.contrastText', gridArea: '1 / 1', textAlign: 'center' }}>\n        {content}\n      </H2>\n    </Box>\n    <Stack\n      sx={{\n        border: '1px solid',\n        borderColor: 'divider',\n        borderRadius: 1,\n        width: 288,\n        ...sx,\n      }}\n    >\n      <BalanceRow label={leftLabel} value={leftValue} withBorder={true} />\n      <BalanceRow label={rightLabel} value={rightValue} />\n    </Stack>\n  </Stack>\n)\n\nexport default SaveEnoughToLiveOnBottomSection\n"],"mappings":";;;;;;AAUA,IAAM,IAAa;AAAA,EACjB,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB,IAAI;AAAA,EACJ,IAAI;AACN,GAQM,IAAA,CAAc,EAAE,OAAA,GAAO,OAAA,GAAO,YAAA,IAAa,GAAA,MAC/C,gBAAA,EAAC,GAAD;AAAA,EACE,IAAI;AAAA,IACF,GAAG;AAAA,IACH,GAAI,KAAc;AAAA,MAChB,cAAc;AAAA,MACd,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EAPF,UAAA,CASE,gBAAA,EAAC,GAAD;AAAA,IAAM,OAAM;AAAA,IAAiB,SAAQ;AAAA,IAClC,UAAA;AAAA,EACG,CAAA,GACN,gBAAA,EAAC,GAAD;AAAA,IAAM,MAAM;AAAA,IAAM,SAAQ;AAAA,IACvB,UAAA;AAAA,EACG,CAAA,CACD;IAYH,IAAA,CAAmC,EACvC,SAAA,GACA,WAAA,GACA,WAAA,GACA,YAAA,GACA,YAAA,GACA,IAAA,EAAA,MAEA,gBAAA,EAAC,GAAD;AAAA,EAAO,IAAI;AAAA,IAAE,YAAY;AAAA,IAAU,KAAK;AAAA,EAAG;AAAA,EAA3C,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,IAAK,IAAI;AAAA,MAAE,SAAS;AAAA,MAAQ,YAAY;AAAA,IAAS;AAAA,IAAjD,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MAAgB,UAAU,EAAE,OAAO;AAAA,QAAE,QAAQ;AAAA,QAAQ,UAAU;AAAA,MAAQ,EAAE;AAAA,MAAG,OAAO;AAAA,IAAQ,CAAA,GAC3F,gBAAA,EAAC,GAAD;AAAA,MAAI,IAAI;AAAA,QAAE,OAAO;AAAA,QAAwB,UAAU;AAAA,QAAS,WAAW;AAAA,MAAS;AAAA,MAC7E,UAAA;AAAA,IACC,CAAA,CACD;AAAA,EACL,CAAA,GAAA,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,cAAc;AAAA,MACd,OAAO;AAAA,MACP,GAAG;AAAA,IACL;AAAA,IAPF,UAAA,CASE,gBAAA,EAAC,GAAD;AAAA,MAAY,OAAO;AAAA,MAAW,OAAO;AAAA,MAAW,YAAY;AAAA,IAAO,CAAA,GACnE,gBAAA,EAAC,GAAD;AAAA,MAAY,OAAO;AAAA,MAAY,OAAO;AAAA,IAAa,CAAA,CAC9C;AAAA,EACF,CAAA,CAAA"}

package/dist/insights-v2/blocks/ComponentBlocks/GasPurchaseBlock/GasGraphic.d.ts

@@ -0,0 +1,5 @@
+declare const GasGraphic: ({ height, label }: {
+    height?: number;
+    label?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default GasGraphic;

package/dist/insights-v2/blocks/ComponentBlocks/GasPurchaseBlock/GasGraphic.es.js

@@ -0,0 +1,94 @@
+import { jsx as C, jsxs as t } from "react/jsx-runtime";
+import { useTheme as f } from "@mui/material/styles";
+var s = ({ height: e = 130, label: r }) => {
+  const { palette: h } = f(), { dark: l, light: a, lighter: d, main: i } = h.primary;
+  return /* @__PURE__ */ t("svg", {
+    "aria-label": r,
+    height: e,
+    overflow: "visible",
+    role: "img",
+    style: { flexShrink: 0 },
+    viewBox: "0 0 115 130",
+    width: e * 115 / 130,
+    children: [
+      /* @__PURE__ */ C("path", {
+        d: "M147.484 118C146.969 118 85.62 118 81.496 118.067H77.371V126.549C77.371 126.549 15.925 125.252 10.941 124.898C5.958 124.545 -0.575 125.688 0.041 130.199C1.375 139.974 113.54 134.874 129.44 132.911C142.329 131.321 138.72 127.61 118.614 124.429C117.086 124.187 117.068 122.248 127.378 122.248H142.329C166.559 122.248 166.044 118 147.484 118Z",
+        fill: d
+      }),
+      /* @__PURE__ */ C("path", {
+        d: "M79.089 11.607H75.479C74.927 11.607 74.479 12.055 74.479 12.607V39.432C74.479 39.984 74.927 40.432 75.479 40.432H85.86C86.412 40.432 86.86 39.984 86.86 39.432V33.882C86.86 33.616 86.755 33.362 86.567 33.175L80.382 26.99C80.195 26.802 80.089 26.548 80.089 26.282V12.607C80.089 12.055 79.641 11.607 79.089 11.607Z",
+        fill: l
+      }),
+      /* @__PURE__ */ C("path", {
+        d: "M11.607 6.19A6.19 6.19 0 0 1 17.797 0H68.483A6.19 6.19 0 0 1 74.673 6.19V112.202H11.607Z",
+        fill: i
+      }),
+      /* @__PURE__ */ t("g", {
+        fill: a,
+        opacity: 0.7,
+        children: [
+          /* @__PURE__ */ C("rect", {
+            height: 29,
+            rx: 3,
+            width: 44,
+            x: 21,
+            y: 9.18
+          }),
+          /* @__PURE__ */ C("rect", {
+            height: 16,
+            rx: 3,
+            width: 12.667,
+            x: 21,
+            y: 41.18
+          }),
+          /* @__PURE__ */ C("rect", {
+            height: 16,
+            rx: 3,
+            width: 12.667,
+            x: 36.667,
+            y: 41.18
+          }),
+          /* @__PURE__ */ C("rect", {
+            height: 16,
+            rx: 3,
+            width: 12.667,
+            x: 52.333,
+            y: 41.18
+          })
+        ]
+      }),
+      /* @__PURE__ */ C("path", {
+        d: "M6 118.393C6 114.974 8.772 112.202 12.19 112.202H74.089C77.508 112.202 80.28 114.974 80.28 118.393V129C80.28 129.552 79.832 130 79.28 130H7C6.448 130 6 129.552 6 129Z",
+        fill: i
+      }),
+      /* @__PURE__ */ t("g", {
+        transform: "translate(75.5 16)",
+        children: [
+          /* @__PURE__ */ C("path", {
+            d: "M26.957 51.087C26.632 51.63 25.889 51.741 25.392 51.349C24.637 50.753 23.842 50.209 23.07 49.667C22.647 49.371 22.528 48.8 22.788 48.355C26.138 42.612 29.023 36.87 29.827 31.64L34.327 30.64C33.378 40.134 30.825 44.61 26.957 51.087Z",
+            fill: l
+          }),
+          /* @__PURE__ */ C("path", {
+            d: "M0 41.681V44.645C0 45.137 0.353 45.554 0.838 45.642C18.545 48.853 41.208 66.314 32.91 87.116C29.292 96.188 23.016 94.77 20.037 91.349C12.383 82.56 17.058 67.644 22.27 58.387C22.52 57.943 22.407 57.383 22 57.078L19.742 55.385C19.264 55.026 18.592 55.153 18.31 55.679C15.715 60.525 5.008 82.422 16.201 94.77C22.714 101.955 33.24 99.787 37.094 89.741C46.722 64.644 22.593 44.833 1.158 40.708C0.551 40.591 0 41.063 0 41.681Z",
+            fill: l
+          }),
+          /* @__PURE__ */ C("path", {
+            d: "M22.962 7.383L20.294 9.155C20.13 9.264 19.91 9.233 19.784 9.082L17.736 6.639C17.702 6.598 17.66 6.565 17.613 6.541L12.107 3.788C11.573 3.522 11.39 2.851 11.714 2.351L12.755 0.743C13.029 0.319 13.577 0.166 14.031 0.387L19.82 3.199C19.943 3.258 20.052 3.342 20.141 3.445L23.041 6.808C23.193 6.984 23.156 7.254 22.962 7.383Z",
+            fill: l
+          }),
+          /* @__PURE__ */ C("path", {
+            clipRule: "evenodd",
+            d: "M23.627 8.032C23.893 7.855 24.239 7.857 24.493 8.051C26.384 9.495 29.859 12.748 31.226 14.896C33.099 17.839 33.739 22.262 34.296 26.118C34.499 27.526 34.692 28.858 34.93 30.015C35.015 30.429 34.766 30.844 34.357 30.949L29.642 32.166C29.336 32.245 29.021 32.074 28.921 31.775C28.809 31.438 28.431 31.271 28.102 31.404C25.788 32.341 22.568 33.128 20.973 31.532C19.394 29.952 20.043 19.145 20.466 12.097C20.501 11.519 20.533 10.966 20.564 10.445C20.578 10.203 20.705 9.98 20.907 9.845L23.627 8.032ZM27.938 19.345C27.336 18.503 26.229 18.464 25.342 18.609C25.04 18.658 24.95 19.034 25.167 19.25C25.682 19.762 26.277 20.443 26.39 20.893C26.536 21.479 27.041 26.041 27.314 28.605C27.337 28.828 27.546 28.984 27.768 28.943L29.159 28.691C29.347 28.656 29.482 28.492 29.475 28.302C29.364 25.552 28.681 20.385 27.938 19.345ZM24.003 20.329C23.792 19.983 23.288 20.039 23.138 20.415C23.114 20.475 23.101 20.54 23.101 20.605V28.051C23.101 28.478 23.448 28.824 23.875 28.824H24.567C25.025 28.824 25.383 28.429 25.338 27.974C25.135 25.899 24.842 22.786 24.842 22.247C24.842 21.822 24.416 21.007 24.003 20.329Z",
+            fill: i,
+            fillRule: "evenodd"
+          })
+        ]
+      })
+    ]
+  });
+};
+export {
+  s as default
+};
+
+//# sourceMappingURL=GasGraphic.es.js.map

package/dist/insights-v2/blocks/ComponentBlocks/GasPurchaseBlock/GasGraphic.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GasGraphic.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/GasPurchaseBlock/GasGraphic.tsx"],"sourcesContent":["import { useTheme } from '@mui/material/styles'\n\n// Traced from the Figma \"Graphic\" frame; the floor shadow overflows the 115x130 box on purpose.\nconst GasGraphic = ({ height = 130, label }: { height?: number; label?: string }) => {\n  const { palette } = useTheme()\n  const { dark, light, lighter, main } = palette.primary\n\n  return (\n    <svg\n      aria-label={label}\n      height={height}\n      overflow=\"visible\"\n      role=\"img\"\n      style={{ flexShrink: 0 }}\n      viewBox=\"0 0 115 130\"\n      width={(height * 115) / 130}\n    >\n      <path\n        d=\"M147.484 118C146.969 118 85.62 118 81.496 118.067H77.371V126.549C77.371 126.549 15.925 125.252 10.941 124.898C5.958 124.545 -0.575 125.688 0.041 130.199C1.375 139.974 113.54 134.874 129.44 132.911C142.329 131.321 138.72 127.61 118.614 124.429C117.086 124.187 117.068 122.248 127.378 122.248H142.329C166.559 122.248 166.044 118 147.484 118Z\"\n        fill={lighter}\n      />\n      <path\n        d=\"M79.089 11.607H75.479C74.927 11.607 74.479 12.055 74.479 12.607V39.432C74.479 39.984 74.927 40.432 75.479 40.432H85.86C86.412 40.432 86.86 39.984 86.86 39.432V33.882C86.86 33.616 86.755 33.362 86.567 33.175L80.382 26.99C80.195 26.802 80.089 26.548 80.089 26.282V12.607C80.089 12.055 79.641 11.607 79.089 11.607Z\"\n        fill={dark}\n      />\n      <path\n        d=\"M11.607 6.19A6.19 6.19 0 0 1 17.797 0H68.483A6.19 6.19 0 0 1 74.673 6.19V112.202H11.607Z\"\n        fill={main}\n      />\n      <g fill={light} opacity={0.7}>\n        <rect height={29} rx={3} width={44} x={21} y={9.18} />\n        <rect height={16} rx={3} width={12.667} x={21} y={41.18} />\n        <rect height={16} rx={3} width={12.667} x={36.667} y={41.18} />\n        <rect height={16} rx={3} width={12.667} x={52.333} y={41.18} />\n      </g>\n      <path\n        d=\"M6 118.393C6 114.974 8.772 112.202 12.19 112.202H74.089C77.508 112.202 80.28 114.974 80.28 118.393V129C80.28 129.552 79.832 130 79.28 130H7C6.448 130 6 129.552 6 129Z\"\n        fill={main}\n      />\n      <g transform=\"translate(75.5 16)\">\n        <path\n          d=\"M26.957 51.087C26.632 51.63 25.889 51.741 25.392 51.349C24.637 50.753 23.842 50.209 23.07 49.667C22.647 49.371 22.528 48.8 22.788 48.355C26.138 42.612 29.023 36.87 29.827 31.64L34.327 30.64C33.378 40.134 30.825 44.61 26.957 51.087Z\"\n          fill={dark}\n        />\n        <path\n          d=\"M0 41.681V44.645C0 45.137 0.353 45.554 0.838 45.642C18.545 48.853 41.208 66.314 32.91 87.116C29.292 96.188 23.016 94.77 20.037 91.349C12.383 82.56 17.058 67.644 22.27 58.387C22.52 57.943 22.407 57.383 22 57.078L19.742 55.385C19.264 55.026 18.592 55.153 18.31 55.679C15.715 60.525 5.008 82.422 16.201 94.77C22.714 101.955 33.24 99.787 37.094 89.741C46.722 64.644 22.593 44.833 1.158 40.708C0.551 40.591 0 41.063 0 41.681Z\"\n          fill={dark}\n        />\n        <path\n          d=\"M22.962 7.383L20.294 9.155C20.13 9.264 19.91 9.233 19.784 9.082L17.736 6.639C17.702 6.598 17.66 6.565 17.613 6.541L12.107 3.788C11.573 3.522 11.39 2.851 11.714 2.351L12.755 0.743C13.029 0.319 13.577 0.166 14.031 0.387L19.82 3.199C19.943 3.258 20.052 3.342 20.141 3.445L23.041 6.808C23.193 6.984 23.156 7.254 22.962 7.383Z\"\n          fill={dark}\n        />\n        <path\n          clipRule=\"evenodd\"\n          d=\"M23.627 8.032C23.893 7.855 24.239 7.857 24.493 8.051C26.384 9.495 29.859 12.748 31.226 14.896C33.099 17.839 33.739 22.262 34.296 26.118C34.499 27.526 34.692 28.858 34.93 30.015C35.015 30.429 34.766 30.844 34.357 30.949L29.642 32.166C29.336 32.245 29.021 32.074 28.921 31.775C28.809 31.438 28.431 31.271 28.102 31.404C25.788 32.341 22.568 33.128 20.973 31.532C19.394 29.952 20.043 19.145 20.466 12.097C20.501 11.519 20.533 10.966 20.564 10.445C20.578 10.203 20.705 9.98 20.907 9.845L23.627 8.032ZM27.938 19.345C27.336 18.503 26.229 18.464 25.342 18.609C25.04 18.658 24.95 19.034 25.167 19.25C25.682 19.762 26.277 20.443 26.39 20.893C26.536 21.479 27.041 26.041 27.314 28.605C27.337 28.828 27.546 28.984 27.768 28.943L29.159 28.691C29.347 28.656 29.482 28.492 29.475 28.302C29.364 25.552 28.681 20.385 27.938 19.345ZM24.003 20.329C23.792 19.983 23.288 20.039 23.138 20.415C23.114 20.475 23.101 20.54 23.101 20.605V28.051C23.101 28.478 23.448 28.824 23.875 28.824H24.567C25.025 28.824 25.383 28.429 25.338 27.974C25.135 25.899 24.842 22.786 24.842 22.247C24.842 21.822 24.416 21.007 24.003 20.329Z\"\n          fill={main}\n          fillRule=\"evenodd\"\n        />\n      </g>\n    </svg>\n  )\n}\n\nexport default GasGraphic\n"],"mappings":";;AAGA,IAAM,IAAA,CAAc,EAAE,QAAA,IAAS,KAAK,OAAA,EAAA,MAAiD;AACnF,QAAM,EAAE,SAAA,EAAA,IAAY,EAAS,GACvB,EAAE,MAAA,GAAM,OAAA,GAAO,SAAA,GAAS,MAAA,EAAA,IAAS,EAAQ;AAE/C,SACE,gBAAA,EAAC,OAAD;AAAA,IACE,cAAY;AAAA,IACJ,QAAA;AAAA,IACR,UAAS;AAAA,IACT,MAAK;AAAA,IACL,OAAO,EAAE,YAAY,EAAE;AAAA,IACvB,SAAQ;AAAA,IACR,OAAQ,IAAS,MAAO;AAAA,IAP1B,UAAA;AAAA,MASE,gBAAA,EAAC,QAAD;AAAA,QACE,GAAE;AAAA,QACF,MAAM;AAAA,MACP,CAAA;AAAA,MACD,gBAAA,EAAC,QAAD;AAAA,QACE,GAAE;AAAA,QACF,MAAM;AAAA,MACP,CAAA;AAAA,MACD,gBAAA,EAAC,QAAD;AAAA,QACE,GAAE;AAAA,QACF,MAAM;AAAA,MACP,CAAA;AAAA,MACD,gBAAA,EAAC,KAAD;AAAA,QAAG,MAAM;AAAA,QAAO,SAAS;AAAA,QAAzB,UAAA;AAAA,UACE,gBAAA,EAAC,QAAD;AAAA,YAAM,QAAQ;AAAA,YAAI,IAAI;AAAA,YAAG,OAAO;AAAA,YAAI,GAAG;AAAA,YAAI,GAAG;AAAA,UAAO,CAAA;AAAA,UACrD,gBAAA,EAAC,QAAD;AAAA,YAAM,QAAQ;AAAA,YAAI,IAAI;AAAA,YAAG,OAAO;AAAA,YAAQ,GAAG;AAAA,YAAI,GAAG;AAAA,UAAQ,CAAA;AAAA,UAC1D,gBAAA,EAAC,QAAD;AAAA,YAAM,QAAQ;AAAA,YAAI,IAAI;AAAA,YAAG,OAAO;AAAA,YAAQ,GAAG;AAAA,YAAQ,GAAG;AAAA,UAAQ,CAAA;AAAA,UAC9D,gBAAA,EAAC,QAAD;AAAA,YAAM,QAAQ;AAAA,YAAI,IAAI;AAAA,YAAG,OAAO;AAAA,YAAQ,GAAG;AAAA,YAAQ,GAAG;AAAA,UAAQ,CAAA;AAAA,QAC7D;AAAA;MACH,gBAAA,EAAC,QAAD;AAAA,QACE,GAAE;AAAA,QACF,MAAM;AAAA,MACP,CAAA;AAAA,MACD,gBAAA,EAAC,KAAD;AAAA,QAAG,WAAU;AAAA,QAAb,UAAA;AAAA,UACE,gBAAA,EAAC,QAAD;AAAA,YACE,GAAE;AAAA,YACF,MAAM;AAAA,UACP,CAAA;AAAA,UACD,gBAAA,EAAC,QAAD;AAAA,YACE,GAAE;AAAA,YACF,MAAM;AAAA,UACP,CAAA;AAAA,UACD,gBAAA,EAAC,QAAD;AAAA,YACE,GAAE;AAAA,YACF,MAAM;AAAA,UACP,CAAA;AAAA,UACD,gBAAA,EAAC,QAAD;AAAA,YACE,UAAS;AAAA,YACT,GAAE;AAAA,YACF,MAAM;AAAA,YACN,UAAS;AAAA,UACV,CAAA;AAAA,QACA;AAAA;IACA;AAAA;AAET"}

package/dist/insights-v2/blocks/ComponentBlocks/GasPurchaseBlock/GasPurchaseBlock.d.ts

@@ -0,0 +1,3 @@
+import { BlockProps } from '../../types';
+declare const GasPurchaseBlock: ({ payload }: BlockProps) => import("react/jsx-runtime").JSX.Element | null;
+export default GasPurchaseBlock;

package/dist/insights-v2/blocks/ComponentBlocks/GasPurchaseBlock/GasPurchaseBlock.es.js

@@ -0,0 +1,67 @@
+import { buildPluralCopy as u } from "../../../../core/utils/Localization.es.js";
+import { useGlobalCopyStore as f } from "../../../../common/context/hooks.es.js";
+import { slot as g } from "../../../../core/types/Insights.es.js";
+import { formatCurrency as h } from "../../../../core/utils/NumberFormatting.es.js";
+import x from "./GasGraphic.es.js";
+import o from "@mui/material/Stack";
+import { Text as a } from "@mxenabled/mxui";
+import { jsx as t, jsxs as p } from "react/jsx-runtime";
+var b = "_1{count} Fill-ups", v = "_1{count} Fill-up", y = "spent on gas", m = (r) => typeof r == "number" && Number.isFinite(r), T = ({ payload: r }) => {
+  const i = f().insights_feed?.general, { instance_slot: l = {}, widget_type: d } = r, n = d === "mini", e = (c) => g(l.data, c) ?? l[c], s = e("total_fill_up_visits"), _ = e("total_spend") ?? e("total_debt_for_fill_up_visits_in_prev_month");
+  return !m(s) || !m(_) ? null : /* @__PURE__ */ p(o, {
+    direction: "row",
+    sx: {
+      alignItems: "center",
+      gap: n ? 12 : 16,
+      px: 16,
+      py: n ? 12 : 16,
+      width: "100%"
+    },
+    children: [/* @__PURE__ */ t(x, {
+      height: n ? 94 : 130,
+      label: i?.gas_pump
+    }), /* @__PURE__ */ p(o, {
+      sx: {
+        flex: 1,
+        justifyContent: "center",
+        minWidth: 0,
+        pb: 12
+      },
+      children: [/* @__PURE__ */ t(o, {
+        sx: {
+          bgcolor: "primary.lighter",
+          borderRadius: "4px 4px 0 0",
+          px: 10,
+          py: 4
+        },
+        children: /* @__PURE__ */ t(a, {
+          color: "primary.dark",
+          sx: { fontWeight: 700 },
+          variant: "caption",
+          children: u(i?.gas_fill_ups_count_one ?? v, i?.gas_fill_ups_count ?? b, s, String(s))
+        })
+      }), /* @__PURE__ */ p(o, {
+        sx: {
+          bgcolor: "background.default",
+          borderRadius: "0 0 4px 4px",
+          gap: 2,
+          p: 8
+        },
+        children: [/* @__PURE__ */ t(a, {
+          component: "span",
+          variant: "h3",
+          children: h(_, "0,0")
+        }), /* @__PURE__ */ t(a, {
+          color: "text.secondary",
+          variant: "caption",
+          children: i?.gas_spent_on_gas ?? y
+        })]
+      })]
+    })]
+  });
+};
+export {
+  T as default
+};
+
+//# sourceMappingURL=GasPurchaseBlock.es.js.map

package/dist/insights-v2/blocks/ComponentBlocks/GasPurchaseBlock/GasPurchaseBlock.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GasPurchaseBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/GasPurchaseBlock/GasPurchaseBlock.tsx"],"sourcesContent":["import Stack from '@mui/material/Stack'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { buildPluralCopy, useGlobalCopyStore } from '../../../../common'\nimport { slot, type InstanceSlot } from '../../../../core'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\nimport type { BlockProps } from '../../types'\n\nimport GasGraphic from './GasGraphic'\n\nconst DEFAULT_FILL_UPS = '_1{count} Fill-ups'\nconst DEFAULT_FILL_UPS_ONE = '_1{count} Fill-up'\nconst DEFAULT_SPENT_ON_GAS = 'spent on gas'\n\ntype GasPurchaseSlot = Pick<\n  InstanceSlot,\n  'total_fill_up_visits' | 'total_spend' | 'total_debt_for_fill_up_visits_in_prev_month'\n>\n\nconst isFiniteNumber = (value: unknown): value is number =>\n  typeof value === 'number' && Number.isFinite(value)\n\nconst GasPurchaseBlock = ({ payload }: BlockProps) => {\n  const generalCopy = useGlobalCopyStore().insights_feed?.general\n\n  const { instance_slot = {}, widget_type } = payload\n  const isMini = widget_type === 'mini'\n  const field = <K extends keyof GasPurchaseSlot>(key: K) =>\n    slot<InstanceSlot[K]>(instance_slot.data, key) ?? instance_slot[key]\n\n  const visits = field('total_fill_up_visits')\n  const spend = field('total_spend') ?? field('total_debt_for_fill_up_visits_in_prev_month')\n\n  if (!isFiniteNumber(visits) || !isFiniteNumber(spend)) return null\n\n  return (\n    <Stack\n      direction=\"row\"\n      sx={{\n        alignItems: 'center',\n        gap: isMini ? 12 : 16,\n        px: 16,\n        py: isMini ? 12 : 16,\n        width: '100%',\n      }}\n    >\n      <GasGraphic height={isMini ? 94 : 130} label={generalCopy?.gas_pump} />\n      <Stack sx={{ flex: 1, justifyContent: 'center', minWidth: 0, pb: 12 }}>\n        <Stack sx={{ bgcolor: 'primary.lighter', borderRadius: '4px 4px 0 0', px: 10, py: 4 }}>\n          <Text color=\"primary.dark\" sx={{ fontWeight: 700 }} variant=\"caption\">\n            {\n              buildPluralCopy(\n                generalCopy?.gas_fill_ups_count_one ?? DEFAULT_FILL_UPS_ONE,\n                generalCopy?.gas_fill_ups_count ?? DEFAULT_FILL_UPS,\n                visits,\n                String(visits),\n              ) as string\n            }\n          </Text>\n        </Stack>\n        <Stack sx={{ bgcolor: 'background.default', borderRadius: '0 0 4px 4px', gap: 2, p: 8 }}>\n          <Text component=\"span\" variant=\"h3\">\n            {formatCurrency(spend, '0,0')}\n          </Text>\n          <Text color=\"text.secondary\" variant=\"caption\">\n            {generalCopy?.gas_spent_on_gas ?? DEFAULT_SPENT_ON_GAS}\n          </Text>\n        </Stack>\n      </Stack>\n    </Stack>\n  )\n}\n\nexport default GasPurchaseBlock\n"],"mappings":";;;;;;;;AAWA,IAAM,IAAmB,sBACnB,IAAuB,qBACvB,IAAuB,gBAOvB,IAAA,CAAkB,MACtB,OAAO,KAAU,YAAY,OAAO,SAAS,CAAK,GAE9C,IAAA,CAAoB,EAAE,SAAA,EAAA,MAA0B;AACpD,QAAM,IAAc,EAAmB,EAAE,eAAe,SAElD,EAAE,eAAA,IAAgB,CAAC,GAAG,aAAA,EAAA,IAAgB,GACtC,IAAS,MAAgB,QACzB,IAAA,CAA0C,MAC9C,EAAsB,EAAc,MAAM,CAAG,KAAK,EAAc,CAAA,GAE5D,IAAS,EAAM,sBAAsB,GACrC,IAAQ,EAAM,aAAa,KAAK,EAAM,6CAA6C;AAEzF,SAAI,CAAC,EAAe,CAAM,KAAK,CAAC,EAAe,CAAK,IAAU,OAG5D,gBAAA,EAAC,GAAD;AAAA,IACE,WAAU;AAAA,IACV,IAAI;AAAA,MACF,YAAY;AAAA,MACZ,KAAK,IAAS,KAAK;AAAA,MACnB,IAAI;AAAA,MACJ,IAAI,IAAS,KAAK;AAAA,MAClB,OAAO;AAAA,IACT;AAAA,IARF,UAAA,CAUE,gBAAA,EAAC,GAAD;AAAA,MAAY,QAAQ,IAAS,KAAK;AAAA,MAAK,OAAO,GAAa;AAAA,IAAW,CAAA,GACtE,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,MAAM;AAAA,QAAG,gBAAgB;AAAA,QAAU,UAAU;AAAA,QAAG,IAAI;AAAA,MAAG;AAAA,MAApE,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,QAAO,IAAI;AAAA,UAAE,SAAS;AAAA,UAAmB,cAAc;AAAA,UAAe,IAAI;AAAA,UAAI,IAAI;AAAA,QAAE;AAAA,QAClF,UAAA,gBAAA,EAAC,GAAD;AAAA,UAAM,OAAM;AAAA,UAAe,IAAI,EAAE,YAAY,IAAI;AAAA,UAAG,SAAQ;AAAA,UAExD,UAAA,EACE,GAAa,0BAA0B,GACvC,GAAa,sBAAsB,GACnC,GACA,OAAO,CAAM,CACf;AAAA,QAEE,CAAA;AAAA,MACD,CAAA,GACP,gBAAA,EAAC,GAAD;AAAA,QAAO,IAAI;AAAA,UAAE,SAAS;AAAA,UAAsB,cAAc;AAAA,UAAe,KAAK;AAAA,UAAG,GAAG;AAAA,QAAE;AAAA,QAAtF,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,UAAM,WAAU;AAAA,UAAO,SAAQ;AAAA,UAC5B,UAAA,EAAe,GAAO,KAAK;AAAA,QACxB,CAAA,GACN,gBAAA,EAAC,GAAD;AAAA,UAAM,OAAM;AAAA,UAAiB,SAAQ;AAAA,UAClC,UAAA,GAAa,oBAAoB;AAAA,QAC9B,CAAA,CACD;AAAA,MACF,CAAA,CAAA;AAAA,IACF,CAAA,CAAA;AAAA;AAEX"}

package/dist/insights-v2/blocks/ComponentBlocks/GasPurchaseBlock/index.d.ts

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

package/dist/insights-v2/blocks/ComponentBlocks/SavingsSummaryBlock/SavingsSummaryBlock.d.ts

@@ -0,0 +1,3 @@
+import { BlockProps } from '../../types';
+declare const SavingsSummaryBlock: ({ payload }: BlockProps) => import("react/jsx-runtime").JSX.Element | null;
+export default SavingsSummaryBlock;

package/dist/insights-v2/blocks/ComponentBlocks/SavingsSummaryBlock/SavingsSummaryBlock.es.js

@@ -0,0 +1,99 @@
+import { useGlobalCopyStore as v } from "../../../../common/context/hooks.es.js";
+import { slot as y } from "../../../../core/types/Insights.es.js";
+import { formatCurrency as _ } from "../../../../core/utils/NumberFormatting.es.js";
+import { ThemedSVGImage as f } from "../../../components/chartblocks/ThemedSVGImage.es.js";
+import { ReactComponent as w } from "../../../components/shared/images/SaveEnoughToLiveOnBottom.es.js";
+import { ReactComponent as C } from "../../../components/shared/images/SaveEnoughToLiveOnTop.es.js";
+import i from "@mui/material/Stack";
+import { H2 as R, Text as h } from "@mxenabled/mxui";
+import { jsx as t, jsxs as o } from "react/jsx-runtime";
+import I from "@mui/material/Box";
+var g = (e) => typeof e == "number" && Number.isFinite(e), u = ({ label: e, amount: r }) => /* @__PURE__ */ o(i, {
+  direction: "row",
+  sx: {
+    alignItems: "center",
+    gap: 16,
+    justifyContent: "space-between",
+    minHeight: 40,
+    px: 16
+  },
+  children: [/* @__PURE__ */ t(h, {
+    color: "text.secondary",
+    component: "dt",
+    variant: "caption",
+    children: e
+  }), /* @__PURE__ */ t(h, {
+    bold: !0,
+    color: "text.primary",
+    component: "dd",
+    sx: { m: 0 },
+    variant: "body2",
+    children: _(r, "0,0")
+  })]
+}), L = ({ payload: e }) => {
+  const r = e.widget_type === "mini", d = v().insights_feed?.make_transfer, m = d?.available_balances_text, s = d?.average_monthly_spend_text, { instance_slot: l = {} } = e, n = (b) => y(l.data, b) ?? l[b], c = n("available_balance"), p = n("avg_monthly_spend"), a = n("time_period"), x = typeof a == "string" && a !== "";
+  return !m || !s || !g(c) || !g(p) ? null : /* @__PURE__ */ o(i, {
+    sx: {
+      alignItems: "center",
+      gap: r ? 12 : 24,
+      px: 16,
+      width: "100%"
+    },
+    children: [(!r || x) && /* @__PURE__ */ o(i, {
+      sx: { alignItems: "center" },
+      children: [!r && /* @__PURE__ */ t(f, {
+        divProps: { style: {
+          maxWidth: "100%",
+          width: 264
+        } },
+        image: C
+      }), x && /* @__PURE__ */ o(I, {
+        sx: {
+          display: "grid",
+          mt: r ? 0 : -60,
+          placeItems: "center"
+        },
+        children: [/* @__PURE__ */ t(f, {
+          divProps: { style: {
+            gridArea: "1 / 1",
+            maxWidth: "none",
+            width: 262
+          } },
+          image: w
+        }), /* @__PURE__ */ t(R, {
+          sx: {
+            color: "neutral.contrastText",
+            gridArea: "1 / 1",
+            textAlign: "center"
+          },
+          children: a
+        })]
+      })]
+    }), /* @__PURE__ */ o(i, {
+      component: "dl",
+      sx: {
+        "& > div + div": {
+          borderTop: 1,
+          borderColor: "divider"
+        },
+        border: 1,
+        borderColor: "divider",
+        borderRadius: "4px",
+        m: 0,
+        width: "100%"
+      },
+      children: [/* @__PURE__ */ t(u, {
+        amount: c,
+        label: m
+      }), /* @__PURE__ */ t(u, {
+        amount: p,
+        label: s
+      })]
+    })]
+  });
+};
+export {
+  L as default
+};
+
+//# sourceMappingURL=SavingsSummaryBlock.es.js.map

package/dist/insights-v2/blocks/ComponentBlocks/SavingsSummaryBlock/SavingsSummaryBlock.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SavingsSummaryBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/SavingsSummaryBlock/SavingsSummaryBlock.tsx"],"sourcesContent":["import Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\n\nimport { H2, Text } from '@mxenabled/mxui'\n\nimport { useGlobalCopyStore } from '../../../../common'\nimport { slot, type InstanceSlot } from '../../../../core'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\nimport { ThemedSVGImage } from '../../../components/chartblocks/ThemedSVGImage'\nimport { ReactComponent as BrushStroke } from '../../../components/shared/images/SaveEnoughToLiveOnBottom.svg'\nimport { ReactComponent as CalendarGraphic } from '../../../components/shared/images/SaveEnoughToLiveOnTop.svg'\nimport type { BlockProps } from '../../types'\n\ntype SavingsSummarySlot = Pick<\n  InstanceSlot,\n  'available_balance' | 'avg_monthly_spend' | 'time_period'\n>\n\nconst isFiniteNumber = (value: unknown): value is number =>\n  typeof value === 'number' && Number.isFinite(value)\n\nconst Row = ({ label, amount }: { label: string; amount: number }) => (\n  <Stack\n    direction=\"row\"\n    sx={{ alignItems: 'center', gap: 16, justifyContent: 'space-between', minHeight: 40, px: 16 }}\n  >\n    <Text color=\"text.secondary\" component=\"dt\" variant=\"caption\">\n      {label}\n    </Text>\n    <Text bold={true} color=\"text.primary\" component=\"dd\" sx={{ m: 0 }} variant=\"body2\">\n      {formatCurrency(amount, '0,0')}\n    </Text>\n  </Stack>\n)\n\nconst SavingsSummaryBlock = ({ payload }: BlockProps) => {\n  const hideCalendar = payload.widget_type === 'mini'\n  const copy = useGlobalCopyStore().insights_feed?.make_transfer\n  const balanceLabel = copy?.available_balances_text\n  const spendLabel = copy?.average_monthly_spend_text\n\n  const { instance_slot = {} } = payload\n  const field = <K extends keyof SavingsSummarySlot>(key: K) =>\n    slot<InstanceSlot[K]>(instance_slot.data, key) ?? instance_slot[key]\n\n  const balance = field('available_balance')\n  const spend = field('avg_monthly_spend')\n  const timePeriod = field('time_period')\n  const hasTimePeriod = typeof timePeriod === 'string' && timePeriod !== ''\n\n  // Both figures need a label and a real number; never show a made-up $0.\n  if (!balanceLabel || !spendLabel || !isFiniteNumber(balance) || !isFiniteNumber(spend)) {\n    return null\n  }\n\n  return (\n    <Stack sx={{ alignItems: 'center', gap: hideCalendar ? 12 : 24, px: 16, width: '100%' }}>\n      {(!hideCalendar || hasTimePeriod) && (\n        <Stack sx={{ alignItems: 'center' }}>\n          {!hideCalendar && (\n            <ThemedSVGImage\n              divProps={{ style: { maxWidth: '100%', width: 264 } }}\n              image={CalendarGraphic}\n            />\n          )}\n          {hasTimePeriod && (\n            <Box sx={{ display: 'grid', mt: hideCalendar ? 0 : -60, placeItems: 'center' }}>\n              <ThemedSVGImage\n                divProps={{ style: { gridArea: '1 / 1', maxWidth: 'none', width: 262 } }}\n                image={BrushStroke}\n              />\n              <H2 sx={{ color: 'neutral.contrastText', gridArea: '1 / 1', textAlign: 'center' }}>\n                {timePeriod}\n              </H2>\n            </Box>\n          )}\n        </Stack>\n      )}\n      <Stack\n        component=\"dl\"\n        sx={{\n          '& > div + div': { borderTop: 1, borderColor: 'divider' },\n          border: 1,\n          borderColor: 'divider',\n          borderRadius: '4px',\n          m: 0,\n          width: '100%',\n        }}\n      >\n        <Row amount={balance} label={balanceLabel} />\n        <Row amount={spend} label={spendLabel} />\n      </Stack>\n    </Stack>\n  )\n}\n\nexport default SavingsSummaryBlock\n"],"mappings":";;;;;;;;;;AAkBA,IAAM,IAAA,CAAkB,MACtB,OAAO,KAAU,YAAY,OAAO,SAAS,CAAK,GAE9C,IAAA,CAAO,EAAE,OAAA,GAAO,QAAA,EAAA,MACpB,gBAAA,EAAC,GAAD;AAAA,EACE,WAAU;AAAA,EACV,IAAI;AAAA,IAAE,YAAY;AAAA,IAAU,KAAK;AAAA,IAAI,gBAAgB;AAAA,IAAiB,WAAW;AAAA,IAAI,IAAI;AAAA,EAAG;AAAA,EAF9F,UAAA,CAIE,gBAAA,EAAC,GAAD;AAAA,IAAM,OAAM;AAAA,IAAiB,WAAU;AAAA,IAAK,SAAQ;AAAA,IACjD,UAAA;AAAA,EACG,CAAA,GACN,gBAAA,EAAC,GAAD;AAAA,IAAM,MAAM;AAAA,IAAM,OAAM;AAAA,IAAe,WAAU;AAAA,IAAK,IAAI,EAAE,GAAG,EAAE;AAAA,IAAG,SAAQ;AAAA,IACzE,UAAA,EAAe,GAAQ,KAAK;AAAA,EACzB,CAAA,CACD;IAGH,IAAA,CAAuB,EAAE,SAAA,EAAA,MAA0B;AACvD,QAAM,IAAe,EAAQ,gBAAgB,QACvC,IAAO,EAAmB,EAAE,eAAe,eAC3C,IAAe,GAAM,yBACrB,IAAa,GAAM,4BAEnB,EAAE,eAAA,IAAgB,CAAC,EAAA,IAAM,GACzB,IAAA,CAA6C,MACjD,EAAsB,EAAc,MAAM,CAAG,KAAK,EAAc,CAAA,GAE5D,IAAU,EAAM,mBAAmB,GACnC,IAAQ,EAAM,mBAAmB,GACjC,IAAa,EAAM,aAAa,GAChC,IAAgB,OAAO,KAAe,YAAY,MAAe;AAGvE,SAAI,CAAC,KAAgB,CAAC,KAAc,CAAC,EAAe,CAAO,KAAK,CAAC,EAAe,CAAK,IAC5E,OAIP,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI;AAAA,MAAE,YAAY;AAAA,MAAU,KAAK,IAAe,KAAK;AAAA,MAAI,IAAI;AAAA,MAAI,OAAO;AAAA,IAAO;AAAA,IAAtF,UAAA,EACI,CAAC,KAAgB,MACjB,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI,EAAE,YAAY,SAAS;AAAA,MAAlC,UAAA,CACG,CAAC,KACA,gBAAA,EAAC,GAAD;AAAA,QACE,UAAU,EAAE,OAAO;AAAA,UAAE,UAAU;AAAA,UAAQ,OAAO;AAAA,QAAI,EAAE;AAAA,QACpD,OAAO;AAAA,MACR,CAAA,GAEF,KACC,gBAAA,EAAC,GAAD;AAAA,QAAK,IAAI;AAAA,UAAE,SAAS;AAAA,UAAQ,IAAI,IAAe,IAAI;AAAA,UAAK,YAAY;AAAA,QAAS;AAAA,QAA7E,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,UACE,UAAU,EAAE,OAAO;AAAA,YAAE,UAAU;AAAA,YAAS,UAAU;AAAA,YAAQ,OAAO;AAAA,UAAI,EAAE;AAAA,UACvE,OAAO;AAAA,QACR,CAAA,GACD,gBAAA,EAAC,GAAD;AAAA,UAAI,IAAI;AAAA,YAAE,OAAO;AAAA,YAAwB,UAAU;AAAA,YAAS,WAAW;AAAA,UAAS;AAAA,UAC7E,UAAA;AAAA,QACC,CAAA,CACD;AAAA,MAEF,CAAA,CAAA;AAAA,IAET,CAAA,GAAA,gBAAA,EAAC,GAAD;AAAA,MACE,WAAU;AAAA,MACV,IAAI;AAAA,QACF,iBAAiB;AAAA,UAAE,WAAW;AAAA,UAAG,aAAa;AAAA,QAAU;AAAA,QACxD,QAAQ;AAAA,QACR,aAAa;AAAA,QACb,cAAc;AAAA,QACd,GAAG;AAAA,QACH,OAAO;AAAA,MACT;AAAA,MATF,UAAA,CAWE,gBAAA,EAAC,GAAD;AAAA,QAAK,QAAQ;AAAA,QAAS,OAAO;AAAA,MAAe,CAAA,GAC5C,gBAAA,EAAC,GAAD;AAAA,QAAK,QAAQ;AAAA,QAAO,OAAO;AAAA,MAAa,CAAA,CACnC;AAAA,IACF,CAAA,CAAA;AAAA;AAEX"}

package/dist/insights-v2/blocks/ComponentBlocks/SavingsSummaryBlock/index.d.ts

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

package/dist/insights-v2/blocks/ComponentBlocks/index.d.ts

@@ -3,12 +3,14 @@ export * from './AccountSwitchBlock';
 export * from './BudgetBlock';
 export * from './DebtsBlock';
 export * from './DetailedAccountBlock';
+export * from './GasPurchaseBlock';
 export * from './GoalsBlock';
 export * from './MerchantBlock';
 export * from './NoSpendDaysBlock';
 export * from './RepeatingTransactionBlock';
 export * from './SaveExtraBlock';
 export * from './SavingsOpportunityBlock';
+export * from './SavingsSummaryBlock';
 export * from './TransactionBlock';
 export * from './UpcomingSubscriptionBlock';
 export * from './WithdrawalBlock';