@capillarytech/creatives-library 9.0.35 → 9.0.36

package/v2Containers/Cap/index.js

@@ -30,7 +30,6 @@ import {
   REQUEST,
   DEFAULT,
   ENABLE_PRODUCT_SUPPORT_VIDEOS,
-  ENABLE_NEW_LEFT_NAVIGATION,
   CAMPAIGN_SETTINGS_URL,
 } from './constants';
 import './_cap.scss';
@@ -54,8 +53,7 @@ import { v2ViberSagas } from '../Viber/sagas';
 import { v2FacebookSagas } from '../Facebook/sagas';
 import createReducer from '../Line/Container/reducer';
 import { DAEMON } from '@capillarytech/vulcan-react-sdk/utils/sagaInjectorTypes';
-import { getDataLayer } from '../../utils/getDataLayer';
-const gtm = getDataLayer();
+const gtm = window.dataLayer || [];
 const {
   logNewTab,
   utilsGetOrgNameFromId,
@@ -74,19 +72,18 @@ const CapWrapper = styled.div`
   min-height: 100%;
   padding: 0;
   flex-direction: column;
-  position: relative;
 `;
 GA.initialize({ accessKey: GTM_TRACKING_ID, trackUIError: true, trackLoadPerformance: 'creatives' });
 
 const MainWrapper = styled.div`
   position: relative;
-  min-height: 100%;
-  top: 0;
+  min-height: calc(100vh - 5.29rem);
+  top: 4.72rem;
 `;
 
 const ContentWrapper = styled.div`
   && {
-    margin-left: 0;
+    margin-left: ${(props) => (props.leftNavbarExpanded ? '17rem' : '4.475rem')};
   }
 `;
 
@@ -121,16 +118,12 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
       const userGtmData = this.getUserGtmData();
       this.setDimensionData(userGtmData);
       gtm.push({ ...userGtmData, event: 'userAuthenticated' });
-      // In MFE mode the host already initialized auth (window.capAuth is set with
-      // the full superset); skip so we don't clobber it with the basic shape.
-      if (!window.capAuth) {
-        Auth.initialize({
-          permissions: userData.accessiblePermissions,
-          isCapUser: userData.isCapUser,
-          roles: Object.keys(userData.accessRoles),
-          accessibleFeatures,
-        });
-      }
+      Auth.initialize({
+        permissions: userData.accessiblePermissions,
+        isCapUser: userData.isCapUser,
+        roles: Object.keys(userData.accessRoles),
+        accessibleFeatures,
+      });
     });
     this.props.actions.getTopbarMenuData(parentModule);
     if (this.props.Global.orgID !== undefined) {
@@ -507,8 +500,6 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
     const type = this.props.location.query.type;
     const toastMessages = this.props.Global.messages;
     const { isCreativesAccessible, showOrgChangeModal, showRefreshModal } = this.state;
-    const { accessibleFeatures = [] } = currentOrgDetails;
-    const isLatestLeftNavigationEnabled = accessibleFeatures.includes(ENABLE_NEW_LEFT_NAVIGATION);
     return (
       <CapWrapper>
         { this.props.loader.localeLoading || this.props.Global.fetching_userdata ?
@@ -546,47 +537,26 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
                   campaignOrgV2Status={currentOrgDetails.org_campaign_v2_status}
                   handleLeftNavBarExpanded={this.handleLeftNavBarExpanded}
                   leftNavbarExpandedProp={this.state.leftNavbarExpanded}
+                />) : ''}
+              <MainWrapper className="main">
 
+                <ContentWrapper
+                  className={`main-content ${this.state.leftNavbarExpanded ? "contet-width-collapse" : "content-width-expanded"}`}
+                  leftNavbarExpanded={this.state.leftNavbarExpanded}
                 >
-                  <MainWrapper isLatestLeftNavigationEnabled={isLatestLeftNavigationEnabled} className="main">
-                    <ContentWrapper
-                      className={`main-content ${this.state.leftNavbarExpanded ? "contet-width-collapse" : "content-width-expanded"}`}
-                      isLatestLeftNavigationEnabled={isLatestLeftNavigationEnabled}
-                      leftNavbarExpanded={this.state.leftNavbarExpanded}
-                    >
-                      <Switch>
-                        {componentRoutes.map(routeProps => {
-                          return (
-                            <RenderRoute
-                              {...routeProps}
-                              key={routeProps.path}
-                              isLoggedIn={isLoggedIn}
-                            />
-                          )}
-                        )}
-                      </Switch>
-                    </ContentWrapper>
-                  </MainWrapper>
-                </NavigationBar>) : (
-                <MainWrapper isLatestLeftNavigationEnabled={isLatestLeftNavigationEnabled} className="main">
-                  <ContentWrapper
-                    className={`main-content ${this.state.leftNavbarExpanded ? "contet-width-collapse" : "content-width-expanded"}`}
-                    isLatestLeftNavigationEnabled={isLatestLeftNavigationEnabled}
-                    leftNavbarExpanded={this.state.leftNavbarExpanded}
-                  >
-                    <Switch>
-                      {componentRoutes.map(routeProps => {
-                        return (
-                          <RenderRoute
-                            {...routeProps}
-                            key={routeProps.path}
-                            isLoggedIn={isLoggedIn}
-                          />
-                        )}
+                  <Switch>
+                    {componentRoutes.map(routeProps => {
+                      return (
+                        <RenderRoute
+                          {...routeProps}
+                          key={routeProps.path}
+                          isLoggedIn={isLoggedIn}
+                        />
                       )}
-                    </Switch>
-                  </ContentWrapper>
-                </MainWrapper>)}
+                    )}
+                  </Switch>
+                </ContentWrapper>
+              </MainWrapper>
             </div>
             {(toastMessages && toastMessages.length > 0) &&
           toastMessages.map((message) => {

package/v2Containers/CreativesContainer/index.js

@@ -90,8 +90,8 @@ import {
 import {EXTERNAL_URL, SITE_URL, WEBPUSH_MEDIA_TYPES} from '../WebPush/constants';
 import { IMAGE, VIDEO } from '../Facebook/Advertisement/constant';
 import { RCS_STATUSES, contentType as RCS_CONTENT_TYPE, EMBEDDED } from '../Rcs/constants';
-import { pickRcsCardVarMappedEntries } from '../Rcs/rcsLibraryHydrationUtils';
 import { mapRcsCardContentForConsumerWithResolvedTags } from '../Rcs/utils';
+import { pickRcsCardVarMappedEntries } from '../Rcs/rcsLibraryHydrationUtils';
 import { RCS_SMS_FALLBACK_VAR_MAPPED_PROP } from '../../v2Components/CommonTestAndPreview/constants';
 import { CREATIVE } from '../Facebook/constants';
 import { LOYALTY } from '../App/constants';
@@ -1442,21 +1442,13 @@ export class Creatives extends React.Component {
             cardSettings = {},
             accountId = "",
           } = get(versions, 'base.content.RCS.rcsContent', {});
+          const rootRcsCardVarMappedFromSubmit = get(template, 'value.rcsCardVarMapped');
           const firstCardFromSubmit = Array.isArray(cardContentFromSubmit)
             ? cardContentFromSubmit[0]
             : null;
-          const cardVarMappedFromFirstRcsCard =
-            firstCardFromSubmit?.cardVarMapped != null
-            && typeof firstCardFromSubmit.cardVarMapped === 'object'
-              ? pickRcsCardVarMappedEntries(firstCardFromSubmit.cardVarMapped)
-              : null;
-          // Campaigns/consumers should see the literal tag (e.g. `{{first_name}}`) in title/description,
-          // not the internal numeric slot placeholder (`{{1}}`) — that slot scheme is only meaningful
-          // to this editor's own reopen/hydration (see getFormData, which persists raw cardContentFromSubmit
-          // separately for that round-trip and is unaffected by this).
           const cardContent = mapRcsCardContentForConsumerWithResolvedTags(
             cardContentFromSubmit,
-            cardVarMappedFromFirstRcsCard,
+            rootRcsCardVarMappedFromSubmit,
             isFullModeForRcsConsumerPayload,
           );
           const rcsContent = {
@@ -1465,6 +1457,11 @@ export class Creatives extends React.Component {
             cardSettings,
             cardContent,
           };
+          const cardVarMappedFromFirstRcsCard =
+            firstCardFromSubmit?.cardVarMapped != null
+            && typeof firstCardFromSubmit.cardVarMapped === 'object'
+              ? pickRcsCardVarMappedEntries(firstCardFromSubmit.cardVarMapped)
+              : null;
           const includeRootRcsCardVarMappedOnConsumerPayload =
             cardVarMappedFromFirstRcsCard
             && Object.keys(cardVarMappedFromFirstRcsCard).length > 0

package/v2Containers/CreativesContainer/tests/index.test.js

@@ -267,59 +267,6 @@ describe('Test SlideBoxContent container', () => {
     expect(instance.state.templateData.rcsCardVarMapped).toEqual(cardVarMapped);
   });
 
-  it('RCS getCreativesData sends the literal tag (not the numeric slot) in title/description to consumers', async () => {
-    renderedComponent = shallowWithIntl(
-      <Creatives
-        loyaltyMetaData={loyaltyMetaData}
-        Templates={rcsTemplates}
-        channel="RCS"
-        slidBoxContent="editTemplate"
-        templateData={rcsEditTemplateData}
-        handleCloseCreatives={handleCloseCreatives}
-        getCreativesData={getCreativesData}
-        isFullMode={false}
-        templateActions={{
-          getCdnTransformationConfig,
-        }}
-      />,
-    );
-    renderedComponent.instance().onEditTemplate();
-
-    const mockValue = {
-      validity: true,
-      value: {
-        name: 'rcs_creative_name',
-        type: 'RCS',
-        versions: {
-          base: {
-            content: {
-              RCS: {
-                rcsContent: {
-                  contentType: 'RICHCARD',
-                  cardType: 'STANDALONE',
-                  cardSettings: {},
-                  cardContent: [{
-                    title: 'Hi {{1}}',
-                    description: 'Visit {{2}}',
-                    cardVarMapped: { 1: '{{first_name}}', 2: '{{loyalty_points}}' },
-                  }],
-                },
-                smsFallBackContent: {},
-              },
-            },
-          },
-        },
-      },
-    };
-
-    renderedComponent.instance().getFormData(mockValue);
-    await tick();
-
-    const sentCardContent = getCreativesData.mock.calls[0][0].rcsContent.cardContent[0];
-    expect(sentCardContent.title).toBe('Hi {{first_name}}');
-    expect(sentCardContent.description).toBe('Visit {{loyalty_points}}');
-  });
-
   it('Text getCreatives data for rcs, data from creatives done to campaigns', async () => {
     renderFunction('SMS', 'editTemplate', smsTemplates, smsEditTemplateData );
     renderedComponent.instance().onEditTemplate();

package/v2Containers/Rcs/carouselUtils.js

@@ -19,8 +19,29 @@ import { sanitizeCardVarMappedValue } from './utils';
 
 const getVarNameFromToken = (token = '') => token.replace(/^\{\{|\}\}$/g, '');
 
-export const getCarouselVarMapKey = (cardIndex, varName) =>
-  (cardIndex === 0 ? varName : `c${cardIndex}::${varName}`);
+/**
+ * Assigns every variable token across the whole carousel a stable `cardVarMapped` key (a plain
+ * number, title then description, per card, in encounter order) — {cardIndex: {title: [key, …],
+ * description: [key, …]}}. Each occurrence is its own independent slot — even two tokens sharing
+ * the same literal tag name (e.g. "{{name}}" in both a card's title and description) get separate
+ * keys and are filled independently. A slot's key depends only on where its token sits in the
+ * template text, never on which tag currently fills it, so re-picking a different tag for the
+ * same slot never changes its key.
+ */
+export const computeCarouselVarSlotKeys = (carouselData, rcsVarRegex) => {
+  let nextNumber = 1;
+  return (carouselData || []).map((card = {}) => {
+    const keysForField = (fieldStr) => (fieldStr || '').match(rcsVarRegex)?.map(() => {
+      const key = String(nextNumber);
+      nextNumber += 1;
+      return key;
+    }) ?? [];
+    return {
+      title: keysForField(card.title),
+      description: keysForField(card.description),
+    };
+  });
+};
 
 export const getCarouselImageAssetIndex = (cardIndex) =>
   RCS_CAROUSEL_ASSET_INDEX_BASE + (cardIndex * 3);
@@ -147,19 +168,19 @@ export const getCarouselDescriptionCharacterCount = (carouselData, cardIndex) =>
 
 /**
  * Preview (TestAndPreviewSlidebox / listing preview): resolve each card's title/desc through
- * `resolveCarouselTemplateWithMap(str, cardIndex)` — a per-card-scoped resolver (see
- * `getCarouselVarMapKey`). Each card's variables are independent, so no cross-card slot offset is
- * needed (unlike the old flat/global-slot scheme this replaced).
+ * `resolveCarouselTemplateWithMap(str, cardIndex, isDescField)` — each variable slot's key is its
+ * global position across the whole carousel (see `getCarouselGlobalVarSlotKey`), so two cards can
+ * never collide even when they pick the same tag name for their own slot.
  */
 export const buildCarouselCardsForPreview = (cards = [], { isFullMode, resolveCarouselTemplateWithMap }) =>
   (cards || []).map((card = {}, cardIndex) => {
     const rawTitle = card.title || '';
     const rawDesc = card.description || '';
     const resolvedTitle = !isFullMode
-      ? resolveCarouselTemplateWithMap(rawTitle, cardIndex)
+      ? resolveCarouselTemplateWithMap(rawTitle, cardIndex, false)
       : rawTitle;
     const resolvedDesc = !isFullMode
-      ? resolveCarouselTemplateWithMap(rawDesc, cardIndex)
+      ? resolveCarouselTemplateWithMap(rawDesc, cardIndex, true)
       : rawDesc;
     const videoThumb = card.thumbnailSrc || card.videoAsset?.videoThumbnail || '';
     const videoSrc = card.videoAsset?.videoSrc || '';
@@ -180,44 +201,50 @@ export const buildCarouselCardContentForPayload = (carouselData, {
   cardVarMapped,
   selectedCarouselHeight,
   rcsVarRegex,
-}) => (carouselData || []).map((card = {}, cardIndex) => {
-  const cardMediaType = card.mediaType;
-  const isCardVideo = cardMediaType === RCS_MEDIA_TYPES.VIDEO;
-  const isCardImage = cardMediaType === RCS_MEDIA_TYPES.IMAGE;
-  const mediaUrl = isCardVideo
-    ? (card.videoAsset?.videoSrc || '')
-    : (card.imageSrc || '');
-  const thumbnailUrl = isCardVideo
-    ? (card.thumbnailSrc || card.videoAsset?.videoThumbnail || '')
-    : '';
-  const cardVarTokens = [
-    ...((card.title || '').match(rcsVarRegex) ?? []),
-    ...((card.description || '').match(rcsVarRegex) ?? []),
-  ];
-  const cardVarMappedForCard = {};
-  if (isSlotMappingMode && cardVarTokens.length > 0) {
-    cardVarTokens.forEach((token) => {
+}) => {
+  const slotKeysByCard = computeCarouselVarSlotKeys(carouselData, rcsVarRegex);
+  return (carouselData || []).map((card = {}, cardIndex) => {
+    const cardMediaType = card.mediaType;
+    const isCardVideo = cardMediaType === RCS_MEDIA_TYPES.VIDEO;
+    const isCardImage = cardMediaType === RCS_MEDIA_TYPES.IMAGE;
+    const mediaUrl = isCardVideo
+      ? (card.videoAsset?.videoSrc || '')
+      : (card.imageSrc || '');
+    const thumbnailUrl = isCardVideo
+      ? (card.thumbnailSrc || card.videoAsset?.videoThumbnail || '')
+      : '';
+    const cardVarTokens = [
+      ...((card.title || '').match(rcsVarRegex) ?? []),
+      ...((card.description || '').match(rcsVarRegex) ?? []),
+    ];
+    const cardSlotKeys = [
+      ...(slotKeysByCard[cardIndex]?.title ?? []),
+      ...(slotKeysByCard[cardIndex]?.description ?? []),
+    ];
+    const cardVarMappedForCard = {};
+    cardVarTokens.forEach((token, tokenIndex) => {
       const varName = getVarNameFromToken(token);
-      if (!varName) return;
-      const scopedValue = cardVarMapped?.[getCarouselVarMapKey(cardIndex, varName)] ?? '';
-      cardVarMappedForCard[varName] = sanitizeCardVarMappedValue(scopedValue);
+      const slotKey = cardSlotKeys[tokenIndex];
+      if (!varName || !isSlotMappingMode) return;
+      const scopedValue = cardVarMapped?.[slotKey] ?? '';
+      cardVarMappedForCard[slotKey] = sanitizeCardVarMappedValue(scopedValue);
     });
-  }
-  return {
-    title: card.title || '',
-    description: card.description || '',
-    mediaType: cardMediaType,
-    ...((isCardImage || isCardVideo) && {
-      media: {
-        mediaUrl,
-        thumbnailUrl,
-        height: selectedCarouselHeight || MEDIUM,
-        ...(isCardVideo && card.videoAsset?.videoName && { videoName: card.videoAsset.videoName }),
-      },
-    }),
-    ...(Array.isArray(card.suggestions) && card.suggestions.length > 0 && {
-      suggestions: card.suggestions,
-    }),
-    ...(Object.keys(cardVarMappedForCard).length > 0 && { cardVarMapped: cardVarMappedForCard }),
-  };
-});
+    return {
+      title: card.title || '',
+      description: card.description || '',
+      mediaType: cardMediaType,
+      ...((isCardImage || isCardVideo) && {
+        media: {
+          mediaUrl,
+          thumbnailUrl,
+          height: selectedCarouselHeight || MEDIUM,
+          ...(isCardVideo && card.videoAsset?.videoName && { videoName: card.videoAsset.videoName }),
+        },
+      }),
+      ...(Array.isArray(card.suggestions) && card.suggestions.length > 0 && {
+        suggestions: card.suggestions,
+      }),
+      ...(Object.keys(cardVarMappedForCard).length > 0 && { cardVarMapped: cardVarMappedForCard }),
+    };
+  });
+};

package/v2Containers/Rcs/components/CarouselCard.js

@@ -15,6 +15,7 @@ import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
 import TagList from '../../TagList';
 import globalMessages from '../../Cap/messages';
 import messages from '../messages';
+import { RCS_TAG_AREA_FIELD_TITLE, RCS_TAG_AREA_FIELD_DESC } from '../constants';
 import CarouselCardMedia from './CarouselCardMedia';
 import CarouselCardButtons from './CarouselCardButtons';
 import CarouselCharacterCount from './CarouselCharacterCount';
@@ -50,7 +51,8 @@ const CarouselCard = ({
   onDescriptionChange,
   onTitleAddVar,
   onDescriptionAddVar,
-  onTagSelect,
+  onTitleTagSelect,
+  onDescTagSelect,
   onContextChange,
   renderEditMessage,
   onFieldChange,
@@ -137,7 +139,7 @@ const CarouselCard = ({
           (isEditFlow || !isFullMode) ? (
             <TagList
               label={formatMessage(globalMessages.addLabels)}
-              onTagSelect={onTagSelect}
+              onTagSelect={onTitleTagSelect}
               location={location}
               tags={tagsForPicker}
               onContextChange={onContextChange}
@@ -159,7 +161,7 @@ const CarouselCard = ({
       />
       <CapRow className="rcs_text_area_wrapper">
         {(isEditFlow || !isFullMode) ? (
-          renderEditMessage(card.title || '', cardIndex)
+          renderEditMessage(card.title || '', cardIndex, RCS_TAG_AREA_FIELD_TITLE)
         ) : (
           <CapInput
             value={card.title || ''}
@@ -189,7 +191,7 @@ const CarouselCard = ({
           (isEditFlow || !isFullMode) ? (
             <TagList
               label={formatMessage(globalMessages.addLabels)}
-              onTagSelect={onTagSelect}
+              onTagSelect={onDescTagSelect}
               location={location}
               tags={tagsForPicker}
               onContextChange={onContextChange}
@@ -211,7 +213,7 @@ const CarouselCard = ({
       />
       <CapRow className="rcs_text_area_wrapper">
         {(isEditFlow || !isFullMode) ? (
-          renderEditMessage(card.description || '', cardIndex)
+          renderEditMessage(card.description || '', cardIndex, RCS_TAG_AREA_FIELD_DESC)
         ) : (
           <TextArea
             autosize={{ minRows: 3, maxRows: 5 }}
@@ -249,11 +251,6 @@ const CarouselCard = ({
       hostName={hostName}
       formatMessage={formatMessage}
       onSuggestionsChange={onSuggestionsChange}
-      location={location}
-      tags={tagsForPicker}
-      injectedTags={injectedTags}
-      selectedOfferDetails={selectedOfferDetails}
-      onContextChange={onContextChange}
     />
   </CapCard>
 );
@@ -286,7 +283,8 @@ CarouselCard.propTypes = {
   onDescriptionChange: PropTypes.func.isRequired,
   onTitleAddVar: PropTypes.func.isRequired,
   onDescriptionAddVar: PropTypes.func.isRequired,
-  onTagSelect: PropTypes.func.isRequired,
+  onTitleTagSelect: PropTypes.func.isRequired,
+  onDescTagSelect: PropTypes.func.isRequired,
   onContextChange: PropTypes.func,
   renderEditMessage: PropTypes.func.isRequired,
   onFieldChange: PropTypes.func.isRequired,

package/v2Containers/Rcs/components/CarouselCardButtons.js

@@ -18,11 +18,6 @@ const CarouselCardButtons = ({
   hostName,
   formatMessage,
   onSuggestionsChange,
-  location,
-  tags,
-  injectedTags,
-  selectedOfferDetails,
-  onContextChange,
 }) => {
   const suggestionsForCard = suggestions || [];
   return (
@@ -73,11 +68,6 @@ const CarouselCardButtons = ({
         host={hostName}
         minSavedSuggestions={cardIndex === 0 ? 1 : 0}
         hideDeleteSuggestionIndexes={cardIndex === 0 ? [0] : []}
-        location={location}
-        tags={tags}
-        injectedTags={injectedTags}
-        selectedOfferDetails={selectedOfferDetails}
-        onContextChange={onContextChange}
       />
     </>
   );
@@ -91,11 +81,6 @@ CarouselCardButtons.propTypes = {
   hostName: PropTypes.string,
   formatMessage: PropTypes.func.isRequired,
   onSuggestionsChange: PropTypes.func.isRequired,
-  location: PropTypes.object,
-  tags: PropTypes.array,
-  injectedTags: PropTypes.object,
-  selectedOfferDetails: PropTypes.array,
-  onContextChange: PropTypes.func,
 };
 
 CarouselCardButtons.defaultProps = {
@@ -103,11 +88,6 @@ CarouselCardButtons.defaultProps = {
   isEditFlow: false,
   isFullMode: false,
   hostName: '',
-  location: {},
-  tags: [],
-  injectedTags: {},
-  selectedOfferDetails: [],
-  onContextChange: () => {},
 };
 
 export default React.memo(CarouselCardButtons);

package/v2Containers/Rcs/constants.js

@@ -78,8 +78,13 @@ export const rcsVarTestRegex = /^\{\{[^}]+\}\}$/;
 export const RCS_NUMERIC_VAR_TOKEN_REGEX = /\{\{(\d+)\}\}/g;
 /** `cardVarMapped` slot keys that are numeric only (legacy ordering). */
 export const RCS_NUMERIC_VAR_NAME_REGEX = /^\d+$/;
-/** Semantic Liquid-style keys on RCS `cardVarMapped` (same class as `{{…}}` inner names in the editor). */
-export const RCS_CARD_VAR_MAPPED_SEMANTIC_KEY_REGEX = /^[\w.()]+$/;
+/**
+ * Semantic Liquid-style keys on RCS `cardVarMapped` (same class as `{{…}}` inner names in the
+ * editor). Carousel slots are now keyed by global position (see `computeCarouselVarSlotKeys`), a
+ * plain number, so this only needs to match bare semantic names — the optional `cN::` prefix is
+ * kept solely so `pickRcsCardVarMappedEntries` doesn't drop legacy scoped keys from older payloads.
+ */
+export const RCS_CARD_VAR_MAPPED_SEMANTIC_KEY_REGEX = /^(?:c\d+::)?[\w.()]+$/;
 /** Escape all special RegExp characters in an arbitrary string before using it in `new RegExp(...)`. */
 export const REGEX_SPECIAL_CHARS_ESCAPE_PATTERN = /[-/\\^$*+?.()|[\]{}]/g;
 /** Entire string is wrapped in `{{…}}` mustache delimiters (allows any content including `}`). */