feat: charge paid in advance

cypress/e2e/t3-create-bm.cy.ts

@@ -103,9 +103,9 @@ describe('Create billable metrics', () => {
     cy.get('textarea[name="description"]').type('I am a description')
     cy.get('[data-test="submit"]').should('be.disabled')
     cy.get('input[name="aggregationType"]').click()
-    cy.get('[data-test="recurring_count_agg"]').click()
-    cy.get('[data-test="submit"]').should('be.disabled')
-    cy.get('input[name="fieldName"]').type('whatever')
+    cy.get('[data-test="count_agg"]').click()
+    cy.get('input[name="fieldName"]').should('not.exist')
+    cy.get('[data-test="button-selector-true"]').click()
     cy.get('[data-test="submit"]').should('not.be.disabled')
     cy.get('[data-test="submit"]').click()
     cy.url().should('be.equal', Cypress.config().baseUrl + '/billable-metrics')

cypress/e2e/t4-create-plan.cy.ts

@@ -43,7 +43,8 @@ describe('Create plan', () => {
 
     // Standard
     cy.get('[data-test="add-charge"]').first().click()
-    cy.get('input[name="searchChargeInput"]').click()
+    cy.get('[data-test="add-metered-charge"]').first().click()
+    cy.get('input[name="searchMeteredChargeInput"]').click()
     cy.get('[data-option-index="0"]').click()
     cy.get('[data-test="remove-charge"]').should('exist').and('not.be.disabled')
     cy.get('input[name="chargeModel"]').last().should('have.value', 'Standard pricing')
@@ -52,7 +53,8 @@ describe('Create plan', () => {
 
     // Graduated
     cy.get('[data-test="add-charge"]').last().click()
-    cy.get('input[name="searchChargeInput"]').click()
+    cy.get('[data-test="add-metered-charge"]').last().click()
+    cy.get('input[name="searchMeteredChargeInput"]').click()
     cy.get('[data-option-index="1"]').click()
     cy.get('[data-test="remove-charge"]').should('exist').and('not.be.disabled')
     cy.get('input[name="chargeModel"]').last().click()
@@ -68,7 +70,8 @@ describe('Create plan', () => {
 
     // Package
     cy.get('[data-test="add-charge"]').last().click()
-    cy.get('input[name="searchChargeInput"]').click()
+    cy.get('[data-test="add-metered-charge"]').last().click()
+    cy.get('input[name="searchMeteredChargeInput"]').click()
     cy.get('[data-option-index="1"]').click()
     cy.get('[data-test="remove-charge"]').should('exist').and('not.be.disabled')
     cy.get('input[name="chargeModel"]').last().click()
@@ -79,7 +82,8 @@ describe('Create plan', () => {
 
     // Percentage
     cy.get('[data-test="add-charge"]').last().click()
-    cy.get('input[name="searchChargeInput"]').click()
+    cy.get('[data-test="add-metered-charge"]').last().click()
+    cy.get('input[name="searchMeteredChargeInput"]').click()
     cy.get('[data-option-index="1"]').click()
     cy.get('[data-test="remove-charge"]').should('exist').and('not.be.disabled')
     cy.get('input[name="chargeModel"]').last().click()
@@ -98,7 +102,8 @@ describe('Create plan', () => {
 
     // Volume
     cy.get('[data-test="add-charge"]').last().click()
-    cy.get('input[name="searchChargeInput"]').click()
+    cy.get('[data-test="add-recurring-charge"]').last().click()
+    cy.get('input[name="searchRecurringChargeInput"]').click()
     cy.get('[data-option-index="1"]').click()
     cy.get('[data-test="remove-charge"]').should('exist').and('not.be.disabled')
     cy.get('input[name="chargeModel"]').last().click()
@@ -132,7 +137,8 @@ describe('Create plan', () => {
 
       // Config charge
       cy.get('[data-test="add-charge"]').last().click()
-      cy.get('input[name="searchChargeInput"]').click()
+      cy.get('[data-test="add-metered-charge"]').last().click()
+      cy.get('input[name="searchMeteredChargeInput"]').click()
       cy.get('[data-option-index="1"]').click()
       cy.get('[data-test="remove-charge"]').should('exist').and('not.be.disabled')
       cy.get('input[name="chargeModel"]').last().click()

ditto/base.json

@@ -52,11 +52,6 @@
   "text_633336532bdf72cb62dc0692": "Add-on successfully created",
   "text_633336532bdf72cb62dc0694": "Plan successfully created",
   "text_633336532bdf72cb62dc0696": "Billable metric successfully created",
-  "text_6310755befed49627644222b": "Metered",
-  "text_6310755befed49627644222d": "• The calculated value is reset to 0 at the beginning of each period",
-  "text_6310755befed49627644222f": "Persistent",
-  "text_6310755befed496276442231": "• The calculated value is not reset to 0, it persists over all billing periods",
-  "text_63105dbdd88c7432a3b255eb": "Recurring count",
   "text_637b4da08cd0118cd0c4486f": "{{amount}} remaining",
   "text_644b9f17623605a945cafdb9": "Pro-rated amount based on the total fees",
   "text_644b9f17623605a945cafdbb": "Coupons",
@@ -428,7 +423,6 @@
   "text_6435888d7cc86500646d8981": "Search and select the billable metric to add",
   "text_6435888d7cc86500646d8974": "Add a charge",
   "text_6435888d7cc86500646d8977": "Usage-based charges",
-  "text_6435888d7cc86500646d897a": "Add a charge",
   "text_6435895831d323008a47911f": "Metric already used in the plan, customers will be charged several times.",
   "text_64358e074a3b7500714f256c": "If true, all charges will be aggregated and invoiced monthly, even if the plan is yearly.",
   "text_643e592657fc1ba5ce110b9e": "Add a spending minimum",
@@ -803,6 +797,20 @@
   "text_646e2d0cc536351b62ba6f25": "Generate an invoice for each event",
   "text_646e2d0cc536351b62ba6f35": "Turn off to not invoice and generate document for customers with each event. ",
   "text_646e2d0cc536351b62ba6efd": "Charges are invoiced at the end of the billing period and cannot be charged in advance due to their aggregation type being defined as recurring count.",
+  "text_648c2be974f70300748a4ca1": "Type",
+  "text_648c2be974f70300748a4ca5": "Metered",
+  "text_648c2be974f70300748a4cad": "The calculated value is reset to 0 at the beginning of each period",
+  "text_648c2be974f70300748a4c87": "Recurring",
+  "text_648c2be974f70300748a4c8c": "The calculated value is not reset to 0, it is persistent over all billable periods",
+  "text_648c2be974f70300748a4ca6": "This billable metric is metered, the calculated value is reset to 0 at the beginning of each period",
+  "text_648c2be974f70300748a4cc6": "Add a metered charge",
+  "text_648c2be974f70300748a4cc8": "Add a recurring charge",
+  "text_648c2be974f70300748a4cc7": "Metered charges",
+  "text_648c2be974f70300748a4cc9": "Charges are fully billed, invoiced and reset at the end of each billing period.",
+  "text_648c2be974f70300748a4cce": "Add a metered charge",
+  "text_648c2be974f70300748a4ccf": "Recurring charges",
+  "text_648c2be974f70300748a4cd0": "Charges persist across billing periods and can be billed and invoiced either upon event receipt or at the end of the billing period.",
+  "text_648c2be974f70300748a4cd4": "Add a recurring charge",
   "text_645bb193927b375079d28a8f": "Taxes",
   "text_645bb193927b375079d28ab5": "Taxes settings",
   "text_645bb193927b375079d28acc": "Define tax rates and use them across the application.",

ditto/config.yml

@@ -104,9 +104,6 @@ sources:
     - name: ⚙️ [WIP] - Credits - Create prepaid credits
       id: 62d175018d4659c9a3eec929
       fileName: ⚙️ [WIP] - Credits - Create prepaid credits
-    - name: 👍 [Ready for dev] - B.metrics - Persistent bm in aggregation type
-      id: 63105dba2074ec779d08c6b4
-      fileName: 👍 [Ready for dev] - B.metrics - Persistent bm in aggregation type
     - name: 👍 [Ready for dev] - Onboarding - Invite member to organisation
       id: 63208b60a9b2a4c6186bbd26
       fileName: 👍 [Ready for dev] - Onboarding - Invite member to organisation

ditto/index.js

@@ -11,9 +11,6 @@ module.exports = {
   "project_633336529ca3243d15ac9df4": {
     "base": require('./-ready-for-dev---all---replace-success-screen-by-success-toast__base.json')
   },
-  "project_63105dba2074ec779d08c6b4": {
-    "base": require('./-ready-for-dev---b.metrics---persistent-bm-in-aggregation-type__base.json')
-  },
   "project_637b4d9f764dcb190431ad4d": {
     "base": require('./-ready-for-dev---coupons---apply-several-coupons-to-customer__base.json')
   },

src/components/billableMetrics/BillableMetricCodeSnippet.tsx

@@ -7,7 +7,7 @@ const { apiUrl } = envGlobalVar()
 const getSnippets = (billableMetric?: CreateBillableMetricInput) => {
   if (!billableMetric) return '# Fill the form to generate the code snippet'
 
-  const { aggregationType, code, fieldName, group } = billableMetric
+  const { aggregationType, code, fieldName, group, recurring } = billableMetric
 
   const isValidJSON = (string: string) => {
     try {
@@ -70,6 +70,7 @@ const getSnippets = (billableMetric?: CreateBillableMetricInput) => {
       "external_subscription_id": "__EXTERNAL_SUBSCRIPTION_ID__",
       "external_customer_id": "__EXTERNAL_CUSTOMER_ID__", 
       "code": "${code}", 
+      "recurring": "${recurring}",
       "timestamp": $(date +%s)${
         groupDimension > 0
           ? `,
@@ -120,7 +121,8 @@ ${groupDimensionMessage}
       "transaction_id": "__UNIQUE_ID__", 
       "external_subscription_id": "__EXTERNAL_SUBSCRIPTION_ID__",
       "external_customer_id": "__EXTERNAL_CUSTOMER_ID__", 
-      "code": "${code}", 
+      "code": "${code}",
+      "recurring": "${recurring}",
       "timestamp": $(date +%s), 
       "properties":  { 
         "${fieldName}": 12${
@@ -135,32 +137,6 @@ ${groupDimensionMessage}
 
 # To use the snippet, don’t forget to edit your __YOUR_API_KEY__, __UNIQUE_ID__, __EXTERNAL_SUBSCRIPTION_ID__ and __EXTERNAL_CUSTOMER_ID__
 ${groupDimensionMessage}
-`
-    case AggregationTypeEnum.RecurringCountAgg:
-      return `curl --location --request POST "${apiUrl}/api/v1/events" \\
-  --header "Authorization: Bearer $__YOUR_API_KEY__" \\
-  --header 'Content-Type: application/json' \\
-  --data-raw '{
-    "event": { 
-      "transaction_id": "__UNIQUE_ID__", 
-      "external_subscription_id": "__EXTERNAL_SUBSCRIPTION_ID__",
-      "external_customer_id": "__EXTERNAL_CUSTOMER_ID__", 
-      "code": "${code}", 
-      "timestamp": $(date +%s), 
-      "properties":  { 
-        "${fieldName}": "__VALUE__" ,
-        "operation_type": "add"${
-          groupDimension > 0
-            ? `,
-        ${propertiesForGroup}`
-            : ''
-        }
-      }
-    }
-  }'
-  
-# To use the snippet, don’t forget to edit your __YOUR_API_KEY__, __UNIQUE_ID__, __EXTERNAL_SUBSCRIPTION_ID__, __EXTERNAL_CUSTOMER_ID__ and __VALUE__
-${groupDimensionMessage}
 `
     default:
       return '# Fill the form to generate the code snippet'

src/components/form/ButtonSelector/ButtonSelector.tsx

@@ -60,6 +60,7 @@ export const ButtonSelector = ({
               title={optionLabel ?? optionValue}
               active={value === optionValue}
               onClick={() => onChange(optionValue)}
+              data-test={`button-selector-${optionValue}`}
             />
           )
         })}

src/components/form/ButtonSelector/TabButton.tsx

@@ -17,7 +17,10 @@ export interface TabButtonProps {
 }
 
 export const TabButton = forwardRef<HTMLButtonElement, TabButtonProps>(
-  ({ active = false, title, icon, className, disabled, onClick }: TabButtonProps, ref) => {
+  (
+    { active = false, title, icon, className, disabled, onClick, ...props }: TabButtonProps,
+    ref
+  ) => {
     const [isLoading, setIsLoading] = useState(false)
     const mountedRef = useRef(false)
 
@@ -32,6 +35,7 @@ export const TabButton = forwardRef<HTMLButtonElement, TabButtonProps>(
 
     return (
       <Container
+        {...props}
         ref={ref}
         className={className}
         $active={active}