Interfaces
Interface: UseSubscription

﻿react-autonomy﻿.UseSubscription
UseSubscription contains all the data and methods returned by the
useSubscription﻿ hook.
Properties
cancelSubscription
• cancelSubscription: (options?: CancelSubscription﻿) => Promise<Subscription﻿>
Type declaration
▸ (options?): Promise<Subscription﻿>
The cancelSubscription function calls the Chord API to cancel
the subscription.
﻿
JS
import { useSubscription } from '@chordcommerce/react-autonomy'

export default subscriptionId => {
  const { subscription, cancelSubscription } = useSubscription({ subscriptionId })

  const onClick = async () => {
    return cancelSubscription()
  }

  return <button onClick={onClick}>Cancel Subscription</button>
}
import { useSubscription } from '@chordcommerce/react-autonomy'

export default subscriptionId => {
  const { subscription, cancelSubscription } = useSubscription({ subscriptionId })

  const onClick = async () => {
    return cancelSubscription()
  }

  return <button onClick={onClick}>Cancel Subscription</button>
}
﻿
Parameters
Name
Type
options?
﻿CancelSubscription﻿﻿
Returns
Promise<Subscription﻿>
Defined in
﻿packages/react-autonomy/src/hooks/use-subscription.ts:205﻿
﻿
error
• error: Error
Defined in
﻿packages/react-autonomy/src/hooks/use-subscription.ts:122﻿
﻿
isFetching
• isFetching: boolean
Defined in
﻿packages/react-autonomy/src/hooks/use-subscription.ts:124﻿
﻿
isLoaded
• isLoaded: boolean
Defined in
﻿packages/react-autonomy/src/hooks/use-subscription.ts:123﻿
﻿
loadSubscription
• loadSubscription: () => Promise<Subscription﻿>
Type declaration
▸ (): Promise<Subscription﻿>
The loadSubscription function loads information about the subscription
from the Chord API.
You shouldn't need to call this function, except in exceptional
circumstances, as the useSubscription﻿ hook will automatically start
loading the subscription when the hook is initialized.
﻿
Here's an example of when you might want to use loadSubscription in
a custom callback. It should be noted that skipSubscription returns the
updated subscription, but in this example, assume that it doesn't for
educational purposes.
JS
import { useSubscription } from '@chordcommerce/react-autonomy'
import customEventingFunction from '~/app/events'

const SkipSubscriptionButon = ({ subscriptionId }) => {
  const {
    subscription,
    loadSubscription,
    skipSubscription
  } = useSubscription({ subscriptionId })

  const handleClick = async () =>
    await skipSubscription()
    const updatedSubscription = await loadSubscription()
    await customEventingFunction('Subscription Skipped', {
      newEndDate: updatedSubscription.endDate,
    })
  }

  return <button onClick={handleClick}>Skip</button>
}
import { useSubscription } from '@chordcommerce/react-autonomy'
import customEventingFunction from '~/app/events'

const SkipSubscriptionButon = ({ subscriptionId }) => {
  const {
    subscription,
    loadSubscription,
    skipSubscription
  } = useSubscription({ subscriptionId })

  const handleClick = async () =>
    await skipSubscription()
    const updatedSubscription = await loadSubscription()
    await customEventingFunction('Subscription Skipped', {
      newEndDate: updatedSubscription.endDate,
    })
  }

  return <button onClick={handleClick}>Skip</button>
}
﻿
Returns
Promise<Subscription﻿>
Defined in
﻿packages/react-autonomy/src/hooks/use-subscription.ts:163﻿
﻿
pauseSubscription
• pauseSubscription: (options: PauseSubscription﻿) => Promise<Subscription﻿>
Type declaration
▸ (options): Promise<Subscription﻿>
The pauseSubscription function calls the Chord API to pause
a subscription.
﻿
JS
import { useSubscription } from '@chordcommerce/react-autonomy'

export default subscriptionId => {
  const { subscription, pauseSubscription } = useSubscription({ subscriptionId })

  const onClick = async () => {
    return pauseSubscription({ actionableDate: new Date().toISOString() })
  }

  return <button onClick={onClick}>Pause Subscription</button>
}
import { useSubscription } from '@chordcommerce/react-autonomy'

export default subscriptionId => {
  const { subscription, pauseSubscription } = useSubscription({ subscriptionId })

  const onClick = async () => {
    return pauseSubscription({ actionableDate: new Date().toISOString() })
  }

  return <button onClick={onClick}>Pause Subscription</button>
}
﻿
Parameters
Name
Type
options
﻿PauseSubscription﻿﻿
Returns
Promise<Subscription﻿>
Defined in
﻿packages/react-autonomy/src/hooks/use-subscription.ts:271﻿
﻿
resumeSubscription
• resumeSubscription: (options: ResumeSubscription﻿) => Promise<Subscription﻿>
Type declaration
▸ (options): Promise<Subscription﻿>
The resumeSubscription function calls the Chord API to resume
a subscription.
Paused subscriptions will not be processed until manually resumed or the
actionableDate is reached.
﻿
JS
import { useSubscription } from '@chordcommerce/react-autonomy'

