Overleaf/services/web/app/views/subscriptions/plans/light-redesign/_table_ctas.pug

mixin btn_buy_individual(highlighted, eventTrackingKey, subscriptionPlan, period) 
	a.btn(
		data-ol-start-new-subscription=subscriptionPlan
		data-ol-event-tracking-key=eventTrackingKey
		data-ol-item-view=period
		class=(highlighted ? 'btn-primary' : 'btn-secondary')
	)
		if (period === 'monthly')
			span #{translate("try_for_free")}
		else 
			span #{translate("buy_now_no_exclamation_mark")}

mixin btn_buy_individual_free()
	if (!getSessionUser())
		a.btn(
			href="/register"
			class=(highlighted ? 'btn-primary' : 'btn-secondary')
		)
			span #{translate("try_for_free")}
	else
		a.btn.invisible(
			aria-hidden="true"
			class=(highlighted ? 'btn-primary' : 'btn-secondary')
		)

mixin btn_buy_individual_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation, period)
	+btn_buy_individual(highlighted, eventTrackingKey, 'collaborator', period)
	if (period === 'monthly')
		+additional_link_buy(eventTrackingKey, additionalEventSegmentation, 'collaborator', period)

mixin btn_buy_individual_professional(highlighted, eventTrackingKey, additionalEventSegmentation, period)
	+btn_buy_individual(highlighted, eventTrackingKey, 'professional', period)
	if (period === 'monthly')
		+additional_link_buy(eventTrackingKey, additionalEventSegmentation, 'professional', period)

mixin btn_buy_group_collaborator(highlighted, eventTrackingKey) 
	a.btn(
		data-ol-start-new-subscription='group_collaborator'
		data-ol-event-tracking-key=eventTrackingKey
		data-ol-item-view='annual'
		data-ol-has-custom-href
		data-ol-location='table-header'
		class=(highlighted ? 'btn-primary' : 'btn-secondary')
	)
		span.visible-mobile-and-tablet #{translate("customize")}
		span.visible-desktop #{translate("customize_your_plan")}

mixin btn_buy_group_professional(highlighted, eventTrackingKey) 
	a.btn(
		data-ol-start-new-subscription='group_professional'
		data-ol-event-tracking-key=eventTrackingKey
		data-ol-item-view='annual'
		data-ol-has-custom-href
		data-ol-location='table-header'
		class=(highlighted ? 'btn-primary' : 'btn-secondary')
	)
		span.visible-mobile-and-tablet #{translate("customize")}
		span.visible-desktop #{translate("customize_your_plan")}

mixin btn_buy_group_organization(highlighted, eventTrackingKey) 
	a.btn(
		data-ol-start-new-subscription='group_organization'
		data-ol-event-tracking-key=eventTrackingKey
		data-ol-item-view='annual'
		data-ol-has-custom-href
		data-ol-location='table-header'
		href='/for/contact-sales'
		target='_blank'
		class=(highlighted ? 'btn-primary' : 'btn-secondary')
	)
		span #{translate("contact_us_lowercase")}

mixin btn_buy_student_free(highlighted)
	if (!getSessionUser())
		a.btn(
			href="/register"
			class=(highlighted ? 'btn-primary' : 'btn-secondary')
		)
			span #{translate("try_for_free")}

mixin btn_buy_student_student(highlighted, eventTrackingKey, additionalEventSegmentation, period)
	a.btn(
		data-ol-start-new-subscription='student'
		data-ol-event-tracking-key=eventTrackingKey
		data-ol-item-view=period
		data-ol-location='card'
		class=(highlighted ? 'btn-primary' : 'btn-secondary')
	)
		if (period === 'monthly')
			span #{translate("try_for_free")}
		else 
			span #{translate("buy_now_no_exclamation_mark")}
	if (period === 'monthly')
		+additional_link_buy(eventTrackingKey, additionalEventSegmentation, 'student', period)

mixin additional_link_group(eventTrackingKey, additionalEventSegmentation, plan)
	- var buttonSegmentation = plan + '-link'
	- additionalEventSegmentation = additionalEventSegmentation || {}
	- var segmentation = { ...additionalEventSegmentation, button: buttonSegmentation, location: 'table-header' }

	a.btn.btn-bg-ghost(
		href="/for/contact-sales"
		target="_blank"
		event-tracking=eventTrackingKey
		event-tracking-mb="true"
		event-tracking-trigger="click"
		event-segmentation=segmentation
	) #{translate("contact_us_lowercase")}

mixin additional_link_buy(eventTrackingKey, additionalEventSegmentation, plan, period)
	- var buttonSegmentation = plan + '-link'
	- additionalEventSegmentation = additionalEventSegmentation || {}
	- var segmentation = { ...additionalEventSegmentation, button: buttonSegmentation, location: 'table-header', period }
	- var itmCampaign = itm_campaign ? { itm_campaign } : {itm_campaign: 'plans'}
	- var itmReferrer = itm_referrer ? { itm_referrer } : {}
	- var qs = new URLSearchParams({planCode: plan, currency: recommendedCurrency, itm_content: 'card', ...itmCampaign, ...itmReferrer})

	a.btn.btn-bg-ghost(
		href=`/user/subscription/new?${qs.toString()}`
		event-tracking=eventTrackingKey
		event-tracking-mb="true"
		event-tracking-trigger="click"
		event-segmentation=segmentation
	) #{translate("buy_now_no_exclamation_mark")}

mixin plans_cta(tableHeadKey, highlighted, eventTrackingKey, additionalEventSegmentation, period)
	case tableHeadKey
		when 'individual_free'
			+btn_buy_individual_free()
		when 'individual_collaborator'
			+btn_buy_individual_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation, period)
		when 'individual_professional'
			+btn_buy_individual_professional(highlighted, eventTrackingKey, additionalEventSegmentation, period)
		when 'group_collaborator'
			+btn_buy_group_collaborator(highlighted, eventTrackingKey)
			+additional_link_group(eventTrackingKey, additionalEventSegmentation, 'group_collaborator')
		when 'group_professional'
			+btn_buy_group_professional(highlighted, eventTrackingKey)
			+additional_link_group(eventTrackingKey, additionalEventSegmentation, 'group_professional')
		when 'group_organization'
			+btn_buy_group_organization(highlighted, eventTrackingKey)
			small.plans-table-th-content-additional-link.invisible(aria-hidden="true")
		when 'student_free'
			+btn_buy_student_free(highlighted)
		when 'student_student'
			+btn_buy_student_student(highlighted, eventTrackingKey, additionalEventSegmentation, period)