Merge branch 'dev-987-asset-usage-limit-offset-pagination' into anji/dev-1013-mirgrate-to-universal-table

Author: duvld

jsapp/js/account/plans/confirmChangeModal.component.tsx

@@ -17,7 +17,6 @@ import styles from './confirmChangeModal.module.scss'
 export interface ConfirmChangeProps {
   newPrice: Price | null
   products: Product[] | null
-  quantity?: number
   currentSubscription: SubscriptionInfo | null
 }
 
@@ -37,11 +36,10 @@ const ConfirmChangeModal = ({
   currentSubscription,
   onRequestClose,
   setIsBusy,
-  quantity = 1,
 }: ConfirmChangeModalProps) => {
   const [isLoading, setIsLoading] = useState(false)
   const [pendingChange, setPendingChange] = useState(false)
-  const displayPrice = useDisplayPrice(newPrice, quantity)
+  const displayPrice = useDisplayPrice(newPrice)
 
   const shouldShow = useMemo(() => !!(currentSubscription && newPrice), [newPrice, currentSubscription])
 
@@ -106,7 +104,7 @@ const ConfirmChangeModal = ({
     }
     setIsLoading(true)
     setPendingChange(true)
-    changeSubscription(newPrice.id, currentSubscription.id, quantity)
+    changeSubscription(newPrice.id, currentSubscription.id)
       .then((data) => {
         processChangePlanResponse(data)
         setPendingChange(false)

jsapp/js/account/plans/plan.component.tsx

@@ -99,7 +99,6 @@ export default function Plan(props: PlanProps) {
     newPrice: null,
     products: [],
     currentSubscription: null,
-    quantity: 1,
   })
   const [visiblePlanTypes, setVisiblePlanTypes] = useState(['default'])
 
@@ -299,7 +298,7 @@ export default function Plan(props: PlanProps) {
   const getSubscribedProduct = useCallback(getSubscriptionsForProductId, [])
 
   const isSubscribedProduct = useCallback(
-    (product: SinglePricedProduct, quantity: number | undefined) => {
+    (product: SinglePricedProduct) => {
       if (!product.price?.unit_amount && !hasActiveSubscription) {
         return true
       }
@@ -309,10 +308,7 @@ export default function Plan(props: PlanProps) {
       if (subscriptions && subscriptions.length > 0) {
         return subscriptions.some(
           (subscription: SubscriptionInfo) =>
-            subscription.items[0].price.id === product.price.id &&
-            hasManageableStatus(subscription) &&
-            quantity !== undefined &&
-            quantity === subscription.quantity,
+            subscription.items[0].price.id === product.price.id && hasManageableStatus(subscription),
         )
       }
       return false
@@ -326,31 +322,30 @@ export default function Plan(props: PlanProps) {
     })
   }
 
-  const buySubscription = (price: Price, quantity = 1) => {
+  const buySubscription = (price: Price) => {
     if (!price.id) return
     if (isDisabled) return
 
     setIsBusy(true)
     if (activeSubscriptions.length) {
-      if (isDowngrade(activeSubscriptions, price, quantity)) {
+      if (isDowngrade(activeSubscriptions, price)) {
         // if the user is downgrading prices, open a confirmation dialog and downgrade from kpi
         // this will downgrade the subscription at the end of the current billing period
         setConfirmModal({
           products: products.products,
           newPrice: price,
           currentSubscription: activeSubscriptions[0],
-          quantity: quantity,
         })
       } else {
         // if the user is upgrading prices, send them to the customer portal
         // this will immediately change their subscription
-        postCustomerPortal(organization.id, price.id, quantity)
+        postCustomerPortal(organization.id, price.id)
           .then(processCheckoutResponse)
           .catch(() => setIsBusy(false))
       }
     } else {
       // just send the user to the checkout page
-      postCheckout(price.id, organization.id, quantity)
+      postCheckout(price.id, organization.id)
         .then(processCheckoutResponse)
         .catch(() => setIsBusy(false))
     }

jsapp/js/account/plans/planButton.component.tsx

@@ -5,13 +5,12 @@ import { processCheckoutResponse } from '#/account/stripe.utils'
 import { useOrganizationAssumed } from '#/api/useOrganizationAssumed'
 
 interface PlanButtonProps {
-  buySubscription: (price: Price, quantity?: number) => void
+  buySubscription: (price: Price) => void
   downgrading: boolean
   isBusy: boolean
   isSubscribedToPlan: boolean
   showManage: boolean
   product: SinglePricedProduct
-  quantity: number
   setIsBusy: (value: boolean) => void
 }
 
@@ -26,7 +25,6 @@ export const PlanButton = ({
   setIsBusy,
   buySubscription,
   showManage,
-  quantity,
   isSubscribedToPlan,
 }: PlanButtonProps) => {
   const [organization] = useOrganizationAssumed()
@@ -37,7 +35,7 @@ export const PlanButton = ({
 
   const manageSubscription = (subscriptionPrice?: Price) => {
     setIsBusy(true)
-    postCustomerPortal(organization.id, subscriptionPrice?.id, quantity)
+    postCustomerPortal(organization.id, subscriptionPrice?.id)
       .then(processCheckoutResponse)
       .catch(() => setIsBusy(false))
   }
@@ -46,7 +44,7 @@ export const PlanButton = ({
     return (
       <BillingButton
         label={t('Upgrade')}
-        onClick={() => buySubscription(product.price, quantity)}
+        onClick={() => buySubscription(product.price)}
         aria-label={`upgrade to ${product.name}`}
         isDisabled={isBusy}
       />
@@ -67,7 +65,7 @@ export const PlanButton = ({
   return (
     <BillingButton
       label={t('Change plan')}
-      onClick={() => buySubscription(product.price, quantity)}
+      onClick={() => buySubscription(product.price)}
       aria-label={`change your subscription to ${product.name}`}
       isDisabled={isBusy}
     />

jsapp/js/account/plans/planContainer.component.tsx

@@ -1,32 +1,26 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import React, { useCallback, useMemo } from 'react'
 
 import classnames from 'classnames'
 import type { FreeTierOverride, PlanState } from '#/account/plans/plan.component'
 import styles from '#/account/plans/plan.module.scss'
 import { PlanButton } from '#/account/plans/planButton.component'
 import { useDisplayPrice } from '#/account/plans/useDisplayPrice.hook'
 import type { Price, SinglePricedProduct, SubscriptionInfo } from '#/account/stripe.types'
-import {
-  getAdjustedQuantityForPrice,
-  getSubscriptionsForProductId,
-  isChangeScheduled,
-  isDowngrade,
-} from '#/account/stripe.utils'
+import { getSubscriptionsForProductId, isChangeScheduled, isDowngrade } from '#/account/stripe.utils'
 import Icon from '#/components/common/icon'
-import KoboSelect, { type KoboSelectOption } from '#/components/common/koboSelect'
 import { recordKeys } from '#/utils'
 
 interface PlanContainerProps {
   product: SinglePricedProduct
   isDisabled: boolean
-  isSubscribedProduct: (product: SinglePricedProduct, quantity: number) => boolean
+  isSubscribedProduct: (product: SinglePricedProduct) => boolean
   freeTierOverride: FreeTierOverride | null
   expandComparison: boolean
   state: PlanState
   filteredPriceProducts: SinglePricedProduct[]
   setIsBusy: (isBusy: boolean) => void
   hasManageableStatus: (sub: SubscriptionInfo) => boolean
-  buySubscription: (price: Price, quantity?: number) => void
+  buySubscription: (price: Price) => void
   activeSubscriptions: SubscriptionInfo[]
 }
 
@@ -43,9 +37,8 @@ export const PlanContainer = ({
   buySubscription,
   activeSubscriptions,
 }: PlanContainerProps) => {
-  const [submissionQuantity, setSubmissionQuantity] = useState(1)
-  // display price for the plan/price/quantity we're currently displaying
-  const displayPrice = useDisplayPrice(product.price, submissionQuantity)
+  // display price for the plan/price we're currently displaying
+  const displayPrice = useDisplayPrice(product.price)
   const shouldShowManage = useCallback(
     (product: SinglePricedProduct) => {
       const subscriptions = getSubscriptionsForProductId(product.id, state.subscribedProduct)
@@ -65,34 +58,7 @@ export const PlanContainer = ({
     [hasManageableStatus, state.subscribedProduct],
   )
 
-  const isDowngrading = useMemo(
-    () => isDowngrade(activeSubscriptions, product.price, submissionQuantity),
-    [activeSubscriptions, product, submissionQuantity],
-  )
-
-  // The adjusted quantity is the number we multiply the price by to get the total price
-  const adjustedQuantity = useMemo(
-    () => getAdjustedQuantityForPrice(submissionQuantity, product.price.transform_quantity),
-    [product, submissionQuantity],
-  )
-
-  // Populate submission dropdown with the submission quantity from the customer's plan
-  // Default to this price's base submission quantity, if applicable
-  useEffect(() => {
-    const subscribedQuantity = activeSubscriptions.length && activeSubscriptions?.[0].items[0].quantity
-    if (subscribedQuantity && isSubscribedProduct(product, subscribedQuantity)) {
-      setSubmissionQuantity(subscribedQuantity)
-    } else if (
-      // if there's no active subscription, check if this price has a default quantity
-      product.price.transform_quantity &&
-      Boolean(Number(product.metadata?.submission_limit) || Number(product.price.metadata?.submission_limit))
-    ) {
-      // prioritize the submission limit from the price over the submission limit from the product
-      setSubmissionQuantity(
-        Number.parseInt(product.price.metadata.submission_limit) || Number.parseInt(product.metadata.submission_limit),
-      )
-    }
-  }, [isSubscribedProduct, activeSubscriptions, product])
+  const isDowngrading = useMemo(() => isDowngrade(activeSubscriptions, product.price), [activeSubscriptions, product])
 
   const getFeatureMetadata = (product: SinglePricedProduct, featureItem: string) => {
     if (product.price.unit_amount === 0 && freeTierOverride && freeTierOverride.hasOwnProperty(featureItem)) {
@@ -171,57 +137,12 @@ export const PlanContainer = ({
     return renderFeaturesList(items, featureTitle)
   }
 
-  const submissionOptions = useMemo((): KoboSelectOption[] => {
-    const options = []
-    const submissionsPerUnit = product.price.metadata?.submission_limit || product.metadata?.submission_limit
-    const maxPlanQuantity = Number.parseInt(product.price.metadata?.max_purchase_quantity || '1')
-    if (submissionsPerUnit) {
-      for (let i = 1; i <= maxPlanQuantity; i++) {
-        const submissionCount = Number.parseInt(submissionsPerUnit) * i
-        options.push({
-          label: '##submissions## submissions /month'.replace('##submissions##', submissionCount.toLocaleString()),
-          value: submissionCount.toString(),
-        })
-      }
-    }
-    return options
-  }, [product])
-
-  const onSubmissionsChange = (value: string | null) => {
-    if (value === null) {
-      return
-    }
-    const submissions = Number.parseInt(value)
-    if (submissions) {
-      setSubmissionQuantity(submissions)
-    }
-  }
-
-  const asrMinutes = useMemo(
-    () =>
-      (adjustedQuantity *
-        (Number.parseInt(product.metadata?.asr_seconds_limit || '0') ||
-          Number.parseInt(product.price.metadata?.asr_seconds_limit || '0'))) /
-      60,
-    [adjustedQuantity, product],
-  )
-
-  const mtCharacters = useMemo(
-    () =>
-      adjustedQuantity *
-      (Number.parseInt(product.metadata?.mt_characters_limit || '0') ||
-        Number.parseInt(product.price.metadata?.mt_characters_limit || '0')),
-    [adjustedQuantity, product],
-  )
-
   return (
     <>
-      {isSubscribedProduct(product, submissionQuantity) ? (
-        <div className={styles.currentPlan}>{t('Your plan')}</div>
-      ) : null}
+      {isSubscribedProduct(product) ? <div className={styles.currentPlan}>{t('Your plan')}</div> : null}
       <div
         className={classnames({
-          [styles.planContainerWithBadge]: isSubscribedProduct(product, submissionQuantity),
+          [styles.planContainerWithBadge]: isSubscribedProduct(product),
           [styles.planContainer]: true,
         })}
       >
@@ -231,37 +152,6 @@ export const PlanContainer = ({
           </h1>
           <div className={styles.priceTitle}>{displayPrice}</div>
           <ul className={styles.featureContainer}>
-            {product.price.transform_quantity && (
-              <>
-                <li className={styles.selectableFeature}>
-                  <Icon name='check' size='m' color='teal' />
-                  <KoboSelect
-                    name={t('Total Submissions per Month')}
-                    options={submissionOptions}
-                    size={'s'}
-                    type={'outline'}
-                    onChange={onSubmissionsChange}
-                    selectedOption={submissionQuantity.toString()}
-                  />
-                </li>
-                <li>
-                  <div className={styles.iconContainer}>
-                    <Icon name='check' size='m' color={product.price.unit_amount ? 'teal' : 'storm'} />
-                  </div>
-                  {t('##asr_minutes## minutes of automated transcription /##plan_interval##')
-                    .replace('##asr_minutes##', asrMinutes.toLocaleString())
-                    .replace('##plan_interval##', product.price.recurring!.interval)}
-                </li>
-                <li>
-                  <div className={styles.iconContainer}>
-                    <Icon name='check' size='m' color={product.price.unit_amount ? 'teal' : 'storm'} />
-                  </div>
-                  {t('##mt_characters## characters of machine translation /##plan_interval##')
-                    .replace('##mt_characters##', mtCharacters.toLocaleString())
-                    .replace('##plan_interval##', product.price.recurring!.interval)}
-                </li>
-              </>
-            )}
             {recordKeys(product.metadata).map(
               (featureItem: string) =>
                 featureItem.includes('feature_list_') && (
@@ -293,8 +183,7 @@ export const PlanContainer = ({
           <PlanButton
             product={product}
             downgrading={isDowngrading}
-            quantity={submissionQuantity}
-            isSubscribedToPlan={isSubscribedProduct(product, submissionQuantity)}
+            isSubscribedToPlan={isSubscribedProduct(product)}
             buySubscription={buySubscription}
             showManage={shouldShowManage(product)}
             isBusy={isDisabled}

jsapp/js/account/plans/useDisplayPrice.hook.tsx

@@ -1,9 +1,8 @@
 import { useMemo } from 'react'
 
 import type { Price } from '#/account/stripe.types'
-import { getAdjustedQuantityForPrice } from '#/account/stripe.utils'
 
-export const useDisplayPrice = (price?: Price | null, submissionQuantity = 1) =>
+export const useDisplayPrice = (price?: Price | null) =>
   useMemo(() => {
     if (!price?.unit_amount) {
       return t('Free')
@@ -12,9 +11,8 @@ export const useDisplayPrice = (price?: Price | null, submissionQuantity = 1) =>
     if (price?.recurring?.interval === 'year') {
       totalPrice /= 12
     }
-    totalPrice *= getAdjustedQuantityForPrice(submissionQuantity, price.transform_quantity)
     if (!price?.recurring?.interval) {
       return t('$##price##').replace('##price##', totalPrice.toFixed(2))
     }
     return t('$##price## USD/month').replace('##price##', totalPrice.toFixed(2))
-  }, [submissionQuantity, price])
+  }, [price])