+
+
+
+
+ Connect to Salesforce
+{message}
+
+
+ )
+}
diff --git a/plugins/salesforce/src/PluginError.ts b/plugins/salesforce/src/PluginError.ts
new file mode 100644
index 00000000..5d99a088
--- /dev/null
+++ b/plugins/salesforce/src/PluginError.ts
@@ -0,0 +1,15 @@
+export type ErrorType = "auth"
+
+export class PluginError extends Error {
+ title: string
+ type?: ErrorType
+
+ constructor(title: string, message: string, type?: ErrorType) {
+ super(message)
+
+ Object.setPrototypeOf(this, PluginError.prototype)
+
+ this.title = title
+ this.type = type
+ }
+}
diff --git a/plugins/salesforce/src/api.ts b/plugins/salesforce/src/api.ts
new file mode 100644
index 00000000..52307c2f
--- /dev/null
+++ b/plugins/salesforce/src/api.ts
@@ -0,0 +1,606 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
+import auth from "./auth"
+import { API_URL } from "./constants"
+import { PluginError } from "./PluginError"
+
+/**
+ * Salesforce Core
+ */
+export interface SFQueryResult
+
+)
diff --git a/plugins/salesforce/src/components/CheckboxTextField.tsx b/plugins/salesforce/src/components/CheckboxTextField.tsx
new file mode 100644
index 00000000..0d79b892
--- /dev/null
+++ b/plugins/salesforce/src/components/CheckboxTextField.tsx
@@ -0,0 +1,45 @@
+import { useState } from "react"
+import cx from "classnames"
+
+interface Props {
+ value: string
+ disabled: boolean
+ checked: boolean
+ onChange: () => void
+}
+
+export function CheckboxTextfield({ value, disabled, checked: initialChecked, onChange }: Props) {
+ const [checked, setChecked] = useState(initialChecked)
+
+ const toggle = () => {
+ if (disabled) return
+
+ setChecked(!checked)
+ onChange()
+ }
+
+ return (
+
+
+
+
+ )
+}
diff --git a/plugins/salesforce/src/components/CopyInput.tsx b/plugins/salesforce/src/components/CopyInput.tsx
new file mode 100644
index 00000000..b5681cbe
--- /dev/null
+++ b/plugins/salesforce/src/components/CopyInput.tsx
@@ -0,0 +1,33 @@
+import { useState } from "react"
+import { CopyIcon, TickIcon } from "./Icons"
+import { Spinner } from "./Spinner"
+import { framer } from "framer-plugin"
+
+interface Props {
+ value: string
+ isLoading?: boolean
+ message?: string
+}
+
+export const CopyInput = ({ value, isLoading, message }: Props) => {
+ const [copied, setCopied] = useState(false)
+
+ const handleCopy = async () => {
+ await navigator.clipboard.writeText(value)
+ setCopied(true)
+ setTimeout(() => setCopied(false), 2000)
+
+ if (message) {
+ framer.notify(message)
+ }
+ }
+
+ return (
+
+
+
+
+ )
+}
diff --git a/plugins/salesforce/src/components/FieldMapper.tsx b/plugins/salesforce/src/components/FieldMapper.tsx
new file mode 100644
index 00000000..23f19c53
--- /dev/null
+++ b/plugins/salesforce/src/components/FieldMapper.tsx
@@ -0,0 +1,122 @@
+import { CheckboxTextfield } from "@/components/CheckboxTextField"
+import { IconChevron } from "@/components/Icons"
+import { ScrollFadeContainer } from "@/components/ScrollFadeContainer"
+import { assert } from "@/utils"
+import { ManagedCollectionField } from "framer-plugin"
+import { Fragment, useMemo } from "react"
+import cx from "classnames"
+
+export interface ManagedCollectionFieldConfig {
+ field: ManagedCollectionField | null | undefined
+ originalFieldName: string
+}
+
+interface FieldMapperProps {
+ collectionFieldConfig: ManagedCollectionFieldConfig[]
+ fieldNameOverrides: Record
+ {fromLabel}
+ {toLabel}
+ {sortedCollectionFieldConfig.map((fieldConfig, i) => {
+ const isUnsupported = !fieldConfig.field
+ const isSelected = fieldConfig.field ? isFieldSelected(fieldConfig.field.id) : false
+
+ return (
+
+ {
+ assert(fieldConfig.field)
+ onFieldToggle(fieldConfig.field.id)
+ }}
+ />
+
+ )
+ })}
+
+
+
+ {
+ assert(fieldConfig.field)
+ onFieldNameChange(fieldConfig.field.id, e.target.value)
+ }}
+ />
+
+
+
+)
+
+interface TitleProps {
+ title: string
+ animateForward?: boolean
+}
+
+const Title = ({ title, animateForward }: TitleProps) => (
+ +
+
+
+
+
+
+ {title}
+
+ {title &&
+)
diff --git a/plugins/salesforce/src/components/Link.tsx b/plugins/salesforce/src/components/Link.tsx
new file mode 100644
index 00000000..cdecbcb4
--- /dev/null
+++ b/plugins/salesforce/src/components/Link.tsx
@@ -0,0 +1,31 @@
+import { Link, useLocation } from "wouter"
+import classNames from "classnames"
+
+interface LinkProps {
+ href: string
+ children?: React.ReactNode
+ className?: string
+ // eslint-disable-next-line
+ state?: any
+}
+
+export const InternalLink = ({ href, children, className, state }: LinkProps) => {
+ const [_, navigate] = useLocation()
+
+ const handleClick = (e: React.MouseEvent) => {
+ e.preventDefault()
+ navigate(href, { state })
+ }
+
+ return (
+
+ {children}
+
+ )
+}
+
+export const ExternalLink = ({ href, children, className }: LinkProps) => (
+
+ {children}
+
+)
diff --git a/plugins/salesforce/src/components/Logo.tsx b/plugins/salesforce/src/components/Logo.tsx
new file mode 100644
index 00000000..84bd42e2
--- /dev/null
+++ b/plugins/salesforce/src/components/Logo.tsx
@@ -0,0 +1 @@
+export const Logo = () => {children}
+ 
diff --git a/plugins/salesforce/src/components/Message.tsx b/plugins/salesforce/src/components/Message.tsx
new file mode 100644
index 00000000..568be1bf
--- /dev/null
+++ b/plugins/salesforce/src/components/Message.tsx
@@ -0,0 +1,16 @@
+import cx from "classnames"
+
+interface Props {
+ title: string
+ children: React.ReactNode
+ className?: string
+}
+
+export const Message = ({ title, className, children }: Props) => (
+
+
+)
diff --git a/plugins/salesforce/src/components/PageErrorBoundaryFallback.tsx b/plugins/salesforce/src/components/PageErrorBoundaryFallback.tsx
new file mode 100644
index 00000000..6e81f2b3
--- /dev/null
+++ b/plugins/salesforce/src/components/PageErrorBoundaryFallback.tsx
@@ -0,0 +1,50 @@
+import { PropsWithChildren } from "react"
+import { framer } from "framer-plugin"
+import { ErrorBoundary } from "react-error-boundary"
+import { QueryErrorResetBoundary } from "@tanstack/react-query"
+import { PluginError } from "../PluginError"
+import auth from "@/auth"
+import { Message } from "./Message"
+
+export const PageErrorBoundaryFallback = ({ children }: PropsWithChildren) => (
+ {title}
+
+ {children}
+
+
+
+ )
+ }}
+ >
+ {children}
+
+
+ {error.message}
+
+
+ Please retry or{" "} + { + e.preventDefault() + auth.logout().then(() => framer.closePlugin()) + }} + > + logout + + . +
+
+ +
+ Please retry or{" "} + { + e.preventDefault() + auth.logout().then(() => framer.closePlugin()) + }} + > + logout + + . +
+
+ +
+ + +
+
+ )
+}
diff --git a/plugins/salesforce/src/components/Spinner.tsx b/plugins/salesforce/src/components/Spinner.tsx
new file mode 100644
index 00000000..594ad9d9
--- /dev/null
+++ b/plugins/salesforce/src/components/Spinner.tsx
@@ -0,0 +1,40 @@
+import cx from "classnames"
+import styles from "./spinner.module.css"
+
+export interface SpinnerProps {
+ /** Size of the spinner */
+ size?: "normal" | "medium" | "large"
+ /** Set the spinner to have a static position inline with other content */
+ inline?: boolean
+ className?: string
+ inheritColor?: boolean
+}
+
+function styleForSize(size: SpinnerProps["size"]) {
+ switch (size) {
+ case "normal":
+ return styles.normalStyle
+ case "medium":
+ return styles.mediumStyle
+ case "large":
+ return styles.largeStyle
+ }
+}
+
+function spinnerClassNames(size: SpinnerProps["size"] = "normal") {
+ return cx(styles.spin, styles.baseStyle, styleForSize(size))
+}
+
+export const Spinner = ({ size, inline = false, inheritColor, className, ...rest }: SpinnerProps) => {
+ return (
+
+ )
+}
diff --git a/plugins/salesforce/src/components/spinner.module.css b/plugins/salesforce/src/components/spinner.module.css
new file mode 100644
index 00000000..a0d1a7ac
--- /dev/null
+++ b/plugins/salesforce/src/components/spinner.module.css
@@ -0,0 +1,60 @@
+.baseStyle {
+ --spinner-translate: 0;
+ background-color: #fff;
+}
+
+.buttonWithDepthSpinner {
+ background-color: currentColor;
+}
+
+.normalStyle {
+ width: 12px;
+ height: 12px;
+ -webkit-mask: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAApNJREFUSA2tlUtLlFEYgEe7mtFFQ8NLFBG1SJAwahtiLVy5ceVSEPQH1LZf0Lp9FO1bdYNyI7gyBFcS2kAzilYq3sfxeYZ55Zv6FGfohWfOd97vnPd23u9MXeZoaeb1Q7gPHXAFzsAS5GACxiEPqVKXqs1kmtAPQi+cAtedToz1PJ8ExxPwDl7CAlRImoN7rBiF86ABHTiGAzMIh8n3O+ifwWc4EL0n5TGTYQijvjNSxbUadozInUeGZ3nuh1WYgpIkM+hGMwYajAgdrfUn+AaLoLTCAxiAOxCZxL4RdB+gZMjxEjwHo4hS8Jh5DR9hz0mKaNizegoNEI7Wee6FXJTISG6AUgDr+QImoAiHie+mwZJow/PRps4uwnsnRj8Epqc4voVJJ8eULOtW4BFYYjPpgjc+3IWI2sh/wFeoVl6xYQ48dDGLfjOwc/ygQqz595hUMVouS9QHBm4l6k3HWpnBLqicgVrlCxujSbR1Swd+UDpQYRS/oVaZZ2MWwlZBB9Zdxf+QTYw8SRgq6sAvz7vH6JULEB9USVHFjzZskgPRQR4ayxoXXIdaHdg9HrB2rErByWxZERnYtrWUzD0esDbtTmXPhzXwHrKLxEUbYGbVyDkWWwkdadfqbPmwDXZSCyh2VAf8BM/nOOJH5Y0QopMt2I5U/KO4DZZJB47XwEX+ex0mGroMV8sLwp56gyuGwiyW4SZ4c8bt2cZzO7jBNeqtsRHbeZ1g9krsMbhfYPv/c5gecA+4yAVuitFszE5Hjva872OMdXagF19JIoOYWyozMTI3J0tmA6gLvXPfO1cc/XOqOLe/HbjwD8yCXRD3VNJROEgatiRZMJsKsbZHia3nAdphtq8fkiWyXJbBe8uM1aXKPouNnz2Bm1kwAAAAAElFTkSuQmCC");
+ mask: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAApNJREFUSA2tlUtLlFEYgEe7mtFFQ8NLFBG1SJAwahtiLVy5ceVSEPQH1LZf0Lp9FO1bdYNyI7gyBFcS2kAzilYq3sfxeYZ55Zv6FGfohWfOd97vnPd23u9MXeZoaeb1Q7gPHXAFzsAS5GACxiEPqVKXqs1kmtAPQi+cAtedToz1PJ8ExxPwDl7CAlRImoN7rBiF86ABHTiGAzMIh8n3O+ifwWc4EL0n5TGTYQijvjNSxbUadozInUeGZ3nuh1WYgpIkM+hGMwYajAgdrfUn+AaLoLTCAxiAOxCZxL4RdB+gZMjxEjwHo4hS8Jh5DR9hz0mKaNizegoNEI7Wee6FXJTISG6AUgDr+QImoAiHie+mwZJow/PRps4uwnsnRj8Epqc4voVJJ8eULOtW4BFYYjPpgjc+3IWI2sh/wFeoVl6xYQ48dDGLfjOwc/ygQqz595hUMVouS9QHBm4l6k3HWpnBLqicgVrlCxujSbR1Swd+UDpQYRS/oVaZZ2MWwlZBB9Zdxf+QTYw8SRgq6sAvz7vH6JULEB9USVHFjzZskgPRQR4ayxoXXIdaHdg9HrB2rErByWxZERnYtrWUzD0esDbtTmXPhzXwHrKLxEUbYGbVyDkWWwkdadfqbPmwDXZSCyh2VAf8BM/nOOJH5Y0QopMt2I5U/KO4DZZJB47XwEX+ex0mGroMV8sLwp56gyuGwiyW4SZ4c8bt2cZzO7jBNeqtsRHbeZ1g9krsMbhfYPv/c5gecA+4yAVuitFszE5Hjva872OMdXagF19JIoOYWyozMTI3J0tmA6gLvXPfO1cc/XOqOLe/HbjwD8yCXRD3VNJROEgatiRZMJsKsbZHia3nAdphtq8fkiWyXJbBe8uM1aXKPouNnz2Bm1kwAAAAAElFTkSuQmCC");
+ -webkit-mask-size: 12px;
+ mask-size: 12px;
+}
+
+.mediumStyle {
+ width: 24px;
+ height: 24px;
+ -webkit-mask: url("data:image/png;base64,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");
+ mask: url("data:image/png;base64,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");
+ -webkit-mask-size: 24px;
+ mask-size: 24px;
+}
+
+.largeStyle {
+ width: 30px;
+ height: 30px;
+ -webkit-mask: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAABGdBTUEAALGPC/xhBQAAC+5JREFUaAXVm2tsVMcVx/furvHaBr9DcUwpSSGiViolUCUxKYVGfVC+VLQFVVGRSqWWqiiU97ME+MAbgfoBVfQLUvIhErRSojZ9SKhBVA1qqqiBpmrj4JS2LuZR2xi/jXe3v//xndu92BivWYN3pPE875nzn/+ZM3Pnrr3IOIXdu3cniouL6xA/e2Bg4OPxeHx6Op2uJE6mrpgYI/ZEo9Fu0rZkMtnked6/Y7HYB9XV1RdWrlzZS33Og5dLiceOHSvv7+//HDLnp1KpOQCIkwqYB5AIYDWeygoxlQGsvAfgGP0jRNUnqf8rz54tLCz87fr161vVKRchJ4CPHDlSh8JLUXQuSklxD2XROSqQBkx1AkgIAVaFgiaGRJii6sez1t8H+TZ1r27btu1dvzzm5L4A792790kU+yaji01RJXlOUQPsGBaoewHWsxn9jHrqMifsAuXjAP8T6ZjCmADv37+/AhP9FgCeJzrGQsyoXgxnAxiwAmFyyNsEOvlinDazHNLflJSUHF6zZs0NPZBNyBowrD7F4C8R5Xj0vCmoVANLUZS0erGVDeDBx8OWIMCSQzDxvjyNI2e3aevWrefUMNqQFeBDhw4tYa2+iPCoNBAwBQ0mxVRmIgKGyPbjoS9iDRfp0kS8UlRU1Ikj6tEzbW1txTw+hX619JtJ1TzyzyInIXnqQ7vJHczamBrbxlM7/Q9t2bLlpPKjCaMCfOLEiYKWlpbvMNBnUYQxzFQNtPIC6hRk0F7y7wDyHcD9GbPrG40irs/JkycTV69efY7yIuQsQn4Zeck3oOQDC1K9IuF1tsCXRzPWPQGzn5bCyA8ROssBdSlKaDBjmroByr+cNGnSG2wjxiDK3Fc4fPhwCTK/jZAVWJYtIYZzPsPA0uYm4AJ9V23fvr1lpEFHBCxmMbstCJoFYyT/Z5K1BEZjWmb8Fm0/w3u2jTTYWNv27dv3COP/gDG/hoxJRJtnpYzrJkAW8B5MvzgS0/GRlGhvb1+BwMeIjJWScI0kpPYYadvt27d/zKw2jiTnftuQL2+8B8Z/DtPHyX+MaF5cyH35YnpeT0/PXsob/bohyaDmQ6ojERzUlxBQryZkpl0XQKaoly03FhQUvLxz585xBevGVbpp06b3YXoZY8sJOqBqsryIQLVl6P49VQ4XhgXMTD4p8xGtPGQRQQJqVaTnmcl969atuzmc0PGsA/R1nOEKxvgFUfprrTmzFmAx/SPOCi8Mp0fmLFn7gQMHynhgD7NVSBpaI+rADP9x8+bNPx1O2IOuQ9ejjLkUxqWnw+JI7MT8F+3YseNapl6uMagD6NcpFIrcQYIHGUamDvSXysrKRr3nBULHKdPb27sdvd6TeAALS2Ys5w1tN3WhEAKMN3yCWZlHDzNdv2dKE0i8yZbzk1WrVt0OSXiIBbbMXg4s3wfsdfQLNHFsA2Ip6/n5oIFMCDDmuoQ6eeEU+SQzNKDOCEhTPv4w1qzGHyn4JvtdgZSa9DWWNQGK1G3NfD4AfPTo0Vk0PKZG35Qt5QGx+/uNGzf+M/PBiZTnPH0BHV9D1QCPn9ckPMtan+/0DTrw4v55gGr7CTyz8rCtm4c33QMTNU0kEkewwh6Ao7K9SzvvLdZfcnob4IMHD06hYo4qZc48JFYtUv4dM9juHpio6dq1a6/B5glipseWukDxvqDTmgoGmE5P+y34rGREkboUaTfhjNryIQBMp7BOol4pddQUPr2iFkDcN4TBmfSnVVCgk16HZNZi+y/yhMrnQ+A1sQP9f02Uy1a0N6zBYuSrwhAFkA7j06lMZkYYTrImdITLq4DevyI6ImWp5rlJn+FlqDg6ZcqUmSAKOmSgG+jq6mrIKOdFtqKi4i0UlVWaOWcoXXDz5s36KBt3LejtkIyt67ycVKTj32G/P+OBvMhyMOrGUs+BIa6I0mJYa1rp3CgYq2kIBSGjwyWleRrOobdbx5YCUOkTcRxTFTEJ0ySBZWs/zvpGcKJMDmQ1EBXiRO3HIlBWO0e0TwaseWc1uDB58uT/uny+pWynH0GezFn4hE3OS+DrVFFAg9ZuCBcv9zm5lwoJfUAFsLSJWTecsAk0oSzO1lMgX+UaXdrc3Jx3DsvpzjG5A1yGUHU+w0pjuh0YNriH8zHdtWuXvcICTKYcigLch73rdBWKNTU1OpDkZYBJkdgsZjPYFfBmueUeMrb3ZqYcOhJ5iRalwaFXpled/gKtgJm/Is/VSQfd7odCX19fJRU5+y4bEv4ACrz07OKVUSPpwk9Mv8IHhV3y0tp+akhDjgsvXaGO+Rj27NkjD53izmsnqWKEJZrGEdvRq4V9S1c4Ol6qTbORxtN9guyYv8OaoIf0B3De+fPn9Z4QIrGuri4VBWgzd1eGVKAVpScMz9Cnloek85iHxVA9/E984cKFkblz53pVVVXe7NmzJS+6bNmydLy0tLSptbVVtxxybTYQ2QinrxifWmZS8aFV5skf35yDPRgMEaLH9bLApaO6doXVJszZAqDNYwNaZ89P5gnOQE0IlFXG+eRqEaAxReqNU3tbwIUPee/Vvkx4/NSpU3mzH6Ovh++ZxGcgb/r06R5fEgOm+YmEXTkbYBb332B5QKwC1CImLcAFDQ0Nnwmmb4JnTp8+ncAzG0iWaVTAUVkYo3hoWezgTYdemgH6D0Cb8wK4nbrUgbqn9GFa+YkcuKyINjU1FbHXeuXl5UYktx9SOQq7SdoH7+kcCBbwu0Q5q7TPrlvLuvV7xvWbqClfFEtgN8aBySJrNsqnIXtjwmsHP7uwmRAIbvyaYPmKWNb6dcB0ZctH70/B8lRXN9FSbZ944mLWb7BmnY5MhNi19au6ALAKrNnzJKI+iOzR+sakG80vT0TTxqnGsMAKzFim7HF+iCmKbUXWccCuMIYA+yx/KFa1jgVcZq4Ay0Xkv8hs6SZhQgR5Zbafylu3bplOYhg9jWXlubXpQ9/Qe30IsFAA9A8w2ivALspd0yTw1bj60OfHh4mcQ0YVABPEGAAtol8EJ6WTojdt2rSuO/UbYvPqwNe2GWBc4lhWnQ9aXyN0Qd/Y2dn5dubaUJ8HFRhXDqmKWOycLEBTvCGJMDNJttrW4X7NY17sTkXPnDnTvnjx4n5A1kqAz7SlsCy2ywFes2DBgv+cPXvWbhfulDFeZS0pwqOATZBG8MAentnDOWmHMQJht2PDhg36aeKQMMSkXQ9+PHIRwME5WqDdPu33qaK8hK9yVe6Z8U71Kz3GmMG4hQKHU4qy70a037q1W1lZ2a1vTHfTZViTdp3lAS9fvvwVgD8iZrVdyYQc4+rHTOtIpmvR93P1Czw3vku17TCu1mtZR0eHDkPSwUwXlrWLpPWSwDru48evV6Wfe/bOdETA6qxZ5Zj2AsKmCjAeXM5Lgyo11lVPuE3awIb/Qa5+B+JPuCa7Cib1+TaN7zDAAuqDMeDcbvTU1tZeX758uau/E6uV7wlYvTTwpUuXniP7uJtZB1jtQkuwgVBEH7KuwEYz8Ua2jk1jNTY2lrIOS2G1lInW56A0gIxJyvr9iSbeWBRwdOrgJxk3RmJWeiqMCvBg10iE9VqH0Ke1T2sgn3Hbs0W3+qGMvtmkAWuTQL9rlFsodwKiGwvodwd5biZielnH6YAnkQBMKSL0awTtgdoN0qxT3cSkeS5Je1CvvNpxVtez+bFNVoClCD+PeJRkPmh0H2bKCCDRGJbJqww7+pohhbQGbAJULyBKhUkKq0zfCCbr+lk9bQFgsSk5AikL03PUJXnPvbJ69Wp98R91uKuXvpsEPOAVmHoTJf+lPr7y1v1u+bvJulc9mIwQHKN+hhHkea6jvr7+o2zBarysGc5UUi8UAK+jTluTMStTFnCiSNCJx5gT26p3DIv14RjmmaBe7ZKrvqpHdjenqGa2zCEnqEy9RsrfF2AnWL+QAdgsylNZj8Z6LgBLvkwbc27nF/lygFmZr9MvM80JYCcQhfTfaLWUpxHLYERvL1kxzDOyCm1BtzCKNv5LrTVX25z0zClgCXTB38oq8dKlmKT+maOIqB+t6r/UbOOm7wDA+qnvZ53KTHt48+ni/rjjXvupGyfb9H8EoZWUgTuYFQAAAABJRU5ErkJggg==");
+ mask: url("data:image/png;base64,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");
+ -webkit-mask-size: 30px;
+ mask-size: 30px;
+}
+
+.centeredStyle {
+ --spinner-translate: -50%;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(var(--spinner-translate), var(--spinner-translate));
+}
+
+.spin {
+ animation-duration: 800ms;
+ animation-iteration-count: infinite;
+ animation-name: spin;
+ animation-timing-function: linear;
+}
+
+@keyframes spin {
+ 0% {
+ transform: translate(var(--spinner-translate), var(--spinner-translate)) rotate(0deg);
+ }
+
+ 100% {
+ transform: translate(var(--spinner-translate), var(--spinner-translate)) rotate(360deg);
+ }
+}
diff --git a/plugins/salesforce/src/constants.ts b/plugins/salesforce/src/constants.ts
new file mode 100644
index 00000000..2ea94af5
--- /dev/null
+++ b/plugins/salesforce/src/constants.ts
@@ -0,0 +1,7 @@
+const isLocal = () => window.location.hostname.includes("localhost")
+
+export const API_URL = isLocal()
+ ? "https://framer-salesforce-api.sakibulislam25800.workers.dev"
+ : "https://localhost:8787"
+
+export const BUSINESS_UNIT_ID_KEY = "businessUnitId"
diff --git a/plugins/salesforce/src/debug.ts b/plugins/salesforce/src/debug.ts
new file mode 100644
index 00000000..1125f689
--- /dev/null
+++ b/plugins/salesforce/src/debug.ts
@@ -0,0 +1,28 @@
+import { SyncResult } from "./cms"
+
+export const PLUGIN_LOG_SYNC_KEY = "salesforceLogSyncResult"
+
+const isLoggingEnabled = () => {
+ return localStorage.getItem(PLUGIN_LOG_SYNC_KEY) === "true"
+}
+
+export function logSyncResult(result: SyncResult, collectionItems?: Record
+ {children}
+
+
+
+
+
+ Account Engagement
+
+ Enter your Business Unit ID. Need help? Learn more{" "}
+
+ setUnitId(e.target.value)}
+ className="w-full"
+ />
+
+
+
+
+
+
+
+
+
+ Welcome to Salesforce
++ View forms, monitor site traffic, embed chats, and much more. +
+
+
+
+
+ {embeds.map((service, i) => {
+ const name = service.DurableId.replace(/_/g, " ")
+
+ return (
+
+
+ )
+}
diff --git a/plugins/salesforce/src/pages/ObjectSearch.tsx b/plugins/salesforce/src/pages/ObjectSearch.tsx
new file mode 100644
index 00000000..8b39619a
--- /dev/null
+++ b/plugins/salesforce/src/pages/ObjectSearch.tsx
@@ -0,0 +1,136 @@
+import { useState } from "react"
+import { useLocation } from "wouter"
+import { ScrollFadeContainer } from "../components/ScrollFadeContainer"
+import { SearchIcon, IconChevron } from "../components/Icons"
+import { SFObject, useObjectsQuery } from "@/api"
+import { CenteredSpinner } from "@/components/CenteredSpinner"
+import auth from "@/auth"
+import { useSearchParams } from "@/hooks/useSearchParams"
+import { PluginError } from "@/PluginError"
+import { framer } from "framer-plugin"
+
+const searchObjects = (objects: SFObject[], query: string) => {
+ if (!query.trim() || !objects) return objects || []
+
+ const searchTerm = query.toLowerCase().trim()
+
+ const exactMatches: SFObject[] = []
+ const startsWithMatches: SFObject[] = []
+ const containsMatches: SFObject[] = []
+
+ objects.forEach(object => {
+ const name = object.name.toLowerCase()
+ const label = object.label.toLowerCase()
+
+ // Exact matches (highest priority)
+ if (name === searchTerm || label === searchTerm) {
+ exactMatches.push(object)
+ }
+ // Starts with matches (medium priority)
+ else if (name.startsWith(searchTerm) || label.startsWith(searchTerm)) {
+ startsWithMatches.push(object)
+ }
+ // Contains matches (lowest priority)
+ else if (name.includes(searchTerm) || label.includes(searchTerm)) {
+ containsMatches.push(object)
+ }
+ })
+
+ return [...exactMatches, ...startsWithMatches, ...containsMatches]
+}
+
+export default function ObjectSearch() {
+ const [, navigate] = useLocation()
+ const [hoveredIndex, setHoveredIndex] = useState
+
+ Chat
+Embed
+
+
+ )
+ })}
+ + {name} +
+ +
+
+ +
+ + +
+
+ {filteredObjects.length > 0 ? (
+ filteredObjects.map((object, index) => (
+
+ ))
+ ) : (
+
+
+ )
+}
diff --git a/plugins/salesforce/src/pages/Sync.tsx b/plugins/salesforce/src/pages/Sync.tsx
new file mode 100644
index 00000000..a3a0c9f6
--- /dev/null
+++ b/plugins/salesforce/src/pages/Sync.tsx
@@ -0,0 +1,212 @@
+import { framer } from "framer-plugin"
+import {
+ getCollectionFieldForSalesforceField,
+ getPossibleSlugFields,
+ ObjectIdMap,
+ PluginContext,
+ SyncProgress,
+ useSyncRecordsMutation,
+} from "@/cms"
+import { SFFieldConfig, useObjectConfigQuery } from "@/api"
+import { useEffect, useMemo, useState } from "react"
+import { useSearchParams } from "@/hooks/useSearchParams"
+import { assert, isDefined } from "@/utils"
+import { logSyncResult, PLUGIN_LOG_SYNC_KEY } from "@/debug"
+import { Button } from "@/components/Button"
+import { CenteredSpinner } from "@/components/CenteredSpinner"
+import { PageProps } from "@/router"
+import { FieldMapper, ManagedCollectionFieldConfig } from "@/components/FieldMapper"
+import { PluginError } from "@/PluginError"
+
+// Due to the number of fields an object can have, we deprioritize some system created fields by
+// default, as they're unlikely to be used
+const LOW_PRIORITY_FIELDS = [
+ "Id",
+ "OwnerId",
+ "IsDeleted",
+ "CreatedDate",
+ "CreatedById",
+ "LastModifiedDate",
+ "LastModifiedById",
+ "SystemModstamp",
+]
+
+const useLoggingToggle = () => {
+ useEffect(() => {
+ const isLoggingEnabled = () => localStorage.getItem(PLUGIN_LOG_SYNC_KEY) === "true"
+
+ const toggle = () => {
+ const newState = !isLoggingEnabled()
+ localStorage.setItem(PLUGIN_LOG_SYNC_KEY, newState ? "true" : "false")
+ framer.notify(`Logging ${newState ? "enabled" : "disabled"}`, { variant: "info" })
+ }
+
+ const handleKeyDown = (e: KeyboardEvent) => {
+ if (e.ctrlKey && e.shiftKey && e.key === "L") {
+ e.preventDefault()
+ toggle()
+ }
+ }
+
+ document.addEventListener("keydown", handleKeyDown)
+
+ return () => {
+ document.removeEventListener("keydown", handleKeyDown)
+ }
+ }, [])
+}
+
+const getInitialSlugFieldId = (context: PluginContext): string | null => {
+ if (context.type === "update" && context.slugFieldId) return context.slugFieldId
+
+ // All objects have this property
+ return "Id"
+}
+
+const createFieldConfig = (fieldConfigs: SFFieldConfig[], objectIdMap: ObjectIdMap): ManagedCollectionFieldConfig[] => {
+ const includedFields = fieldConfigs.filter(field => !LOW_PRIORITY_FIELDS.includes(field.name))
+ const excludedFields = fieldConfigs.filter(field => LOW_PRIORITY_FIELDS.includes(field.name))
+ const fields = [...includedFields, ...excludedFields]
+
+ return fields.map(fieldConfig => ({
+ field: getCollectionFieldForSalesforceField(fieldConfig, objectIdMap),
+ originalFieldName: fieldConfig.label,
+ }))
+}
+
+const getFieldNameOverrides = (pluginContext: PluginContext): Record
+
+
+
+ )}
+ No Results
++ Try using different keywords and search again +
+
+
+ +
+ + +
+
+ {handlers.map((form, index) => (
+
+
+ )
+}
diff --git a/plugins/salesforce/src/pages/account-engagement/index.tsx b/plugins/salesforce/src/pages/account-engagement/index.tsx
new file mode 100644
index 00000000..ebf4ae24
--- /dev/null
+++ b/plugins/salesforce/src/pages/account-engagement/index.tsx
@@ -0,0 +1,75 @@
+import { useAccountEngagementForms } from "@/api"
+import { ScrollFadeContainer } from "@/components/ScrollFadeContainer"
+import auth from "@/auth"
+import { CenteredSpinner } from "@/components/CenteredSpinner"
+import { InternalLink } from "@/components/Link"
+import { Draggable, framer } from "framer-plugin"
+import { Message } from "@/components/Message"
+
+export default function AccountEngagementForms() {
+ const { data: forms, isLoading } = useAccountEngagementForms()
+
+ if (isLoading) return + Create a Framer form with field names matching the form handler fields, then add the webhook URL below. +
+
+
+ ))}
+ {form.name}
+ +
+
+ +
+ + +
+ For further customization, use{" "}
+
+
+ +
+ + +
+ Adds your domains to the
User
+
+ Email
+
+ {user.email}
+Org
+
+
+
+ Name
+
+ {org.Name}
+
+ Type
+
+ {org.OrganizationType}
+
+ BUID
+
+ {auth.getBusinessUnitId() || "N/A"}
+Domain
+
+
+
+ Staging
+ {stagingUrl ? (
+
+
+ Production
+ {stagingUrl ? (
+
+ + +
Log in to Marketing Cloud and hover over your account name in the upper-right corner.
+ + +
+ By installing the Collect Tracking Code, you can monitor visitor interactions and activities on your
+ site. Learn more{" "}
+
+
+ {availableFormFields?.map((field, i) => (
+
+
+ )
+}
diff --git a/plugins/salesforce/src/pages/web-form/index.tsx b/plugins/salesforce/src/pages/web-form/index.tsx
new file mode 100644
index 00000000..db3a6c1a
--- /dev/null
+++ b/plugins/salesforce/src/pages/web-form/index.tsx
@@ -0,0 +1,51 @@
+import { CopyInput } from "@/components/CopyInput"
+import { useSearchParams } from "@/hooks/useSearchParams"
+import { useWebFormWebhookQuery } from "@/api"
+import { Button } from "@/components/Button"
+import { InternalLink } from "@/components/Link"
+import auth from "@/auth"
+import { API_URL } from "@/constants"
+import { PluginError } from "@/PluginError"
+
+export default function WebForm() {
+ const params = useSearchParams()
+ const objectName = params.get("objectName")
+ const objectLabel = params.get("objectLabel")
+
+ const { data: form, isPending } = useWebFormWebhookQuery(objectName || "")
+
+ if (!objectName || !objectLabel) {
+ throw new PluginError("Invalid Params", "Expected 'objectName' and 'objectLabel' query params")
+ }
+
+ return (
+
+
+ Name
+API Name
+
+
+
+ ))}
+
+
+ +
+ + +
+ Create a Framer form with field names matching the object's fields, then add the webhook URL below. See{" "}
+
404. This should never happen.
}
+}
+
+interface RouterProps {
+ routes: Route[]
+ pluginContext: PluginContext | null
+}
+
+/**
+ * Prevents layout shifts by preserving each page's size during transitions.
+ */
+const SizePreserver = ({ size, children }: { size?: PluginSize; children: React.ReactNode }) => {
+ return (
+
+ {children}
+
+ )
+}
+
+export function Router({ routes, pluginContext }: RouterProps) {
+ const { page, size } = useRoutes({ routes, pluginContext })
+
+ useEffect(() => {
+ framer.showUI({
+ width: size?.width ?? 260,
+ height: size?.height ?? 345,
+ })
+ }, [size])
+
+ return (
+
+
+ {page && (
+
+ {cloneElement(page, { key: location.pathname })}
+
+ )}
+
+
+ )
+}
diff --git a/plugins/salesforce/src/utils.ts b/plugins/salesforce/src/utils.ts
new file mode 100644
index 00000000..7dcb0882
--- /dev/null
+++ b/plugins/salesforce/src/utils.ts
@@ -0,0 +1,90 @@
+import { ManagedCollectionField } from "framer-plugin"
+
+export const FIELD_DELIMITER = "rfa4Emr21pUgs0in"
+
+export function assert(condition: unknown, ...msg: unknown[]): asserts condition {
+ if (condition) return
+
+ const e = Error("Assertion Error" + (msg.length > 0 ? ": " + msg.join(" ") : ""))
+ // Hack the stack so the assert call itself disappears. Works in jest and in chrome.
+ if (e.stack) {
+ try {
+ const lines = e.stack.split("\n")
+ if (lines[1]?.includes("assert")) {
+ lines.splice(1, 1)
+ e.stack = lines.join("\n")
+ } else if (lines[0]?.includes("assert")) {
+ lines.splice(0, 1)
+ e.stack = lines.join("\n")
+ }
+ } catch {
+ // nothing
+ }
+ }
+ throw e
+}
+
+// Match everything except for letters, numbers and parentheses.
+const nonSlugCharactersRegExp = /[^\p{Letter}\p{Number}()]+/gu
+// Match leading/trailing dashes, for trimming purposes.
+const trimSlugRegExp = /^-+|-+$/gu
+
+/**
+ * Takes a freeform string and removes all characters except letters, numbers,
+ * and parentheses. Also makes it lower case, and separates words by dashes.
+ * This makes the value URL safe.
+ */
+export function slugify(value: string): string {
+ return value.toLowerCase().replace(nonSlugCharactersRegExp, "-").replace(trimSlugRegExp, "")
+}
+
+export function isDefined