feat(zendesk) - add zendesk links (#725)

* feat(zendesk) - add zendesk links

* fix read more link

Author: gabrielseco

example/src/ContractorOnboarding.tsx

@@ -14,6 +14,8 @@ import {
   ContractPreviewFormPayload,
   JSFCustomComponentProps,
   FieldComponentProps,
+  ZendeskTriggerButton,
+  zendeskArticles,
 } from '@remoteoss/remote-flows';
 import {
   Card,
@@ -241,6 +243,11 @@ const MultiStepForm = ({
             <p className='text-sm text-[#71717A]'>
               Choose the plan that best fits your needs.
             </p>
+            <ZendeskTriggerButton
+              zendeskId={zendeskArticles.engagingContractors}
+            >
+              Explore our guide to engaging contractors ↗
+            </ZendeskTriggerButton>
           </div>
           <PricingPlanStep
             components={{

example/src/components/PricingPlanCard.tsx

@@ -5,8 +5,9 @@ import {
   CardDescription,
   CardContent,
   CardFooter,
+  cn,
 } from '@remoteoss/remote-flows/internals';
-import { cn } from '@remoteoss/remote-flows/internals';
+import { ZendeskTriggerButton, zendeskArticles } from '@remoteoss/remote-flows';
 import { Check } from 'lucide-react';
 
 interface PricingPlanCardProps {
@@ -33,12 +34,19 @@ export function PricingPlanCard({
         selected && 'border-solid border-[#9AA6B2] ring-2 ring-[#9AA6B2]',
       )}
       onClick={() => {
-        onSelect?.(value);
+        if (!selected) {
+          onSelect?.(value);
+        }
       }}
     >
       <CardHeader className='pb-4'>
         <CardTitle className='text-xl font-bold'>{title}</CardTitle>
         <CardDescription>{description}</CardDescription>
+        <div>
+          <ZendeskTriggerButton zendeskId={zendeskArticles.pricingPlanOptions}>
+            Read more ↗
+          </ZendeskTriggerButton>
+        </div>
         <div className='border-t mt-4 pt-4'></div>
       </CardHeader>
 

src/components/shared/zendesk-drawer/utils.ts

@@ -5,6 +5,12 @@ export const zendeskArticles = {
    * https://support.remote.com/hc/en-us/articles/4668194326797
    */
   disclaimerCostCalculator: 4668194326797,
+  /**
+   * Guide for engaging contractors
+   * Access: private (Need Remote account to access)
+   * https://support.remote.com/hc/en-us/articles/43161434169613
+   */
+  engagingContractors: 43161434169613,
   /**
    * Employee Onboarding Timeline
    * Access: Private (Need Remote account to access)
@@ -23,6 +29,12 @@ export const zendeskArticles = {
    * https://support.remote.com/hc/en-us/articles/4410698586893
    */
   internationalPricing: 4410698586893,
+  /**
+   * Pricing Plan Options
+   * Access: Private (Need Remote account to access)
+   * https://support.remote.com/hc/en-us/articles/43161720465421
+   */
+  pricingPlanOptions: 43161720465421,
   /**
    * IR35 Status
    * Access: Private (Need Remote account to access)