export default subscriptionId => {
  const { subscription, resumeSubscription } = useSubscription({ subscriptionId })

  const onClick = async () => {
    return resumeSubscription({ actionableDate: new Date().toISOString() })
  }

  return <button onClick={onClick}>Resume Subscription</button>
}
import { useSubscription } from '@chordcommerce/react-autonomy'

export default subscriptionId => {
  const { subscription, resumeSubscription } = useSubscription({ subscriptionId })

  const onClick = async () => {
    return resumeSubscription({ actionableDate: new Date().toISOString() })
  }

  return <button onClick={onClick}>Resume Subscription</button>
}
﻿
Parameters
Name
Type
options
﻿ResumeSubscription﻿﻿
Returns
Promise<Subscription﻿>
Defined in
﻿packages/react-autonomy/src/hooks/use-subscription.ts:295﻿
﻿
skipSubscription
• skipSubscription: (options?: SkipSubscription﻿) => Promise<Subscription﻿>
Type declaration
▸ (options?): Promise<Subscription﻿>
The skipSubscription function calls the Chord API to skip the next
subscription delivery.
﻿
JS
import { useSubscription } from '@chordcommerce/react-autonomy'

export default subscriptionId => {
  const { subscription, skipSubscription } = useSubscription({ subscriptionId })

  const onClick = () => {
    skipSubscription()
  }

  return <button onClick={onClick}>Skip Next Shipment</button>
}
import { useSubscription } from '@chordcommerce/react-autonomy'

export default subscriptionId => {
  const { subscription, skipSubscription } = useSubscription({ subscriptionId })

  const onClick = () => {
    skipSubscription()
  }

  return <button onClick={onClick}>Skip Next Shipment</button>
}
﻿
Parameters
Name
Type
options?
﻿SkipSubscription﻿﻿
Returns
Promise<Subscription﻿>
Defined in
﻿packages/react-autonomy/src/hooks/use-subscription.ts:184﻿
﻿
subscription
• subscription: Subscription﻿﻿
Defined in
﻿packages/react-autonomy/src/hooks/use-subscription.ts:121﻿
﻿
updateSubscription
• updateSubscription: (options: SubscriptionUpdateProps﻿) => Promise<Subscription﻿>
Type declaration
▸ (options): Promise<Subscription﻿>
The updateSubscription function calls the Chord API to update
a subscription.
﻿
JS
import { useSubscription } from '@chordcommerce/react-autonomy'

export default () => {
  const { updateSubscription } = useSubscription(subscription.id)
  const onSubmit = async data => {
    try {
      let response = await updateSubscription({
        shipAddressAttributes: data.addressAttributes,
        billAddressAttributes: data.addressAttributes,
        intervalLength: 2,
        intervalUnits: 'month',
        endDate: '2021-12-31',
        actionableDate: '2030-08-18'
      })
      console.log(response)
    } catch (error) {
      console.error(error)
    }
  }
}

// Default Form Values:

const address = subscription['shipAddress']
const addressAttributes = {
  name: address.name,
  address1: address.address1,
  address2: address.address2,
  city: address.city,
  state_name: address.state.abbr,
  country_iso: address.country.iso,
  zipcode: address.zipcode
}
import { useSubscription } from '@chordcommerce/react-autonomy'

export default () => {
  const { updateSubscription } = useSubscription(subscription.id)
  const onSubmit = async data => {
    try {
      let response = await updateSubscription({
        shipAddressAttributes: data.addressAttributes,
        billAddressAttributes: data.addressAttributes,
        intervalLength: 2,
        intervalUnits: 'month',
        endDate: '2021-12-31',
        actionableDate: '2030-08-18'
      })
      console.log(response)
    } catch (error) {
      console.error(error)
    }
  }
}

// Default Form Values:

const address = subscription['shipAddress']
const addressAttributes = {
  name: address.name,
  address1: address.address1,
  address2: address.address2,
  city: address.city,
  state_name: address.state.abbr,
  country_iso: address.country.iso,
  zipcode: address.zipcode
}
﻿
Parameters
Name
Type
options
﻿SubscriptionUpdateProps﻿﻿
Returns
Promise<Subscription﻿>
Defined in
﻿packages/react-autonomy/src/hooks/use-subscription.ts:248﻿
Name	Type
options?	CancelSubscription
Name	Type
options	PauseSubscription
Name	Type
options	ResumeSubscription
Name	Type
options?	SkipSubscription
Name	Type
options	SubscriptionUpdateProps
Updated 25 Mar 2024
Interface: UseProduct
Interface: UseSubscriptions