config#FLOW_EDITOR_API TypeScript Examples

The following examples show how to use config#FLOW_EDITOR_API. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: utils.ts    From glific-frontend with GNU Affero General Public License v3.0 7 votes vote down vote up 
validateMediaMethod = (URL: string, attachmentType: string) =>
  new Promise((resolve) => {
    const encodedUrl = encodeURIComponent(URL);
    axios
      .get(
        `${FLOW_EDITOR_API}validate-media?url=${encodedUrl}&type=${attachmentType.toLowerCase()}`,
        {
          headers: { authorization: getAuthSession('access_token') },
        }
      )
      .then((response: any) => {
        resolve(response);
      })
      .catch((error) => {
        // add log's
        setLogs(`attachmentType:${attachmentType} URL:${URL}`, 'info');
        setLogs(error, 'error');
      });
  })
Example #2
Source File: InteractiveMessage.helper.ts    From glific-frontend with GNU Affero General Public License v3.0 6 votes vote down vote up 
getVariableOptions = async (setContactVariables: any) => {
  const glificBase = FLOW_EDITOR_API;

  const contactFieldsprefix = '@contact.fields.';
  const contactVariablesprefix = '@contact.';
  const headers = { authorization: getAuthSession('access_token') };
  // get fields keys
  const fieldsData = await axios.get(`${glificBase}fields`, {
    headers,
  });

  const fields = fieldsData.data.results.map((i: any) => contactFieldsprefix.concat(i.key));

  // get contact keys
  const contactData = await axios.get(`${glificBase}completion`, {
    headers,
  });

  const properties = contactData.data.context.types.find(
    ({ name }: { name: string }) => name === 'contact'
  );

  const contacts =
    properties &&
    properties.properties
      .map((i: any) => contactVariablesprefix.concat(i.key))
      .concat(fields)
      .map((val: string) => ({ name: val }))
      .slice(1);

  setContactVariables(contacts);
}
Example #3
Source File: AddVariables.tsx    From glific-frontend with GNU Affero General Public License v3.0 4 votes vote down vote up 
AddVariables: React.FC<AddVariablesPropTypes> = ({
  setVariable,
  handleCancel,
  template,
  updateEditorState,
  variableParams,
  variableParam,
}: AddVariablesPropTypes) => {
  const [formFieldItems, setFormFieldItems] = useState<any>([]);
  const [initialValues, setInitialValues] = useState<any>({});
  const { t } = useTranslation();
  const [contactVariables, setContactVariables] = useState<any>([]);

  let contacts: any = [];
  let fields: any = [];
  let selectedVariables: any = [];

  const glificBase = FLOW_EDITOR_API;
  const contactFieldsprefix = '@contact.fields.';
  const contactVariablesprefix = '@contact.';
  const headers = { authorization: getAuthSession('access_token') };

  useEffect(() => {
    const getVariableOptions = async () => {
      // get fields keys
      const fieldsData = await axios.get(`${glificBase}fields`, {
        headers,
      });

      fields = fieldsData.data.results.map((i: any) => contactFieldsprefix.concat(i.key));

      // get contact keys
      const contactData = await axios.get(`${glificBase}completion`, {
        headers,
      });

      const properties = contactData.data.context.types[5];
      contacts = properties.properties
        .map((i: any) => contactVariablesprefix.concat(i.key))
        .concat(fields)
        .slice(1);

      setContactVariables(contacts);
    };

    getVariableOptions();
  }, []);

  const syncInitialValuesWithFormik = (val: any, index: number) => {
    const initialStateValue = { ...initialValues };
    initialStateValue[`variable${index}`] = val;
    setInitialValues(initialStateValue);
  };

  useEffect(() => {
    const hasVariables = template?.numberParameters > 0;

    if (hasVariables) {
      const formFieldItem: any = [];

      for (let index = 1; index <= template.numberParameters; index += 1) {
        formFieldItem.push({
          component: AutoComplete,
          name: `variable${index}`,
          type: 'text',
          options: contactVariables,
          optionLabel: 'key',
          multiple: false,
          freeSolo: true,
          selectTextAsOption: !!initialValues[`variable${index}`],
          onInputChange: (event: any, newInputValue: any) => {
            syncInitialValuesWithFormik(newInputValue, index);
          },
          textFieldProps: {
            variant: 'outlined',
            label: `Variable ${index}`,
          },
        });
      }

      setFormFieldItems(formFieldItem);
    }
  }, [template, contactVariables, initialValues]);

  useEffect(() => {
    const initialValue: any = {};
    variableParam.forEach((value: any, i: any) => {
      initialValue[`variable${i + 1}`] = value;
    });
    setInitialValues(initialValue);
  }, [variableParam]);

  const updateText = (variable: any) => {
    let body = template?.body;
    Object.keys(variable).forEach((element: string, index: number) => {
      body = body.replace(
        `{{${index + 1}}}`,
        variable[element].key ? variable[element].key : variable[element]
      );
    });
    updateEditorState(body);
    selectedVariables = Object.values(variable).map((item: any) => (item.key ? item.key : item));

    variableParams(selectedVariables);
  };

  const form = (
    <Formik
      enableReinitialize
      initialValues={initialValues}
      onSubmit={(itemData) => {
        updateText(itemData);
        setVariable(false);
      }}
    >
      {({ submitForm }) => (
        <Form data-testid="formLayout">
          <DialogBox
            titleAlign="left"
            title={t('Select variables for the message')}
            contentText={template?.body}
            handleOk={() => {
              submitForm();
            }}
            handleCancel={() => {
              setVariable(false);
              handleCancel();
            }}
            buttonOk={t('Done')}
            alignButtons="left"
          >
            <div data-testid="variablesDialog">
              {formFieldItems.map((field: any) => (
                <Field {...field} key={field.name} />
              ))}
            </div>
          </DialogBox>
        </Form>
      )}
    </Formik>
  );

  return form;
}